在普通网页中使用Vue：
1、使用script标签引入Vue的包
2、在index页面中创建一个id为app的div容器
3、通过new vue得到一个vm的实例
在使用webpack构建Vue项目前，要先对webpack基本用法及简单的配置了解。
webpack基本用法
在webpack中配置Vue组件页面的解析
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
login.vue
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-loader，15.*版本之后的版本的使用都需要添加plugin的配置
第一步：导入依赖
//导入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函数可以实现
