webpack中vue组件的识别与应用

webpack 打包无法处理.vue 后缀的文件，所以需要先下载

npm i vue-loader vue-template-compiler -d

如果然后安装的 vue-loader 是 15.x.x 以上的需要配置 webpack.config.js

const VueloaderPlugin=require('vue-loader/lib/plugin')
new VueloaderPlugin()
{test: /\.vue$/, use: 'vue-loader'}

最后在 main.js 中引入所需的.vue 文件，就可以打包执行了

import Vue from 'vue'
import login from './login.vue' //引入的vue组件

var vm = new Vue({
  el: '#app',
  data: {
    msg: 123
  },
  render(creatEle) {
    //调用render进行页面的渲染
    return creatEle(login)
  }
})

---