《webpack》之从入门到放弃 -- 学习笔记【二】结合vue的使用

1、使用script标签引入Vue的包

2、在index页面中创建一个id为app的div容器

3、通过new vue得到一个vm的实例

在使用webpack构建Vue项目前，要先对webpack基本用法及简单的配置了解。

1、cnpm i vue -s 将Vue安装为运行依赖

2、测试一下能否正常使用vue，

　在main.js文件中导入Vue包, main.js中添加如下代码：

import Vue from 'vue'

var vm = new Vue({
    el : '#app',
    data : {
        msg : 'hello webpack-vue'
    }
})

　在index.html中输出 msg

<body>
    <div id="app">
        {{msg}}
    </div>
</body>

终端中运行 npm run dev会发现提示如下错误：

这是由于在main.js文件中导入Vue包 import Vue from 'vue' 时，有坑需要注意：webpack中这样导入的vue是功能不完善的阉割版vue，回顾webpack导入包的查找规则：

　　①、先找项目根目录的node_modules文件夹

　　②、在node_modules文件夹中根据包名找对对应的文件夹（这里为vue文件夹）

　　③、在包文件夹中打开package.json文件夹，找到main属性，main属性对应的js文件就是webpack中vue包被加载后实际对应的js入口文件，可以发现vue包中对应的入口js文件是："main": "dist/vue.runtime.common.js",

④、有三种办法可以修改：Ⅰ：在main.js文件中导入Vue包 import Vue from '../node_modules/vue/dist/vue.js'

　　　　　　　　　　　　　　Ⅱ：修改package.json文件夹中 main属性的值为："main": "dist/vue.js",　

　　　　　　　　　　　　　　Ⅲ：（推荐）在webpack项目webpack.config.js配置文件中module里加上：

    resolve:{
        alias:{//vue包被加载后实际对应的js入口文件
            "vue$":"../node_modules/vue/dist/vue.js"
        }
    }

　添加以上配置后即可成功在页面中打印出 {{msg}} 得内容了。

3、在src目录下定义一个.vue结尾的组件，其中组件有三部分组成： template script style

4、使用import login from './login.vue' 在main.js中导入这个组件

5、在vm实例中引入 login组件

6、将login组件放到index.html 中，查看显示效果：

运行项目会发现报错如下：

7、这是由于在webpack中，推荐使用.vue这个组件模板文件定义组件，但是默认webpack无法打包.vue文件，所以需要安装能解析这种文件的loader ：cnpm i vue-loader vue-template-compiler -D

第一步：导入依赖

//导入vue的依赖插件
const vueLoaderPlugin = require ('vue-loader/lib/plugin'）

第二步：添加plugin的配置

第三步：添加该loader得匹配规则：

8、重新运行项目，即可成功打印出login.vue 组件中得模板数据，效果如下：

9、在vue中结合render函数渲染指定的组件到容器中

在结合使用webpack的Vue项目中，在main.js中使用import Vue from 'vue' 导入的Vue的包，功能不完善，只是提供了runtime-only的方式；所以，不能使用components组件的方式，向页面中渲染组件

在webpack中，如果想要通过Vue，把一个组件放到页面中去展示，vm实例中的render函数可以实现