vue 3.0 cdn引入新体验 Vue Devtools，标记

2024-04-05 13:33•linux•阅读 1803

x按介绍两个cdn网址：

1.https://cdn.baomitu.com/

2.https://www.jsdelivr.com/

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 >

<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 >
    <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