webpack中结合Vue使用

webpack中如何使用Vue

1、安装vue的包：
cnpm i vue -S
2、由于在webpack中，推荐使用.vue这个组件模板文件定义组件，所以需要安装能解析这个文件的loader
cnpm i vue-loader vue-template-compiler -D
3、在main.js中，导入vue模块
import Vue from 'vue'
4、定义一个.vue结尾的组件，新建一个login.vue文件
其中组件有三部分组成：template script style
template写html代码；script写业务逻辑；style写css代码
5、在main.js中导入这个组件
import login from './login.vue'
6、在main.js中创建vm的实例

var vm = new Vue({ 
`			el: '#app', 
			render: c=>c(login)
			})

7、在index.html页面中创建一个id为app的div元素，作为我们vm实例要控制的区域
8、在webpack.config.js文件中写入配置第三方loader规则

var path = require('path')
var htmlWebpackPlugin = require('html-webpack-plugin')
const { VueLoaderPlugin } = require('vue-loader');
module.exports = {
    entry: path.join(__dirname, './src/main.js'),   //入口文件
    output: {   //指定输出选项
        path: path.join(__dirname, './dist'),  //输出路径
        filename: 'bundle.js'    //指定输出文件的名称
    },
    mode: 'development',
    plugins: [  //所有webpack插件的配置节点
        new htmlWebpackPlugin({
            template: path.join(__dirname, './src/index.html'),    //指定模板文件路径
            filename: 'index.html'   //设置生成的内存页面名称
        }),
        new VueLoaderPlugin()
    ],
    module: {
        rules: [
            { test:/\.vue$/, use: 'vue-loader'}  //处理.vue文件的loader
        ]
    },
    resolve: {
        alias: {   //修改Vue被导入包的路径
            // "vue$": "vue/dist/vue.js"
        }
    }
}