夜猫子的知识栈
夜猫子
2023-03-13
目录

项目初始化

# 初始化一个 vue-ts 项目

# 创建 ts 项目

yarn create vite YMlist --template vue-ts
1

# vscode 支持插件

# TypeScript Vue Plugin (Volar)

官方出品的插件，对 Vue3 有最好的支持。注意：不兼容 Vue2。

# Vue3 sniappets

支持关键词快捷键入 vue3 相关代码。

# Prettier

代码格式化校验工具。

# 配置 lint

# eslint

使用 vite 创建的项目与 cli 创建的不一样，是没有 eslint，所以需要手动配置。

# eslint 和 eslint vue 插件
npm install --save-dev eslint eslint-plugin-vue

# vite 接入 eslint
npm install vite-plugin-eslint --save-dev

# eslint 插件，为 ts 代码提供 lint 规则
npm i @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev
1
2
3
4
5
6
7
8

# prettier

主要是为了多人协作时代码风格统一。

# eslint-plugin-prettie 用于将 prettier 的 错误报错给 eslint
# eslint-config-prettier 因为 eslint 和 prettier 都可以去做格式化代码，这就造成两者在使用上会出现冲突，它主要负责两者的冲突
npm install prettier eslint-plugin-prettier eslint-config-prettier --save-dev
1
2
3

# 创建 .eslintrc.json 文件

{
  "env": {
    "browser": true,
    "node": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:vue/vue3-recommended",
    "prettier",
    "plugin:prettier/recommended"
  ],
  "plugins": ["vue", "@typescript-eslint"],
  "parserOptions": {
    "ecmaVersion": 12,
    "parser": "@typescript-eslint/parser",
    "sourceType": "module"
  },
  "rules": {
    "vue/multi-word-component-names": "off", // 创建 vue 组件时，可以使用单个单词
    "no-unused-vars": [
      "error",
      {
        "varsIgnorePattern": ".*",
        "args": "none",
        "vars": "all",
        "ignoreRestSiblings": true,
        "argsIgnorePattern": "^_"  // 声明但未使用的变量，当变量名以 _ 为前缀时，可忽略错误
      }
    ]
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

# 代码风格格式化校验

添加.prettierrc.json文件配置：

可根据个人或团队风格调整。

{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": false,
  "quoteProps": "as-needed",
  "jsxSingleQuote": true,
  "trailingComma": "all",
  "bracketSpacing": true,
  "jsxBracketSameLine": true,
  "arrowParens": "always",
  "requirePragma": false,
  "insertPragma": false,
  "proseWrap": "preserve",
  "htmlWhitespaceSensitivity": "ignore",
  "vueIndentScriptAndStyle": false,
  "endOfLine": "lf",
  "embeddedLanguageFormatting": "auto"
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# vite 接入 eslint

使用之前下载的插件 vite-plugin-eslint，此 vite 插件可以将 eslint 的错误信息展示到浏览器上。

在 vite.config.ts 中引入 eslintPlugin。

import eslintPlugin from 'vite-plugin-eslint';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [eslintPlugin()]
})
1
2
3
4
5
6

# 配置路径别名

导入 path 时，可能会报类型错误，需安装 @types/node

npm install --save-dev @types/node
1

# vite.config.js

import { resolve } from "path";

export default defineConfig({
  plugins: [eslintPlugin(), vue()],
  resolve: {
    alias: {
      "@": resolve(__dirname, "src"),
    },
  },
});
1
2
3
4
5
6
7
8
9
10

# tsconfig.json

然后在 tsconfig.json 中进行 TS 配置

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}
1
2
3
4
5
6
7
8

# 配置 vue-router

yarn add vue-router@4
1

# 配置 router

// routers/index.ts
import { createRouter,createWebHashHistory } from "vue-router";
import type { RouteRecordRaw } from "vue-router";

const routes:RouteRecordRaw[]=[
{
    path:'/',
    name:'home',
    component:()=>import ('@/pages/home/index.vue'),
    meta:{
        title:'首页'
    }
},
{
    path:'/',
    name:'calendar',
    component:()=>import ('@/pages/calendar/index.vue'),
    meta:{
        title:'日历'
    }
},{
    path:'/',
    name:'hosettingme',
    component:()=>import ('@/pages/setting/index.vue'),
    meta:{
        title:'设置'
    }
},{  // 不识别的路由自动跳首页
    path: "/:catchAll(.*)",
    redirect: "/",
  },
    
]

const router=createRouter({
    history:createWebHashHistory(), // hash 模式
    routes
})

export default router
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

# 注册 router

// main.ts
import { createApp } from 'vue'
import router from "./routers";
import './style.css'
import App from './App.vue'

createApp(App).use(router).mount('#app')
1
2
3
4
5
6
7
<!-- App.vue -->
<template>
 <RouterView></RouterView>
</template>

<style lang="stylus" scoped>
</style>
1
2
3
4
5
6
7

# 路由缓存 keep-alive

注意：vue3 的路由缓存的写法和 vue2 不一样了（文档地址 (opens new window)）。

