八、webpack中vue的引入

#1.安装vue：npm install vue --save
然后在min.js文件中加以引入
html文件中写个div标签id等于app
min.js

// 使用vue进行开发
import Vue from 'vue'
const App = {
    template: `
    <div>
        <h2>{{message}}</h2>
        <button @click="btnClick">按钮</button>
        <h2>{{name}}</h2>
    </div>
    `,
    data(){
        return {
            message:'hellow webpack',
            name:'coderwhy'
        }
    },
    methods:{
        btnClick(){
            alert('弹出！')
        }
    }
}
new Vue({
    el: "#app",
    template:'<App/>',
    components:{
        App
    }

但是这样的文件，打包以后并不能运行，因为打包后运行的vue版本不支持template，所以需要在webpack.config.js中配置指定的版本路径，这样打包后的index.html还是可以打开的

const path = require('path')
module.exports = {
    entry: './src/min.js',   //入口
    output: {
        path: path.resolve(__dirname, 'dist'),//动态获取路径
        filename: 'bundle.js',
        publicPath: 'dist/' //打包后会在任何url上面拼接上dist/路径
    },   //出口
    module: {   //配置loader
        rules: [    //规则
     
        ]
    },
    resolve:{
        // 当import Vue from 'vue'的时候，会查看vue有没有指向一个具体的文件夹
        // 这里暂时定义为vue的这个版本支持template的版本
        // 因为打包以后就会使用不支持template的版本了
        alias:{
            'vue$':'vue/dist/vue.esm.js'
        }
    }
}