vue3项目搭建

一：介绍

        Vue3 是从2018年开始研发，经过大概一年半的不断重构与试运行，最终发布于2020年9月18日。相比于 Vue2 其具有更小，更快，支持性更高等功能。因此学号 Vue3 是非常有必要的，同时 Vue2 也将会与2023年12月31日起正式停止维护。

1、性能上比 vue2 快乐1.2~2倍

• 在 Vue3 中，优化了 diff 算法，增加了静态标记PatchFlag。
• render阶段有静态提升，对于不参与更新的 vnode ，只会被创建一次。
• 事件缓存监听，减少创建组件实例的开销。

2、按需编译，体积比 vue2 更小。

        在vue3中，可以如下面这样引用vue的功能函数，如果你的项目没有用到watch，那编译时就会把tree shaking掉。

import { computed, watch, nextTick } from "vue";

利用的就是 ES6 模块系统import/export。

3、对 TS 采取了默认支持

        由于 vue2 是 Option API 风格。而 options 是个简单对象，ts 却是一种类型系统、面向对象的语法。因此 vue2 不适用TS。

        在vue3中，量身打造了defineComponent函数，使组件在ts下，更好的利用参数类型推断 。Composition API 代码风格中，比较有代表性的api就是 ref 和 reactive，也很好的支持了类型声明。

4、其余优点

• 使用 Vite 做开发构建工具，不仅项目的启动更快，同时开始时热重载也快。
• 使用Proxy进行数据监听，消除了Object.defineProperty现有的限制
• 根节点可以有多个等

        当然 Vue3 的不仅仅是这些，还有很多优点是 Vue2 所不具备的。因此在未来很长一段时间，Vue3 将会逐渐替换 Vue2 开发，因此掌握3是必备的，同时也要掌握 2=>3 过度的方法。

二：搭建Vue3项目

1、开发环境的安装

• （1）打开node官网:https://nodejs.org/zh-cn/
• 下载node并安装（安装vue3建议node在10.0版本以上）。
• 在终端中输入node -v可显示node版本
• （2）安装vue-cli脚手架
• 如果之前安装了2.0的脚手架，要先卸载掉，输入：npm uninstall vue-cli -g 进行全局卸载
• 然后重新安装：npm install @vue/cli -g

        当然，为了方便管理node版本，建议各位小伙伴去安装一个nvm，这样使用别人项目的时候可以减少很多莫名其妙的bug，这里是我电脑所安装的两个版本的node。

2、项目搭建的两种方式

1）使用vite搭建

在你想要创建项目的地方使用shift+鼠标右键，点击“在此处打开PowerShell窗口”

npm init vite@latest

        使用 npm init vite@latest 初始化，如果提示要输入 y 那么输入 y 就会自动安装 vite 了。然后会看到以下界面，提示你输入项目名字。这里我项目名字是Vue3_test。

        开发选择 Vue 按回车，现在 Vue 已经默认是3.0版本了。所以直接选择安装，就是3.0。

        这里我们选择TypeScript，在 vue3 开发中，使用这个开发会更可靠。

        出现该界面，则表示安装成功，我们可以依次使用他说提示的这三行代码，来启动项目

  cd Vue3_test
  npm install
  npm run dev

2）使用npm init vue@latest

        使用npm init vue@latest搭建vue3项目其实和第一种方式差不多，只是少了安装vite这一步。因此不再进行分布选择，下面这个是选择后的最终结果。

        在这里我们可以看到，其安装的内容更加详细，相比于使用vite进行安装。该命令是专门安装vue项目所使用的。可以根据我们的需求专门去进行配置。比如当你想要去做TDD开发的时候我们就可以选择安装Cypress等