單文件組件

Vue.js是一個漸進式的js框架，在使用wewbpack構建Vue項目時，可以使用一種新的構建模式：

.vue單文件組件。

就是一個后綴名為.vue的文件，在webpack中使用vue-loader就可以對.vue格式的文件進行處理。

一個.vue文件一般包含3部分，即<template>、<script>和<style>

<template之間的代碼就是該組件的模板HTML,style之間的是CSS樣式。

安裝插件

使用.vue文件需要先安裝vue-loader、vue-style-loaer等加載器并做配置。如果要使用ES6的語法，還需要安裝babel和babel-loader等加載器。

使用npm逐個安裝：

npm install --save vuenpm install --save-dev vue-loadernpm install --save-dev vue-style-loadernpm install --save-dev vue-template-compilernpm install --save-dev vue-hot-reload-apinpm install --save-dev babelnpm install --save-dev babel-loadernpm install --save-dev babel-corenpm install --save-dev babel-plugin-transform-runtimenpm install --save-dev babel-preset-es2015npm install --save-dev babel-runtime

修改配置文件

安裝完成后，修改配置文件webpack.config.js來支持對.vue文件以及ES6的解析：

var path = require('path'); var ExtractTextPlugin = require('extract-text-webpack-plugin');var config = {entry: {main: './main'},output: {path: path.join(__dirname, './dist'),publicPath: '/dist/',filename: 'main.js'},module: {rules: [{test: /\.vue$/,loader: 'vue-loader',options: {loaders: {css: ExtractTextPlugin.extract({use: 'css-loader',fallback: 'vue-style-loader'})}}},{test: /\.js$/,loader: 'babel-loader',exclude: /node_modules/},{test: /\.css$/,use: ExtractTextPlugin.extract({use: 'css-loader',fallback: 'style-loader'})}]},plugins: [new ExtractTextPlugin("main.css")] };module.exports = config;

在項目目錄下新建一個名為.babelrc的文件，并寫入babel的配置，webpack會依賴此配置

文件來使用babel來編譯ES6的的代碼：

{"presets": ["es2015"],"plugins": ["transform-runtime"],"comments": false }

使用.vue文件

配置好上面這些后，就可以使用.vue文件了，記住每個.vue文件代表一個組件，組件之間相互依賴。

在項目目錄下新建一個app.vue的文件并寫入以下內容：

<template><div><v-title title="Vue組件化"></v-title><v-button @click="handleClick">點擊按鈕</v-button><p><img src="./images/image.png" style="width: 200px;"></p></div> </template> <script>import vTitle from './title.vue';import vButton from './button.vue';export default {components: {vTitle,vButton},methods: {handleClick (e) {console.log(e);}}} </script>

.vue的組件是沒有名稱的，在父組件使用時可以對它自定義。寫好了組件，就可以在入口main.js中使用它了。

打開main.js文件，把內容替換為下面的代碼：

import Vue from 'vue'; import App from './app.vue';new Vue({el: '#app',render: h => {return h(App)} });

執行:

npm run dev

運行項目。

總結

以上是生活随笔為你收集整理的Vue单文件组件与vue-loader的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。