Vue 3将在2022年2月7日成为新的默认版本!
2月7日正好是春节后第一天,希望你可以耐心读完本文,确保自己是否需要在版本切换前做好准备,这样可以避免假期归来缺被当头一棒。
距离Vue.js 3.0 "One Piece"的发布已经快两年的时间,终于迎来了“备胎转正”的时刻。
除了Vue的核心库,Vue框架也进行了诸多改动:
- 基于 Vite 的极速构建工具链
- <script setup> 带来的开发体验更丝滑的组合式 API 语法
- Volar 提供的单文件组件 TypeScript IDE 支持
- vue-tsc 提供的针对单文件组件的命令行类型检查和生成
- Pinia 提供的更简洁的状态管理
- 新的开发者工具扩展,同时支持 Vue 2/Vue 3,并且提供了强大的插件系统,允许开发者进行功能定制
另外全新的文档也将一起上线,目前还没有中文版本。
https://staging.vuejs.org/
切换细节
npm包
- npm install vue 将默认安装 Vue 3。
- 所有其他官方 npm 包的 latest 发布标签将指向其 Vue 3 的兼容版本,包括 vue-router、vuex、vue-loader 和 @vue/test-utils。
文档
下面现在指向Vue 2的文档站点都会切换到Vue 3:
- http://vuejs.org
- http://router.vuejs.org
- http://vuex.vuejs.org
- http://vue-test-utils.vuejs.org (将迁移到 http://test-utils.vuejs.org)
- http://template-explorer.vuejs.org
开发者工具扩展
新的开发者工具目前也已经发到 Chrome Web Store 的测试频道。
https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg
迁移关注
CDN
如果页面通过CDN方式使用Vue 2,而没有指定版本,需要改为通过@2指定:
- <script src="https://unpkg.com/vue"></script>
+ <script src="https://unpkg.com/vue@2"></script>
- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
+ <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.min.js"></script>
以后使用Vue 3或者类似情况,一定要在生产环境指定版本范围,以免将来再次遇到这个情况。
npm
如果使用latest 标签或 * 安装npm的库
如果在npm使用了latest 标签或 *安装Vue,请改为明确的版本号:
{
"dependencies": {
- "vue": "latest",
+ "vue": "^2.6.14",
- "vue-router": "latest",
+ "vue-router": "^3.5.3",
- "vuex": "latest"
+ "vuex": "^3.6.2"
},
"devDependencies": {
- "vue-loader": "latest",
+ "vue-loader": "^15.9.8",
- "@vue/test-utils": "latest"
+ "@vue/test-utils": "^1.3.0"
}
}