webpack_vue -- webpack使用vue文件

第一步：装包

cnmp i vue-loader -S
cnmp i vue-template-compiler -D

第二步：创建vue文件

<template>
  <div>
    <h1>vue创建的</h1>
  </div>
</template>
<script>

</script>
<style>

</style>

第三步：main.js里面添加包

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

// var login = {
//   template: '<h1>组件创建的</h1>'
// }
var vm = new Vue({
  el:'#app',
  data: {
    msg: '666'
  },
  components:{
    login
  }

})

第四步：webpack.config.js操作

4.1 导入

const VueLoaderPlugin = require('vue-loader/lib/plugin');

4.2插件节点

plugins: [ 
    new VueLoaderPlugin(),
  ],

4.3 匹配规则

{ test: /\.vue$/, use: 'vue-loader' }