前言
最近的项目中，因为技术发展的需要，新项目采用了新的技术栈。下面将Vite2 + Vue3技术栈，搭建开发项目做下记录。
Vue3： Vue.js是一套构建用户界面的渐进式框架。Vue 只关注视图层， 采用自底向上增量开发的设计。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
Vue3官网地址： https://v3.cn.vuejs.org/
vite： vite2自2月17号发布。Vite是一种全新的前端构建工具。可以把它理解为一个开箱即用的开发服务器 + 打包工具的组合，但是更轻更快。Vite 利用浏览器原生的 ES 模块支持和用编译到原生的语言开发的工具（如 esbuild）来提供一个快速且现代的开发体验。
vite2官网地址：https://cn.vitejs.dev/
读者可可能好奇，在项目里没有使用vue-cli脚手架做构建工具，将Vite与VueCLI做一下对比：
- Vite在开发模式下不需要打包可以直接运行，使用的是ES6的模块化加载规则；
- VueCLI 基于webpack来搭建的项目，开发模式下必须对项目打包才可以运行；
- Vite基于缓存的热更新；
- VueCLI基于webpack的热更新；
前置条件：
基础环境配置：
- node
- vite版本
- vue3
- 集成路由
- 集成vuex
- 集成axios
- elememt-plus
- 请求代理等配置
项目搭建
搭建一个 Vite 项目，这里使用Yarn依赖管理工具进行创建项目。
在terminal终端执行以下命令：
yarn create @vitejs/app
image.png
依次配置Project name、Select a template
Project name: vite-vue-project
接着会有一下几种模版供你选择：
image.png
这里选择：vue
Select a template: vue
或者直接使用命令创建对应的模板工程
yarn init @vitejs/app my-vue-app --template vue-ts
这里要是用Vue开发项目所以我们选择vue-这个模板。一顿操作之后，会提示你键入以下命令，依次填入即可。
image.png
cd vite-vue-project
yarn
yarn dev
这样我们搭建项目就完成了。
