Vue3 + Vite + Ts + Axios + Pinia + VueRouter 配置

date

icon

password

description

permalink

说明

本文记录一下Vue3的一个基本的开发框架的搭建。主要在公司开发业务，主体框架不用每次都搭建。时间长了就容易忘记了，当初的框架如何搭建的。文章记录的框架搭建的主要实现功能如题，然后研究一些快捷的操作。例如，ts定义的空间自动导入等等。

工具介绍

Vite 是一种新型前端构建工具，能够显著提升前端开发体验。细致的介绍看[官网](https://cn.vitejs.dev/guide/)

Vue3 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。

TypeScript 是一门静态类型、弱类型的语言。 TypeScript 是完全兼容JavaScript 的，它不会修改JavaScript 运行时的特性。 TypeScript 可以编译为JavaScript，然后运行在浏览器、Node.js 等任何能运行JavaScript 的环境中。

Axios 是一个基于promise 网络请求库，作用于 node.js 和浏览器中。

Pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态。详细的介绍看[官网](https://pinia.web3doc.top/introduction.html)

Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。

Vue Router 和 Vue 的版本有一个范围支持的。前面使用了Vue3.x所以Vue Router使用4.x

使用Vite

Vite 需要 Node.js 版本 14.18+，16+。所以安装之前检查你的node版本

--template 后面的参数有 vanilla，vanilla-ts，vue，vue-ts，react，react-ts，preact，preact-ts，lit，lit-ts，svelte，svelte-ts。查看create-vite以获取每个模板的更多细节。这里就使用命令

到此Vue3 + Vite + Ts就很简单的完成了，但是这还只是一部分内容

安装Axios

安装完成之后，创建一个如下的文件src/assets/js/my-axios.ts,这里要做一个自己的项目接口配置，可以参考我的，根据个人需求来改动。本文件完成了以下几个需求。

在具体页面中通过api.get或者api.post这种方式来调用函数，创建对应的方法。

通过请求前拦截和请求后拦截来做一个身份的验证和一个数据加载动画。

有时候需要手动上传图片数据，可以对接口请求参数类型是否是[object FormData]头部修改字段。还需要安装@types/node包，因为文件中使用到了Timeout函数，来处理加载动画到操作。以及安装element-plus，使用其中的信息组件

@types是什么？
有些包并不是 TypeScript 编写的，自然也不会导出 TypeScript 声明文件。所以在TS项目中使用会报错，TS官方给了2个解决方法。
安装 @types
自己 declare module

自定义的axios文件

同时新建一个src/api/index.ts，主要用来抛出定义的接口名称，算是按需加载吧另外，有很多时候前端项目需要部署到很多服务器上，接口的域名会改变，所以做一个动态改变配置

动态配置文件加载

新建src/config/host.config.ts，然后在main.ts中引入它。最后需要在index.html中引入一个<script src="./config/index.js"></script>,在第一次部署的时候加一个这个文件。

这样以后如果域名什么的修改了，就不用手动打包再上传了。也可以定义自己的配置，动态修改。

如何使用

写好的my-axios.ts配置文件在需要的文件中引入就可以了

安装Pinia

同时为了能够数据持久化安装pinia-plugin-persistedstate

接下来我们要做一些自己的个性化设置，让代码更加有规则吧在src/store/index.ts写入如下代码

在main.ts中注册store以及上面编写的动态配置文件

提示找不到文件的错误

这里会看到一些报错提示，找不到模块“./App.vue”或其相应的类型声明。找不到模块“@/store/index”或其相应的类型声明。第一个解决的方法是src/env.d.ts中加入

第二个找不到文件的问题主要是@没有被解析，ts文件不能被正确识别。解析@在根目录下的vite.config.js

对于ts文件的识别就需要在项目根目录下新建一个tsconfig.json文件

有了上面的这个作为基础，我们就能定义自己想要的数据了，例如我定义一个存储用户信息的store 在src/store/user.ts

这样就可以非常简单的在需要使用的文件种导入，例如。

安装VueRouter

vue3.x的对应的VueRouter版本在v4.x,如果你是vue2.x使用的路由版本在4.x会提示一些很奇怪的错误。

安装

路由注册文件

在/src/router/index.ts文件中编写自定的路由。这里主要是引入注册页面，并且希望它能够动态导入路由。目前这项功能我没使用上，不过记录一下。

将写好的文件导入注册到main.ts中

那么我们就只要在APP.vue中加入<router-view></router-view>就能够跳转路由渲染页面了。

这里就完成了路由的跳转配置

路由的灵活缓存方案

但是平常可能会遇到这样一个这样的场景A->B，返回到A页面的时候希望保存之前的状态，A->C返回的时候就重新调用函数。那么就需要一个灵活的缓存操作。而如果你使用activated这种方法，你就要在URL或者什么地方记录本次是否重新调用接口，这样就显得太麻烦了。我们都了解使用keep-alive能缓存组件，同时include和exclude能让那些组件缓存和不缓存，而且exclude优先级比include高。那么我是否可以通过操作这2个数组来控制是否缓存页面。在/src/router/keepAlive.ts文件中写入以下代码

一个简单高效的通过控制exclude数组来改变是否缓存页面的方法就出现了。在APP.vue页面引入

当我们从A跳入C的时候我们希望C返回到A不缓存

通过removeKeepAliveCache, resetKeepAliveCache暴露的方法来控制exclude数组，从而达到是否缓存这个页面，同时还能做一些动画。这里如果有时间就去琢磨实现一下。

优化

上面的步骤基本完成了一个项目的搭建，和一些开发时候的优化。这里做的优化是一些代码编写时候的便捷优化。Vue3比较不同的是它可以采用组合式编程，一段一段的。

自动导入

由于经常要引入vue的方法，而我又不想自己手动写，想让它自动导入，这怎么弄呢

安装unplugin-auto-import

vite.config.ts 配置

打包优化

这个只要在vite.config.ts中配置一下

最后可能有其他的优化我暂时记不起来了，把整个配置文件分享出来，以后想起来了，再接着编写

模版编写优化tsx

这个问题是在写element-plus的Virtualized Table 虚拟化表格中遇到的，由于它的示例代码里面有用到tsx，所以需要用到@vitejs/plugin-vue-jsx这个插件。

注意：

这个插件和vite之间有版本对应的关系。我的vite是2.9.9 所以我安装了版本1.3.10。

安装之后要在vite.config.ts中引入这个插件

然后就可以将script上的lang="ts"，改成lang="tsx"。