為什么要寫這個如此簡單的文章呢？
因為用的時候找了半個小時的方法才找到正確的使用方式，而且百度的時候沒有，所以寫出來，如果有人跟我一樣的話最起碼寫起來沒那么難了
不同構建版本
Vue3中不再構建UMD模塊化的方式，因為UMD會讓代碼有更多的冗余，它要支持多種模塊化的方式。Vue3中將CJS、ESModule和自執行函數的方式分別打包到了不同的文件中。在packages/vue中有Vue3的不同構建版本。
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體積更?。?/strong>
- vue.esm-bundler.js
- bue.runtime.esm-bundler.js
接下來我使用global為例子，
上代碼
<!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">
<link rel="stylesheet" href="css/index.css">
<script src="https://lib.baomitu.com/vue/3.0.2/vue.global.js"></script>
<title>單頁面使用Vue</title>
</head>
<body>
<div id="app">{{ state }}</div>
</body>
<script>
const { createApp, reactive, toRefs } = Vue;
const data = reactive({
state: 12
})
const app = createApp({
setup() {
return {
...toRefs(data)
}
}
});
app.mount("#app");
</script>
</html>
