Vue单文件组件与vue-loader

单文件组件

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

运行项目。