vue单页面html,单独html使用Vue3 || 单页面使用Vue3

为什么要写这个如此简单的文章呢？

因为用的时候找了半个小时的方法才找到正确的使用方式，而且百度的时候没有，所以写出来，如果有人跟我一样的话最起码写起来没那么难了

不同构建版本

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，浏览器的原生模块化方式，可以直接通过的方式来导入模块)

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

接下来我使用global为例子，

上代码

单页面使用Vue

{{ state }}

const { createApp, reactive, toRefs } = Vue;

const data = reactive({

state: 12

})

const app = createApp({

setup() {

return {

...toRefs(data)

}

}

});

app.mount("#app");