x按介紹兩個cdn網址：
Vue的各種版本介紹：
1. cjs（兩個版本都是完整版，包含編譯器）
- vue.cjs.js
- vue.cjs.prod.js（開發版，代碼進行了壓縮）
2. global（這四個版本都可以在瀏覽器中直接通過scripts標簽導入，導入之后會增加一個全局的Vue對象）
- vue.global.js（完整版，包含編譯器和運行時）
- vue.global.prod.js（完整版，包含編譯器和運行時，這是開發版本，代碼進行了壓縮）
- vue.runtime.global.js
- vue.runtime.global.prod.js
3. browser（四個版本都包含esm，瀏覽器的原生模塊化方式，可以直接通過<script type="module" />的方式來導入模塊）
- vue.esm-browser.js
- vue.esm-browser.prod.js
- vue.runtime.esm-browser.js
- vue.runtime.esm-browser.prod.js
4. bundler（這兩個版本沒有打包所有的代碼，只會打包使用的代碼，需要配合打包工具來使用，會讓Vue體積更小）
- vue.esm-bundler.js
- bue.runtime.esm-bundler.js
html文件中的使用：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <script src="https://lib.baomitu.com/vue/3.0.2/vue.global.js"></script> <title>單頁面使用Vue</title> </head> <body> <div id="app"> <span>{{ count }}</span> <button @click="add">+</button> <button @click="less">-</button> </div> </body> <script> const { createApp, reactive, toRefs, ref } = Vue; const data = reactive({ state: 12 }) const app = createApp({ setup() { const count = ref(0) const add = () => { count.value ++ } const less = () => { count.value -- } return { count, add, less, ...toRefs(data) } } }); app.mount("#app"); </script> </html>
使用Vue3.0其他新方式：
1.npm
# 最新穩定版
$ npm install vue@next
2.命令行工具（Vue-CLI）https://cli.vuejs.org/zh/guide/
// 全局安裝Vue-CLI yarn global add @vue/cli@next # OR npm install -g @vue/cli@next // 運行 vue upgrade --next
3.Vite（全新的web開發構建工具）https://github.com/vitejs/vite
// 快速構建Vue項目 // npm $ npm init vite-app <project-name> $ cd <project-name> $ npm install $ npm run dev // yarn $ yarn create vite-app <project-name> $ cd <project-name> $ yarn $ yarn dev
標記Vue Devtools
參考：https://www.jianshu.com/p/35d0e4b8e0cc