vue学习之webpack配置vue（2）

最新推荐文章于 2024-07-01 10:45:39 发布

以后灬会緈福

最新推荐文章于 2024-07-01 10:45:39 发布

阅读量145

点赞数

分类专栏： vue学习

本文链接：https://blog.csdn.net/u013164983/article/details/108436294

版权

vue学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一般情况下我们不希望将index.html内的 id = app 挂载点写成如下形式，会导致此处频繁进行修改

<body>

    <div id="app">
        <h2>{{message}}</h2>
        <button @click = 'itemClick'>确定</button>
    </div>
    
    <script src="./dist/bundle.js" ></script>

</body>

优化：我们可以在main.js中通过模板的形式定义div中要显示的内容

因此我们在main.js中可以直接在new App()的时候定义一个template，同时将index.html的div标签固定不变

new Vue({
    el: "#app",
    template:` 
    <div>
        <h2>{{message}}</h2>
        <button @click = 'itemClick'>确定</button>
    </div>`,
    components:{
        App
    }
})

<body>

    <div id="app"></div>
    
    <script src="./dist/bundle.js" ></script>

</body>

这样，每次编译后template中的内容便会去替换<div id="app"><div> (包括改div变迁都会被替换)。

但是这样同样没有解决频繁替换的问题。

再进行抽取，我们在main.js中，可以通过子组件的形式定义一个App，将其通过组件的形式引入进来，降低耦合度。

const App = {
    template:`
    <div>
        <h2>{{message}}</h2>
        <button @click = 'itemClick'>确定</button>
    </div>
    `,
    data(){
        return {
            message:'hello webpack'
        }
    },
    methods:{
        itemClick(){
            console.log('test');
            
        }
    }
} 


new Vue({
    el: "#app",
    template:'<App/>',
    components:{
        App
    }
})

再优化，可以将App对象封装在一个单独的app.js文件里，通过export default方法导入，通过import方法引入到mian.js中

//app.js

export default 
    {
        template:`
        <div>
            <h2>{{message}}</h2>
            <button @click = 'itemClick'>确定</button>
        </div>
        `,
        data(){
            return {
                message:'hello world'
            }
        },
        methods:{
            itemClick(){
                console.log('test');
                
            }
        }
    }

import App from './js/app.js'

再优化，为了能够使html，css, js代码分离，可以将app.js文件内容替换成App.vue文件内容，同样通过import方法引入

//App.vue

<template>
    <div>
        <h2 class="title">{{message}}</h2>
        <div class="title">你好</div>
        <button @click = 'itemClick'>确定</button>
    </div>
</template>
<script>
export default {
    name:"App",
   data() {
      return {
            message:'hello webpack'
      }
   },
   mounted() {
   },
   methods: {
        itemClick(){
            console.log('test');
        }
   }
}
</script>

<style scoped>
.title {
    color:green;
    font-size: 50px;
}
</style>

import App from './vue/App.vue'

但此时，对于.vue文件类型，系统不知道怎么解析，因此要安装vue-loader和vue-template-compiler

npm install --save-dev vue-loader vue-template-compiler

安装好后便可解析vue文件。

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

遇到的问题，安装好vue-loader且在webpack.conf.js中配置好后，编译出错

ERROR in ./src/vue/App.vue
Module Error (from ./node_modules/_vue-loader@15.9.3@vue-loader/lib/index.js):
vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.

解决方法参考：https://blog.csdn.net/nightwishh/article/details/92799408

我使用了第二种，第一种虽然内容可以显示出来，但是我在App.vue的style中定义的样式显示不出来。

关于import中简写的问题，可以在webpack.config.js 的resolve中添加配置extensions

resolve: {
      //此处的配置可以使得import时省略扩展名
      extensions:['.js','.vue','.json'],
      alias:{
        'vue$' : 'vue/dist/vue.esm.js'
      }
    }

以后灬会緈福

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录