个人网站开发记录(四)二系统前端vite+ts+ant

chenjinxu2003

已于 2024-04-01 18:33:58 修改

阅读量590

点赞数 19

分类专栏：个人网站开发文章标签：前端

于 2024-04-01 18:33:38 首次发布

本文链接：https://blog.csdn.net/m0_73872315/article/details/137226121

版权

个人网站开发专栏收录该内容

9 篇文章 0 订阅

订阅专栏

前言

(访问网址chenjinxu.top)二系统在初始的时候定下的首个目标就是使用当前最新的技术,例如vite,ts这样的技术,然后我也确实是使用了这些技术,因此在二系统我踩得坑也是异乎寻常的多就是了.....,还有本项目的链接是:GitHub - RidenShogunei/secend-system-vue-vite-ts: 二系统,功能包括原神星铁文本查询,股票查询,星铁角色查询,已上线chenjinxu.top

正文

总体来说,二系统实现的功能有原神和崩坏星穹铁道的游戏文本查询和星铁的账号查询功能以及股票查询功能, 因此我接下来大体上也会从这几个方面详细说一下完成过程中学到的东西

项目结构

├─ public

│ └─ vite.svg

├─ README.md

├─ src

│ ├─ api

│ │ ├─ genshin.ts

│ │ ├─ starrail.ts

│ │ └─ statrole.ts

│ ├─ App.vue

│ ├─ assets

│ │ └─ vue.svg

│ ├─ components

│ │ ├─ footerPart.vue

│ │ ├─ headerPart.vue

│ │ ├─ menuPart.vue

│ │ └─ waitPage.vue

│ ├─ http

│ │ ├─ newAxios.ts

│ │ └─ request.ts

│ ├─ main.ts

│ ├─ router

│ │ └─ index.ts

│ ├─ store

│ │ └─ index.ts

│ ├─ types

│ │ ├─ auto-imports.d.ts

│ │ └─ components.d.ts

│ ├─ util

│ │ └─ modleTool.ts

│ ├─ view

│ │ ├─ board

│ │ │ ├─ component

│ │ │ └─ index.vue

│ │ ├─ genshin

│ │ │ └─ genshinSearh.vue

│ │ ├─ main.vue

│ │ ├─ starrail

│ │ │ └─ starrailSearch.vue

│ │ ├─ starrailrole

│ │ │ ├─ component

│ │ │ │ ├─ ownShow.vue

│ │ │ │ ├─ roleShow.vue

│ │ │ │ └─ windowShow.vue

│ │ │ └─ index.vue

│ │ └─ stock

│ │ ├─ componment

│ │ │ ├─ describePgae.vue

│ │ │ └─ detilePage.vue

│ │ └─ index.vue

│ └─ vite-env.d.ts

├─ tsconfig.json

├─ tsconfig.node.json

└─ vite.config.ts

项目初始化

因为我实际上是第一次接触vite+ts的组合,所以在项目的初始化部分就遇到了比较大的问题,我可以一个一个来说:

全局声明

有很多东西我想全局声明,例如ref,vuex的usestore函数啥的,因为每个页面都要引入非常的麻烦,所以我上网查到了一个插件unplugin-auto-import,然后我就使用了这个插件,确实非常好用,之后直接使用ref就行了,很不错.

axios拦截判断

这里我是用了axios拦截器,就像下面这样:

// http request拦截器
instance.interceptors.request.use(
	config=>{
		const token = localStorage.getItem('token');//此处用这个localStorage 也可以用store，因为一般登录后都会将登录信息存储到vuex中，但是如果不存储到localsStorage的话，当前页面刷新时，vuex中的内容会消失。
		if(token){
			config.headers.authorization = token //请求头加上token
		}
		return config
	},err=>{
		return Promise.reject(err);
	}
)

进行拦截和判断,当然作为一个比较简单的项目,我基本上是只检测状态码这样的简单检测

动态组件

还有值得一说的就是动态组件的使用,也就是像下面这样的写法:

        <a-layout-content class="contentStyle">
          <component :is="dynamicComponent"></component>
        </a-layout-content>
const dynamicComponent = computed(() => {
  switch (store.state.page) {
    case '1':
      return defineAsyncComponent(() => import('../view/genshin/genshinSearh.vue'))
    case '2':
      return defineAsyncComponent(() => import('../view/starrail/starrailSearch.vue'))
    case '3':
      return defineAsyncComponent(() => import('../view/starrailrole/index.vue'))
    case '4':
      return defineAsyncComponent(() => import('../view/stock/index.vue'))
    default:
      return defineAsyncComponent(() => import('../components/waitPage.vue'))
  }
})

这样写的话就比较简洁,而且也是懒加载的