极客观点
项目管理
HarmonyOS
我用自己搭建webpack来打包vue，引入打包好的vue的时候，挂载元素消失了
搭建自己的webpack打包环境主要是想学习vue
相关代码
1.这个是入口文件
import Vue from 'vue'
import Child from './app'
new Vue({
el: '#app',
data: {
msg: 'this is msg'
},
render: (h) => h(Child)
})2.这个是import引入的app文件内容
import Vue from "vue";
var Child = Vue.component('Child', {
template: `<div><span>hello world</span></div>>`
});
export default Child;3.这个是index.html文件
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
{{msg}}
</div>
<script src="./dist/main.js"></script>
</body>
</html>4.这个是webpack配置文件、
module.exports = {
entry: {main: './1.js'},
output: {
path: __dirname + '/dist',
filename: '[name].js'
},
module: {
rules: [
{
test: "/\.js$/",
exclude: "/node_modules/",
loader: "babel-loader"
}
]
},
resolve: {
alias: {
'vue':'vue/dist/vue.common.js'
}
}
}下面是浏览器元素节点
<html lang="en"><head>
<meta charset="UTF-8">
<title>Document</title></head>
<body>
<div><span>hello world</span></div>
<script src="./dist/main.js"></script>
</body>
</html>
文档链接