前言

最近的项目中，因为技术发展的需要，新项目采用了新的技术栈。下面将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

这样我们搭建项目就完成了。