webpack中如何使用vue

Posted 2020-11-24 大力出奇迹呀

1、安装vue包 

npm i vue -S

 

2、默认webpack无法打包.Vue文件，需要安装相关的loader

npm i vue-loader vue-template-compiler -D

 

3、在webpack.config.js文件中

const VueLoaderPlugin = require(‘vue-loader/lib/plugin‘);
module.exports={
    // 手动指定入口和出口
    entry:path.join(__dirname,‘./src/main.js‘),//入口，表示要是用webpack打包的文件
    output:{
        path:path.join(__dirname,‘./dist‘),//指定打包文件的输出目录
        filename:‘bundle.js‘//输出文件的名称
    },
    plugins:[
        new VueLoaderPlugin()
    ],
    module:{//用于匹配第三方模块加载器
        rules:[
            {test:/.vue$/,use:‘vue-loader‘}
        ]
    },
    resolve:{
        alias:{//修改vue被导入时候包的路径
            "vue$":"vue/dist/vue.js"
        }
    }

 

4、新建后缀为vue的文件，例如建login.vue

<template>
    <div>
        <h1>这是登录组件</h1>
    </div>
</template>

<script>
</script>

<style>

</style>

 

5、在main.js中

import Vue from ‘vue‘
import login from ‘./login.vue‘

var vm = new Vue({
    el:‘#app‘,
    data:{
        msg:‘‘
    },
    // render:function(createElement){
    //     return createElement(login)
    // }
    //简写
    render:c=>c(login)
})

6、在index.html中使用login组件，npm运行即可