缓存 home 和 setting 组件

<router-view v-slot="{ Component }">
  <keep-alive :include="['home', 'setting']">
    <component :is="Component" />
  </keep-alive>
</router-view>
1
2
3
4
5

# 配置 Pinia

yarn add pinia
1

注册

// main.ts
import { createPinia } from "pinia";
app.use(createPinia())
1
2
3

# 定义模块化的 store

# 定义单个模块 store

// stores/modules/calendar.ts
import {defineStore} from "pinia"

const useCalendarStore=defineStore({
    id:"calendar",
    state: () => ({
        isStartSunday: false,
      }),
      actions:{
        setStartSundaySync(value:boolean){
            this.isStartSunday=value
        },
        async setStartSunday() {
            const data = await getInfo();
            this.isStartSunday = data;
          },
      }
})

export default useCalendarStore
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# 导出模块

import useCalendarStore from "./modules/calendar"

/*
* 组件中使用
* import { storeToRefs } from 'pinia'
* import useStore from '@/store'
* const { useCalendarStore } = useStore()
*
* 提交 action
* useCalendarStore.setStartSundaySync(true) 
* 
* 获取数据
* 使用storeToRefs可以保证解构出来的数据也是响应式的
* const { isStartSunday } = storeToRefs(useCalendarStore)
*/
export default function useStore() {
    return {
        useCalendarStore: useCalendarStore(),
    };
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# 配置 axios

关于 Axios 和 TS，其实方案有很多，但每个团队有自己的习惯和规范，没有最好，用起来爽就好了。

yarn add axios
1

# Axios+TS案例

# request 函数

// @/service/request.ts
import axios from "axios"
import type {AxiosRequestConfig} from "axios"
import { getRequestBaseURL } from "./index";

const axiosInterface = axios.create({
  baseURL: getRequestBaseURL(),
  timeout: 10000,
  headers: {
    "content-type": "application/json",
  },
});

const request = async <T>(
  config: AxiosRequestConfig
): Promise<API.BaseResponseType<T>> => {
  try {
    const { data } = await axiosInterface(config);
    return data;
  } catch (error) {
    return Promise.reject(error);
  }
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# 声明一个全局 API 命名空间
// @/types/axios.d.ts
declare namespace API {
    type BaseResponseType<T> =Readonly<{
     code: number;
     message: string;
     data: T;
   }>
 }
1
2
3
4
5
6
7
8
# 使用时的泛型约束
interface loginByPasswordRequset{
    accessToken: string;
    refreshToken: string;
}
export const loginByPassword = async (loginInfo: LoginByPassword) => {
  return await request<loginByPasswordRequset>({
    url: "/user/loginByPassword",
    method: "post",
    data: loginInfo,
  });
};
1
2
3
4
5
6
7
8
9
10
11

# Token 处理

在实际业务中，token 是不可能长期生效的，因此我们需要对 token 失效的情况进行处理。

比如上面，登录接口返回了两个 token，accessToken 和 refreshToken，有效时间分别为 2天 和 4天；

在用户使用过程中，如果后端返回 401 状态码，就代表 accessToken 过期了。这时候就要缓存过期后的请求函数，同时发送一个新的请求并携带 refreshToken 去从后端获取新的 token，并在获取 token 后，重新执行之前缓存过的请求函数。

如果获取新 token 的请求返回的状态码非 200，那么代表 refreshToken 也过期了，这时候需要跳转到登录页，重新登录。

# 添加请求拦截
// 请求拦截
axiosInterface.interceptors.request.use((config) => {
    const token = localStorage.getItem(UserTokenEnum.ASSET_TOKEN);
    if (token) {
      const { headers } = config;
      headers.Authorization = `Bearer ${token}`;
    }
    return config;
})
1
2
3
4
5
6
7
8
9
# 添加响应拦截
// 缓存 token 过期后的请求函数
let catchRequestFunc: Array<() => void> = [];
// 响应拦截
axiosInterface.interceptors.response.use(
    async (response: AxiosResponse<API.BaseResponseType<any>>) => {
        const { status, data } = response;
        if (status === 200) {
            const { code, message } = data;
            const responseCode = Number(code);
            // token 过期
            if (responseCode == 401) {
                // 缓存过期后的请求函数
                new Promise((resolve) => {
                    catchRequestFunc.push(() => {
                        resolve(request(response.config));
                    });
                });
                // 通过 reference token 获取新 token
                await handleRefreshToken();
            } else if (responseCode === 403) {
                router.push({
                    name: "homePage",
                });
            } else if (responseCode !== 200) {
                // 业务中非 200 的状态码一律弹出
                MessageApi.error(message);
            }
        }
        return response;
    },
    ({ response }) => {
        // 请求失败，也弹出状态码
        MessageApi.error(netWorkCodeMaps[response.status] || "服务器错误");
    }
);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

# 完整代码

import axios from "axios"
import router from "@/routers";
import { getRequestBaseURL } from "./index"
import useStore from '@/stores'
import { useMessage } from "naive-ui";

import type { AxiosRequestConfig, AxiosResponse } from "axios"
import { UserToken } from "@/types/user";

const MessageApi = useMessage();
const { useGlobalStore } = useStore()

const netWorkCodeMaps: Record<number, string> = {
    404: "404 Not Found",
    405: "Method Not Allowed",
    504: "网关错误",
    500: "服务器错误",
} as const;

const axiosInterface = axios.create({
    baseURL: getRequestBaseURL(),
    timeout: 10000,
    headers: {
        "content-type": "application/json",
    },
});

// 缓存 token 过期后的请求函数
let catchRequestFunc: Array<() => void> = [];

// 请求拦截
axiosInterface.interceptors.request.use((config) => {
    const token = localStorage.getItem(UserToken.ASSET_TOKEN);
    if (token) {
        const { headers } = config;
        headers.Authorization = `Bearer ${token}`;
    }
    return config;
});

// 响应拦截
axiosInterface.interceptors.response.use(
    async (response: AxiosResponse<API.BaseResponseType<any>>) => {
        const { status, data } = response;
        if (status === 200) {
            const { code, message } = data;
            const responseCode = Number(code);
            // token 过期
            if (responseCode == 401) {
                // 缓存过期后的请求函数
                new Promise((resolve) => {
                    catchRequestFunc.push(() => {
                        resolve(request(response.config));
                    });
                });
                // 通过 reference token 获取新 token
                await handleRefreshToken();
            } else if (responseCode === 403) {
                router.push({
                    name: "homePage",
                });
            } else if (responseCode !== 200) {
                // 业务中非 200 的状态码一律弹出
                MessageApi.error(message);
            }
        }
        return response;
    },
    ({ response }) => {
        // 请求失败，也弹出状态码
        MessageApi.error(netWorkCodeMaps[response.status] || "服务器错误");
    }
);

const handleRefreshToken = async () => {
    const refreshToken = localStorage.getItem(UserToken.REFRESH_TOKEN);

    if (refreshToken) {
        const { code, data } = await request<{
            accessToken: string;
            refreshToken: string;
        }>({
            url: "/user/refreshToken",
            method: "post",
            data: {
                refreshToken: window.localStorage.getItem(UserToken.REFRESH_TOKEN),
            },
        });
        if (Number(code) === 200) {
            localStorage.setItem(UserToken.ASSET_TOKEN, data.accessToken);
            localStorage.setItem(UserToken.REFRESH_TOKEN, data.refreshToken);

            axiosInterface.defaults.headers[
                "Authorization"
            ] = `Bearer ${data.accessToken}`;

            // 执行 token 失效后缓存的请求函数
            catchRequestFunc.forEach((catchFunc) => {
                catchFunc();
            });
        } else {
            // refreshtoken 也过期了，那么跳登录页，重新登录
            useGlobalStore.handleLogout();

            catchRequestFunc = [];
            router.push({
                name: "homePage",
            });
            MessageApi.warning("请重新登录");
        }
    } else {
        // 不存在 refresh token, 跳登录页
        useGlobalStore.handleLogout();
        catchRequestFunc = [];
        router.push({
            name: "homePage",
        });
        MessageApi.warning("请重新登录");
    }
};

const request = async<T>(config: AxiosRequestConfig): Promise<API.BaseResponseType<T>> => {
    try {
        const { data } = await axiosInterface(config)
        return data
    } catch (error) {
        return Promise.reject(error);
    }
}

export default request
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131

# 配置 Tailwind CSS

  1. 如果不想花太多时间去写 css，那么其实可以尝试使用下 tailwind css 这种原子化 css
  2. 当然目前社区中原子化 css 的方案还有很多，大家根据自己喜好选择
  3. 虽然要记那么多的 classname，但是有 vscode 插件啊，用起来之后你就会觉得其实还挺香的

# 安装和初始化

这里官方文档已经说的够详细了，就直接贴文档 (opens new window)了

# VS Code 类名提示

安装插件 Tailwind CSS IntelliSense (opens new window)

img

# 处理编辑器警告

# @tailwind 报警告

解决方法：装一个 postcss vscode 插件

PostCSS Language Support (opens new window)

参考链接 (opens new window)

img

img

# 插件提示不生效

设置中输入 quickSuggestions ，将 strings 置为 on

img

# tailwindcss 使用 @apply 时 报 warning

解决方案： https://github.com/tailwindlabs/tailwindcss/discussions/5258

  1. 下载 vscode 插件 PostCSS Language Support (opens new window)

  2. css.lint.unknownAtRules: ignore

    1. 如果你在项目中使用的是 scss，那么把 css 改成 scss 即可

css.lint.unknow 设置为 ignore

img

编辑 (opens new window)
上次更新: 2024/6/18 13:14:59
前端指南
封装日历组件

← 封装日历组件→

最近更新
01
IoC 解决了什么痛点问题？
03-10
02
如何调试 Nest 项目
03-10
03
Provider注入对象
03-10
更多文章>
Copyright © 2019-2025 Study | MIT License