vue——44-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 login from './login.vue'
4. 定义一个 .vue 结尾的组件，其中，组件有三部分组成：template script style
5. 使用 import login from './login.vue' 导入这个组件
6. 创建 vm 的实例 var vm = new Vue({ el : '#app',render: c => c(login) })
7. 在页面中创建一个 id 为 app 的 div 元素，作为我们 vm 实例要控制的区域

1.直接在文件入口（main.js）引入vue

import Vue from 'vue';

2.在项目文件中新建模板文件并在 main.js 中引入

// 导入 login 组件
// 默认，webpack 无法打包 .vue 文件，需要安装相关的 loader：
// cnpm i vue-loader vue-template-compiler -d
// 在配置文件中，新增 loader 配置项 { test:/\.vue$/,use:'vue-loader' }
import login from './login.vue'

4.安装相应包 并 新增 loader 配置项

安装命名：cnpm i vue-loader vue-template-compiler -D
在 wepack.config.js 中的 module.exports={} >module:{} >rules:[] 中添加下面配置

// 配置处理 .vue 文件的第三方 loader 规则
{test: /\.vue$/, use: 'vue-loader'}

注意：vue-loader@15.*之后，必须添加VueLoaderPlugin插件
1.在 wepack.config.js 中引入 const VueLoaderPlugin = require('vue-loader/lib/plugin')
2.在 module.exports >plugins:[] 里添加 new VueLoaderPlugin()

5.把模块引入到 index.html 页面

1.在 main.js 中

let vm = new Vue({
    el: '#app',
    data: {
        msg: '我是 vue ！'
    },
    
    methods:{},
    // components: {
    //     // 无法通过这种方式引入
    //     login
    // }

    // render: function (createElement) {
    //     // 在 webpack 中，如果想要通过 vue ，把一个组件放到页面中去
    //     // 展示，vm 实例中的 render 函数可以实现
    //     return createElement(login);
    // },

    // 上面的缩写形式
    render: c => c(login)
});

2.在 index.js 中

<div id="app"></div>