vue 3.0 cdn引入新体验 Vue Devtools(标记)
x按介绍两个cdn网址:
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