1.vue3的简介

2020年9月18日，Vue.js发布vue3.0，代号：One Piece(海贼王)
耗时两年多,2600+次提交、30+RFC、600+次PR、99位贡献者
github上的tags地址:github.com/vuejs/vue-n…

2.Vue3带来了什么

1.性能的提升

打包大小减少41%
初次渲染快55%，更新渲染快133%
内存减少54%

2.源码的升级

使用 Proxy代替defineProperty实现响应式
重写虚拟DOM的实现和Tree-Shaaking

3.拥抱TypeScript

Vue3可以更好的支持TypeScript
4.新的特性

Composltion API(组合API)
- setup配置
- ref和reactive
- watch与watchEffect
- provide与inject
新的内置组件
- Fragment
- Teleport
- Suspense
其他改变
- 新的生命周期钩子
- data 选项应始终被声明为一个函数
- 移除KeyCode支持作为v-on的修饰符

3.如何安装Vue3

安装Vue3有两种方法:

vue-cli
vue ui

一.使用vue-cli 安装vue3
使用vue-cli会出现几个对话询问，可以帮助我们创建一个Vue3项目
首先使用vue create Myapp 命令行创建一个Vue3项目，输入完成后会有一个询问。

Your connection to the default yarn registry seems to be slow.
   Use https://registry.npm.taobao.org for faster installation? (Y/n)

这个意思是，建议我们使用淘宝镜像来创建，输入Y我们就可以使用淘宝镜像来安装，如果我们已经配置过淘宝镜像则不会有这个选项。

当我们输入Y后，会出现第3个Vue版本让我们选择安装

? Please pick a preset: (Use arrow keys)            //请选择预选项
> Default ([Vue 2] babel, eslint)                   //使用Vue2默认模板进行创建
  Default (Vue 3 Preview) ([Vue 3] babel, eslint)   //使用Vue3默认模板进行创建
  Manually select features

这里面因为我们需要创建Vue3的项目，所以有有两个选项供我们选择一个是默认版本的Vue3项目，另一个选项是我们要自己手动配置Vue3的一些组装件。一般我们会选择第3个，自己手动配置Vue3.

? Check the features needed for your project: (Press  to select, to toggle all, to invert selection)
>(*) Choose Vue version
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
 ( ) CSS Pre-processors             //CSS预处理器
 (*) Linter / Formatter             //格式化工具
 ( ) Unit Testing                   //单元测试
 ( ) E2E Testing                    //E2E测试

这里面我们就可以选择自己需要的选项了，这里就不做演示了。这时候我们按一个回车，就可以进入下一个选择环节。

? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
   2.x
 > 3.x (Preview)

这里面我们要选择3.x的版本，点击回车会提示我们是否需要使用class-style，这里面我们选择是。

Use class-style component syntax?

然后会出现下面的选项，意思是否使用TypeScript和Babel的形式编译 JSX.这里我们也选择n

Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n)

然后会出现ESLint的一些配置,这里我们选择第一项，默认就好，因为下面这些规则并不是这个教程的重点。

? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
 ESLint + Airbnb config
 ESLint + Standard config
 ESLint + Prettier
 TSLint (deprecated)

回车后会让你选择增加lint的特性功能。

? Pick additional lint features: (Press  to select, to toggle all, to invert selection)
>(*) Lint on save         //保存的时候进行Lint
 ( ) Lint and fix on commit   //需要帮你进行fix（修理），这项我们不进行选择

回车后让你选择这些配置文件时单独存放，还是直接存放在package.json文件里。这里选择放在单独的文件里。

? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files
  In package.json

最后一个问题，是问你需不需要把这些配置保存下来，下次好直接进行使用。我这里选择不用(n)。淡然你可以自行选择

Save this as a preset for future projects? (y/N)

如果出现下面的信息，说明我们已经安装完成了。

Done in 10.33s.

 $ cd vue3-1
 $ yarn serve

这个时候，我们就可以输入 npm run serve开启项目的预览了，这个时候会给出两个地址，我们都可以访问到现在的项目。

App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.0.118:8080/

  Note that the development build is not optimized.
  To create a production build, run yarn build.

二.使用vue ui 安装vue3
这里我们需要打开命令提示符输入：vue ui。然后我们会进入一个页面

这里我们点击红框选中的选项