vue 3.0 正式版来了

JavaScript027

vue 3.0 正式版来了,第1张

Vuejs 于2020年9月19日凌晨发布了代号为One Piece的 3.0 版本。以下简称Vue3

跟着官网文档,我们一起来体验下新版的魅力。

Vue3官方文档地址: https://v3.vuejs.org/guide/migration/introduction.html#overview

首先是测试工具

谷歌插件(需要翻墙): 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

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

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

ue提供了一个 官方CLI 用于快速搭建单页应用。

对于Vue 3,您应该使用Vue CLI v4.5,该版本在上npm提供@vue/cli@next。要升级,您需要在@vue/cli全局范围内重新安装最新版本:

然后在Vue项目中运行

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

全局安装脚手架

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

创建项目

此时终端显示如下图

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

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

项目目录不同

1、vue-cli3.o移除了config.文件夹。

2、多了vue.config.js文件。

3、新增了一个views文件夹。

4、删除了static新增了public文件夹。

5、index.html移动到public了。

配置项不同

1、vue-cli2.0的域名配置,分为开发环境和生产环境。

2、所以配置域名时,需要在config中的dev.env.js和。

3、prod.env.js中分别配置3.0 config.文件已经被移除。

4、但是多了。env.production和env.development文件。

5、除了文件位置,实际配置起来和2.没什么不同。

创建项目的方式不一样

1、vue-cli2.0,vue init webpack项目名。

2、vue-cli3.0 vue create项目名。