一个基于vite构建的vue3+pinia+ts+elementUI plus的初始化开箱即用的项目模版
前言
vue3如今已经成为默认版本了，相信大多数公司已经全面拥抱vue3了。
而Vite作为新一代的新型前端构建工具，使用它能够显著提升前端开发体验。
什么是Vite
这里借用官方的介绍：
一个开发服务器，它基于 原生 ES 模块 提供了 丰富的内建功能，如速度快到惊人的 模块热更新（HMR）。
一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。
Vite的优势
开箱即用
具备插件API和JS API
高度的可扩展性
热更新
高效，快速
搭建第一个 Vite 项目
兼容性注意
Vite 需要 Node.js 版本 >= 12.0.0。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。
NPM:
Yarn:
创建Vite项目的命令有很多，大同小异，但是我推荐使用 yarn的方式，谁用谁知道，命令简洁，速度更快，当然也有其它的方式，可以看一下官网的推荐方式，这个选择自己喜欢的就好了
初始化好之后的目录：
执行：npm i或者yarn安装依赖，再执行 npm run dev 或者 yarn dev 打开浏览器输入http://localhost:3000
即可看到
这样一个vue3+vite+ts的项目初始化就完成了
运行项目不会默认打开浏览器,需要在package.json里面 ,在vite 后面加上--open
安装vue全家桶
Pinia状态管理
由于 vuex 4 对 typescript 的支持让人感到难过，所以状态管理弃用了 vuex 而采取了 pinia. pinia 的作者是 Vue 核心团队成员
尤大好像说 pinia 可能会代替 vuex，所以请放心使用。
Pinia 与 Vuex 的区别：
id 是必要的，它将所使用 store 连接到 devtools。
创建方式：new Vuex.Store(...)(vuex3)，createStore(...)(vuex4)。
对比于 vuex3 ，state 现在是一个函数返回对象。
没有 mutations，不用担心，state 的变化依然记录在 devtools 中。
安装 pinia
main.ts
新建store文件夹，新建index.ts
组件内使用
getters 用法介绍
Pinia 中的 getter 与 Vuex 中的 getter 、组件中的计算属性具有相同的功能
actions
这里与 Vuex 有极大的不同，Pinia 仅提供了一种方法来定义如何更改状态的规则，放弃 mutations 只依靠 Actions，这是一项重大的改变。
Pinia 让 Actions 更加的灵活：
可以通过组件或其他 action 调用
可以从其他 store 的 action 中调用
直接在 store 实例上调用
支持同步或异步
有任意数量的参数
可以包含有关如何更改状态的逻辑（也就是 vuex 的 mutations 的作用）
可以 $patch 方法直接更改状态属性
VueRouter
yarn add vue-router@4
在 src 文件下新增 router 文件夹 => router.ts 文件,内容如下:
修改入口文件 mian.ts :
到这里路由的基础配置已经完成了,更多配置信息可以查看 vue-router 官方文档:
vue-router: next.router.vuejs.org/zh/guide/
vue-router4.x 支持 typescript，配置路由的类型是 RouteRecordRaw，这里 meta 可以让我们有更多的发挥空间，这里提供一些参考
title:string; 页面标题，通常必选。
icon?:string; 图标，一般配合菜单使用。
auth?:boolean; 是否需要登录权限。
ignoreAuth?:boolean; 是否忽略权限。
roles?:RoleEnum[]; 可以访问的角色
keepAlive?:boolean; 是否开启页面缓存
hideMenu?:boolean; 有些路由我们并不想在菜单中显示，比如某些编辑页面。
order?:number; 菜单排序。
frameUrl?:string; 嵌套外链。
Element-ui plus
Element Plus 目前还处于快速开发迭代中。目前使用2.0.1版可以结合vite-plugin-style-import插件按需加载样式。 unplugin-vue-components 按需自动导入组件 使用 Element Plus组件时可以直接使用
main.ts
Axios封装
实际使用中可以根据项目修改，比如RESTful api中可以自行添加put和delete请求,ResType也可以根据后端的通用返回值动态的去修改
新增 http文件夹，http下新增 Http.ts 文件以及 api 文件夹:
http.ts
在http文件夹下创建api文件夹用于统一存放接口文件,统一管理api
http/api/login.ts
至此,一个简单地请求封装完成了!!!!
除了自己手动封装 axios ,这里还推荐一个 vue3 的请求库: VueRequest,非常好用,下面来看看 VueRequest有哪些比较好用的功能吧!!!
所有数据都具有响应式
轮询请求
自动处理错误重试
内置请求缓存
节流请求与防抖请求
聚焦页面时自动重新请求
⚙️ 强大的分页扩展以及加载更多扩展
完全使用 Typescript 编写，具有强大的类型提示
⚡️ 兼容 Vite
轻量化
开箱即用
tsx支持
首先需要安装官方维护的vite插件@vitejs/plugin-vue-jsx,这个插件其实核心还是@vue/babel-plugin-jsx,只是在这个插件上封装了一层供vite插件调用。所以关于vue的jsx语法规范可以直接参看@vue/babel-plugin-jsx,文档链接如下，建议大家可以先读一遍语法规范。官方写得比较详细，后续我也会结合实际讲解一下大部分规范的用法，vue jsx语法规范。
安装完之后在vite.config.ts进行插件使用，代码如下：
环境变量配置
vite 提供了两种模式：具有开发服务器的开发模式（development）和生产模式（production）
项目根目录新建: .env.development
NODE_ENV=development VITE_APP_WEB_URL= 'YOUR WEB URL'
项目根目录新建: .env.production
NODE_ENV=production VITE_APP_WEB_URL= 'YOUR WEB URL'
组件中使用：
console.log(import.meta.env.VITE_APP_WEB_URL)
配置 package.json:
打包区分开发环境和生产环境
"build:dev": "vite build --mode development",
"build:pro": "vite build --mode production",
Vite 常用基础配置
基础配置
运行 代理 和 打包 配置
生产环境生成 .gz 文件
开启 gzip 可以极大的压缩静态资源，对页面加载的速度起到了显著的作用。\
使用 vite-plugin-compression 可以 gzip 或 brotli 的方式来压缩资源，这一步需要服务器端的配合，vite 只能帮你打包出 .gz 文件。此插件使用简单，你甚至无需配置参数，引入即可。
# 安装 yarn add --dev vite-plugin-compression
plugins 中添加：
最终 vite.config.ts
常用插件
可以查看官方文档：vitejs.cn/plugins/\
@vitejs/plugin-vue 提供 Vue 3 单文件组件支持
@vitejs/plugin-vue-jsx 提供 Vue 3 JSX 支持（通过 专用的 Babel 转换插件）
@vitejs/plugin-legacy 为打包后的文件提供传统浏览器兼容性支持
unplugin-vue-components 组件的按需自动导入
vite-plugin-compression 使用 gzip 或者 brotli 来压缩资源
非常推荐使用的 hooks 库
因为vue3.x和react hooks真的很像，所以就称为 hooks\
VueUse：vueuse.org/
看到这个库的第一眼，让我立马想到了 react 的 ahooks
VueUse 是一个基于 Composition API 的实用函数集合。通俗的来说，这就是一个工具函数包，它可以帮助你快速实现一些常见的功能，免得你自己去写，解决重复的工作内容。以及进行了基于 Composition API 的封装。让你在 vue3 中更加得心应手。
想要入手 vue3 的小伙伴，赶快学习起来吧！！！
最后给大家奉上仓库地址吧：gitee.com/frontendBoy…
写在最后
公众号：前端少年汪
专注分享 web 前端相关技术文章、视频教程资源、热点资讯等，如果喜欢我的分享，给 点一个赞 或者 ➕关注 都是对我最大的支持。
