webpack中如何使用vue
2021-05-12 18:28
标签：ports var src entry 指定 htm log 组件 plugin 1、安装vue包 2、默认webpack无法打包.Vue文件，需要安装相关的loader 3、在webpack.config.js文件中 4、新建后缀为vue的文件，例如建login.vue 5、在main.js中 6、在index.html中使用login组件，npm运行即可 webpack中如何使用vue 标签：ports var src entry 指定 htm log 组件 plugin 原文地址：https://www.cnblogs.com/lijianshen/p/12005210.htmlnpm i vue -S
npm i vue-loader vue-template-compiler -D
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"
}
}
这是登录组件
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)
})