安装 npm i vue -S ，  在html页面中放一个容器绑定到el上。

修改webpack.config.js ， 在与entry , output节点平级加上 resolve 节点。

  resolve : { alias : { //配置vue被导入时别名的指向 'vue$':'vue/dist/vue.js' } } 

 

webpack支持vue单文件。

安装 loader  => cnpm i vue-loader vue-template-compiler -D

踩坑注意点： 如果安装vue-loader版本高于15.0 需要在webpack.config.js配置插件

const vueLoaderPlugin = require('vue-loader/lib/plugin') module.exports = {        plugins : [        new vueLoaderPlugin()    ]  }

-------------------------------

main.js文件 ， login.vue 文件内容跟vue的组件一样，只是拆分出来放单独文件里。

import $ from 'jquery'import Vue from 'vue'// import Vue from 'vue/dist/vue'// 导入login组件，webpack无法打包vue文件，需要安装 cnpm i vue-loader vue-template-compiler -Dimport login from './components/login.vue'$(function(){       var vm = new Vue({        el : '#app',        data : {            msg : '111123'        },        // render : function(createElements){
            //     return createElements(login)        // }        // render 简写        render : c => c(login)        // components : { //components方式不适用于vue单文件,在vue的run-time模式下会报错，不建议使用        //     login : login        // }    })})

 

export default 和 export  

login.vue