Vue结合webpack使用

Vue结合webpack使用

在Vue中使用webpack，首先我们需要先安装Vue，然后试试我们在前面使用的语法方式行不行

1. 首先，引入Vue模块

cnpm i vue -S // 直接安装到生产环境就行

2. 然后，在main.js中加载这个模块，前提是babel已经配置好

********main.js*************

console.log(123);
import Vue from 'vue';

var vm = new Vue({
    el: '#app',
    data: {
        msg: 'hello world'
    }
})

3. 然后，命令行运行

[Vue warn]: You are using the runtime-only build of Vue where the template compiler 
is not available. Either pre-compile the templates into render functions, or use the 
compiler-included build.
(found in <Root>)

报错了， what the fuck😱，大概意思是我们的包不全，这时我们看一下vue文件夹中package.json文件中的main属性

image.png

这下就明白了，这不是我们要引的vue.js，这就好办了，我们可以把main指向我们的vue.js，我们还可以用webpack来设置，这里就需要用到一个新的属性，resolve属性，它是一个对象，它内部有一个alias属性，是一别名的意思，它也是一个对象，里面的键可以是一个正则表达式，值是路径

resolve: {
        alias: {
            "vue$": "vue/dist/vue.js"
        }
    }

这样，就可以了😜