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

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

__EOF__

本文作者：沧澜野兽迈特丶凯
本文链接：https://www.cnblogs.com/sxdjy/p/14474401.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！
posted @   玛卡巴鉲  阅读(4053)  评论(0)  编辑  收藏  举报
编辑推荐：
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
阅读排行：
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
点击右上角即可分享
微信分享提示