开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第1天，点击查看活动详情

前言

之前一直使用angular开发，最近看vue挺好的，而且之前做app的时候接触了uniapp，因为uniapp是基于vue的，所以打算系统地学习一下vue3。

一、Vue3简介

• 2020年9月18日，Vue.js发布3.0版本，代号：One Piece（海贼王）
• 耗时2年多，2600+次提交，30+个RFC，600+次PR，99位贡献者
• github上的tags地址：github.com/vuejs/vue-n…
• vue3中文网：www.javascriptc.com/vue3js/

二、优势

• 运行速度快，打包大小、运行内存变小
• 源码升级
• 可以更好地支持TypeScript
• 增加了一些新的特性，比如组合API、新的内置组件（Fragment、Teleport、Suspense）、其它改变（新的生命周期钩子、data选项应始终被声明为一个函数、移除keyCode支持作为v-on的修饰符）

三、环境准备

• 安装Node.js：nodejs.cn/
• 安装VScode：code.visualstudio.com/Download
• 安装Git：git-scm.com/downloads
• 全局安装或更新vue：npm install -g @vue/cli

四、工程创建方法

创建vue3常用以下三种方式

• 使用vue-cli创建
• 使用Vite直接创建——最快速创建
• 使用vue3官方推荐创建方式

五、Vite是什么

Vite是vue的作者尤雨溪在开发Vue3.0的时候开发的一个web开发构建工具。
官网：www.vitejs.net/

与Webpack相比，Vite优势如下：

• Vite开发服务器启动速度更快。webpack先打包再启动服务器，而Vite在启动服务器的时候不需要打包，也就相当于不需要分析模块的依赖、不需要编译，所以启动速度非常快。
• Vite利用浏览器本身支持ES Module，会自动向以来的Module发出请求的特点，将开发环境下的模块文件，作为浏览器要执行的文件，而不需要像webpack那样进行打包合并。
• Vite热更新更快。在 HMR 方面，当改动了一个模块后，Webpack需要把该模块的相关依赖模块全部编译一次，而Vite仅需让浏览器重新请求该模块即可，效率更高。
• Vite使用esbuild(Go 编写) 预构建依赖，比 webpack 的 nodejs，快 10-100 倍。
  

有优势当然也有劣势，劣势如下：

• 加载器、插件不够丰富
• 打包到生产环境的时候，Vite使用传统的rollup进行打包
• 项目的浏览器需要要支持ES Module，而且不能失败CommonJs语法

结束语

需要了解的都了解完了，环境也准备好了，下一篇就开启我们的项目搭建之旅吧~~~