webpack中导入vue

1创建webpack项目，安装Vue的包

基于之前的webpack项目，新建一个webpack+vue文件夹，将之前的webpack全部复制下来，删除里面的node_modules，src目录下只留下main.js和index.html
npm i生成新的node_modules包
cnpm i vue -S

2在main.js中，导入vue模块

import Vue from 'vue’
问题：在这个里面导入的是Vue构造函数，功能不完整，只提供了vue.runtime-only.js的方式，并没有提供像网页中那样的使用方式
解决：

• 找项目根目录中的node_modules–>vue–>package.json–>查找main属性–>改为：vue.js
• 使用 import Vue from '…/node_modules/vue/dist/vue.js’
• 使用import Vue from ‘vue’ 在webpack.config.js中加
  

3这里使用第二种导入vue模块方式

import Vue from '../node_modules/vue/dist/vue.js'
import login from './login.vue'

3定义一个.vue结尾的组件

• 在src下创建一个login.vue文件
  
• main.js中导入import login from './login.vue’

4安装loader

• 由于在webpack中，推荐使用.vue这个组件模板文件定义组件，所以需要安装能解析这种文件的loader
  cnpm i vue-loader vue-template-complier -D
• 在配置文件中新增
  {test:/.vue$/,use:‘vue-loader’}

5main.js中创建vm的实例

import Vue from '../node_modules/vue/dist/vue.js'
import login from './login.vue'
var vm=new Vue({
    el:'#app',
    render:c=>c(login)
})

6配置文件添加vueloaderplugin

let VueLoaderPlugin=require('vue-loader/lib/plugin')
plugins:[
    new VueLoaderPlugin()
 ],

7npm run dev