0
点赞
收藏
分享

微信扫一扫

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

搬砖的小木匠 2021-09-24 阅读 92
踩坑Vue

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

不同构建版本

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体积更小)

  • 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>
举报

相关推荐

[vue3] Axios 使用

vue3使用swiper

vue3使用vuex

vue3 使用vant

Vue3 使用教程

Vue3使用Pinia

Vue3的使用

Vue3基础使用

0 条评论