webpack中使用vue

在普通网页中使用vue的步骤：
1.使用script引入下载下来的vue.js；
2.在页面中创建一个id为app的div容器；
3.通过new Vue得到一个vue实例；
在webpack中使用vue呢？
注意：在webpack中使用import Vue from ‘vue’ 所导入的vue是一个功能不完整的vue包，是一个vue.runtime.common.js,并不是像网页中的vue.js那样子的。这是一个功能不是非常全的vue包。
****import Vue from ‘vue’这种包的查找规则：
①在项目根目录下找是否有node_modules文件夹。
②找到文件夹中的vue文件夹。
④在vue文件夹中，找到一个package.json的包配置文件。
⑥在package.json中找到main属性，main属性就是指定了这个包在被加载的时候的入口文件。
所以，如果想将import Vue from ‘vue’ 所导出的js包跟网页里面一样，有三个方法
1.将上述的main属性所指向的js文件变成vue.js即可。
2.直接将import Vue from ‘vue’ 改成为import Vue from “./node_modules/vue/dist/vue.js” 也是可以的。
3.在webpack.config.js配置文件中，添加一个resolve：{a’lias：{“vue$”:“vue/dist/vue.js”}}

那么引入vue.js和vue.runtime.common.js的区别是在哪里呢？？？
区别就是在于在于组件的引入！
普通的vue.js包可以通过

这种在父组件中通过components来引入子组件，再在el所指向的div中通过login标签来定义组件自可。

但是在vue.runtime.common.js中不能用这种方式来定义组件。
只能单独定义一个login.vue文件，在这个文件中有三个属性：
1.组件渲染的内容
2.组件的逻辑，其中包括export default{data（）{return msg：“123”}，methods：{}}
3.组件的风格
然后再将这个组件加载到该加载的位置：


这里就是说有一个问题：vue的版本和vue-loader的版本一定要一致。

过程中的Bug：
1.[fsevents@^1.2.2] optional install error: Package require os(darwin) not compatible with your platform(win32)
这个fsevents包是苹果系统的，在这里其实是已经安装好了，报错不用管它。
2.Module Error (from ./node_modules/_vue-loader@15.4.2@vue-loader/lib/index.js)

3.npm err! code elifecycle errno 1
这类错误多数是因为在index.js中有一些语句，是让webpack无法理解的，比如你未安装vue-loader包，却在rules中去使用这类加载器，这就会容易出这个错误。