webpack配置Vue

最新推荐文章于 2024-05-16 09:34:51 发布

左右.

最新推荐文章于 2024-05-16 09:34:51 发布

阅读量110

点赞数

分类专栏： webpack vue 文章标签： vue webpack

本文链接：https://blog.csdn.net/qq_43642367/article/details/118304089

版权

webpack 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

vue

2 篇文章 0 订阅

订阅专栏

1. 安装vue-->npm install vue --save（因为不是开发时依赖，所以取消-dev）

2. 使用vue进行开发

// 在node_modules中找到使用npm install -save vue建的包并导入
import Vue from 'vue';
new Vue({
    el:'#app',
    data:{
        message:'Hello,webpack'
    },
});

3. 在页面上进行挂载

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

问题：vue在构建最终挂载版本时，构建了两类版本

1.runtime-only（代码中不能有任何的template）；

2.runtime-compiler （代码中可以存在template，因为有compiler可以用于编译template）

解决：在webpack中配置

resolve:{
        // alias-别名
        alias:{
            "vue$":'vue/dist/vue.js'
        }
    }

4. 安装vue-loader和vue-template-compiler-->npm install --save-dev vue-loader@ vue-template-compiler@

注意：vue-template-compiler与vue的版本需要一致

vue-loader的版本如果>14可能会出现配置错误的问题

5. 在webpack.config.js中配置

{
   test:/\.vue$/,
   use:['vue-loader']
}

6. 在src包中建vue包-App.vue-Cpn.vue（vscode可能需要安装扩展）
因此template和脚本内容以及样式代码都可以写在vue中，以下为练习中的App.vue和Cpn.vue代码

<template>
    <div>
        <h2 class="title">{{message}}</h2>
        <button @cilck='add'>按钮</button>
        <h2>{{name}}</h2>
        <Cpn/>s
    </div>
</template>
<script>
import Cpn from './Cpn.vue';
export default {
    name:'App',
    components:{
        Cpn
    },
     data(){
        return {
            message:'Hello,webpack',
            name:'GoodBai'
        }
    },
    methods:{
        add(){
            
        }
    }
}
</script>
<style scoped>
    .title{
        color:rgb(255, 47, 47)
    }
</style>

<template>
    <div>
        <h2>我是Cpn组件的标题</h2>
        <p>我是Cpn组件的内容</p>
        <h2>{{message}}</h2>
    </div>
</template>
<script>
export default {
    name:'Cpn',
    data(){
        return {
            message:'Cpn组件的name'
        }
    }
}
</script>

注意：需要在App.vue的脚本文件中引入Cpn.vue，并且需要在其components中注册Cpn组件

import Cpn from './Cpn.vue';

左右.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack配置Vue

1. 安装vue-->npm install vue--save（因为不是开发时依赖，所以取消-dev）2. 使用vue进行开发// 在node_modules中找到使用npm install -save vue建的包并导入import Vue from 'vue';new Vue({ el:'#app', data:{ message:'Hello,webpack' },});3. 在页面上进行挂载<body> .
复制链接

扫一扫