美文网首页
Vue结合webpack使用

Vue结合webpack使用

作者: 最爱喝龙井 | 来源:发表于2019-08-26 10:53 被阅读0次

    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"
            }
        }
    

    这样,就可以了😜

    相关文章

      网友评论

          本文标题:Vue结合webpack使用

          本文链接:https://www.haomeiwen.com/subject/lyxrectx.html