文档
-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 i http-server npx http-server -c-1
