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>)
image.png报错了, what the fuck😱,大概意思是我们的包不全,这时我们看一下vue文件夹中package.json文件中的main属性
这下就明白了,这不是我们要引的vue.js,这就好办了,我们可以把main指向我们的vue.js,我们还可以用webpack来设置,这里就需要用到一个新的属性,resolve属性,它是一个对象,它内部有一个alias属性,是一别名的意思,它也是一个对象,里面的键可以是一个正则表达式,值是路径
resolve: {
alias: {
"vue$": "vue/dist/vue.js"
}
}
这样,就可以了😜
网友评论