一、背景
记录一套技术方案。
二、项目基础
2.1、创建项目
yarn create vite
输入名字后，这里出现了几个选项，不清楚都是干啥的，下来研究
选择后完成
2.2、vite.config.ts 配置alias：
import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import { resolve } from 'path' // https://vitejs.dev/config/ export default defineConfig({ plugins: [vue()], resolve: { alias: { '@': resolve(__dirname, 'src') } } })
2.3、安装element-plus
2.4、配置环境变量：
2.5、配置router
vite2+vue3+TS+vue-router_ChenNianA的博客-CSDN博客
https://www.jianshu.com/p/5f0301bca0ed
2.6、安装husky
【Vue】EsLint+Husky 实现代码提交时自动校验_夜雨Gecer的博客-CSDN博客_husky vue
2.7、安装sass
安装后重启项目
npm install sass sass-loader -D
经过测试不需要安装sass-loader，安装了会报错
2.8、使用pinia
学习Pinia 第一章（介绍Pinia）_小满zs的博客-CSDN博客
2.9、使用cookie
安装cookie
pnpm add @types/js-cookie
pnpm add js-cookie
页面引入
import cookie from 'js-cookie'
使用cookie
const token = `Bearer ${cookie.get('token')}` console.log('16', token)
使用成功
2.10、处理问题：
解决方法：
{ "compilerOptions": { "target": "ESNext", "useDefineForClassFields": true, "module": "ESNext", "moduleResolution": "Node", "strict": true, "jsx": "preserve", "sourceMap": true, "resolveJsonModule": true, "isolatedModules": true, "esModuleInterop": true, "lib": ["ESNext", "DOM"], "skipLibCheck": true, "baseUrl": "./", "paths": { "@/*": ["src/*"] } }, "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"], "references": [{ "path": "./tsconfig.node.json" }] }
问题得到处理，不报错了
2.11、请求接口：
类型限制：
定义
使用：
参数要一致，不一致就会报错
报错如图
2.12、get请求传递参数:
// 定义请求方法 export const getUser = (data: T.userParams) => { return axios({ method: "get", url: "/abc/getCompanyListByUser", data, config: { timeout: 10000 } }) } // 业务文件---直接和post方法一样的传递参数即可 import { getUser } from "@/api/m-staff-center"; let params = { keyword:"snow", } getUser(params).then((res: any)=>{ console.log('4res', res) })
这里已经得到了参数
查看url已经有参数了，，查看查询结果，生效，ok
