when I built my own webpack to package the vue, and introduced the packaged vue, the mount element disappeared
the main reason for setting up your own webpack packaging environment is to learn vue
related codes
1. This is the entry file
import Vue from "vue"
import Child from "./app"
new Vue({
el: "-sharpapp",
data: {
msg: "this is msg"
},
render: (h) => h(Child)
})2. This is the content of the app file introduced by import
import Vue from "vue";
var Child = Vue.component("Child", {
template: `<div><span>hello world</span></div>>`
});
export default Child;3. This is the index.html file
<!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. This is the webpack configuration file,
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"
}
}
}the following is the browser element node
<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>