vue 3.0 正式版来了

Vuejs 于2020年9月19日凌晨发布了代号为One Piece的 3.0 版本。以下简称Vue3
跟着官网文档,我们一起来体验下新版的魅力。
Vue3官方文档地址:https://v3.vuejs.org/guide/migration/introduction.html#overview

Vue Devtools

首先是测试工具
谷歌插件(需要翻墙): https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg
火狐插件: https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/
electron桌面应用插件: https://github.com/vuejs/vue-devtools/blob/dev/packages/shell-electron/README.md

CDN

出于原型制作或学习目的,您可以将最新版本与以下各项配合使用:

<script src="https://unpkg.com/vue@next"></script>

NPM

使用Vue构建大型应用程序时,建议使用NPM安装方法。它与WebpackRollup等模块捆绑器很好地配对。Vue还提供了用于创作单一文件组件的随附工具。

npm install vue@next

CLI

ue提供了一个官方CLI用于快速搭建单页应用。
对于Vue 3,您应该使用Vue CLI v4.5,该版本在上npm提供@vue/cli@next。要升级,您需要在@vue/cli全局范围内重新安装最新版本:

yarn global add @vue/cli@next
# OR
npm install -g @vue/cli@next

然后在Vue项目中运行

vue upgrade --next

不同版本的说明

dist/NPM软件包的目录中,您会找到许多不同的Vue.js版本。

  • 要<script src="...">在浏览器中直接使用,请公开Vue全局。

  • 浏览器内模板编译:
    vue.global.js 是包含编译器和运行时的“完整”构建,因此它支持即时编译模板。
    vue.runtime.global.js 仅包含运行时,并要求在构建步骤中预编译模板。

  • 内联所有Vue核心内部软件包-即,它是单个文件,不依赖于其他文件。这意味着您必须从该文件导入所有内容,并且仅为了确保获得相同的代码实例而导入该文件。

  • 包含硬编码的prod / dev分支,并且prod构建已预先缩小。使用这些*.prod.js文件进行生产。

通过脚手架(cli)安装项目

全局安装脚手架

npm install -g @vue/cli

查看脚手架版本是否在4.5以上(含4.5)

vue --version

创建项目

vue create hello-vue3

此时终端显示如下图


image.png

选择第二项 Vue 3 Preview ,等待安装完成。

// 切换目录
cd hello-vue3

// 运行项目
npm run serve
#or
yarn serve

到此,恭喜你迈入了 Vue 3.0的时代!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容