文档
-https://cn.vuejs.org/guide/quick-start.html
使用全局构建版本
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="app">{{ message }}</div>
<script>const { createApp } = Vue
createApp({
data() {
return {
message: 'Hello Vue!'
}
}
}).mount('#app')</script>
使用 ES 模块构建版本
<script type="importmap">{
"imports": {
"vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
}
}</script>
<div id="app">{{ message }}</div>
<script type="module">import { createApp } from 'vue'
createApp({
data() {
return {
message: 'Hello Vue!'
}
}
}).mount('#app')</script>
使用 ES 模块拆分版
index.html
<!DOCTYPE html>
<html>
<head>
<title>Vue Example</title>
<script type="importmap">{
"imports": {
"vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
}
}</script>
<script type="module" src="/app.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>
app.js
// app.js
import { createApp } from "vue";
const app = createApp({
data() {
return {
count: 1,
};
},
template: `<button @click="handleClick">+{{ count }}</button>`,
methods: {
handleClick() {
this.count++;
},
},
created() {
console.log("created");
},
mounted() {
console.log("mounted");
},
});
app.mount("#app");
启动静态服务器
pnpm
