化妆品网站欣赏,个人建设网站要钱吗,建筑企业和建设企业区别,团购网站 网上 收费 系统1、vue creat 项目名称
选择自定义 选择需要的依赖 选择vue3 一路enter#xff0c;选择eslistprettier 继续enter#xff0c;等待安装 按步骤操作#xff0c;项目启动成功 2、vscode安装5款插件 2、代码保存自动格式化#xff0c;保证每个开发人员代码一致#xff0c;根目…1、vue creat 项目名称
选择自定义 选择需要的依赖 选择vue3 一路enter选择eslistprettier 继续enter等待安装 按步骤操作项目启动成功 2、vscode安装5款插件 2、代码保存自动格式化保证每个开发人员代码一致根目录新建三个文件.editorconfig和.prettierrc和.prettierignore
.editorconfig文件如下无论什么编辑器都按这个格式执行
# http://editorconfig.orgroot true[*] # 表示所有文件适用
charset utf-8 # 设置文件字符集为 utf-8
indent_style space # 缩进风格tab | space
indent_size 2 # 缩进大小
end_of_line lf # 控制换行类型(lf | cr | crlf)
trim_trailing_whitespace true # 去除行首的任意空白字符
insert_final_newline true # 始终在文件末尾插入一个新行[*.md] # 表示仅 md 文件适用以下规则
max_line_length off
trim_trailing_whitespace false .prettierrc文件如下保存代码格式化
{printWidth: 80,//每行多少代码semi: false, // 末尾使用分号singleQuote: true, // 全局使用单引号tabWidth: 2, //tab宽度为两个空格arrowParens: avoid, //箭头函数参数只有一个时是否要小括号avoid省略括号trailingComma: none, // 末尾不加逗号proseWrap: preserve // 是否将 Markdown 文件中的文本换行 preserve保留
}
.prettierignore文件如下忽略某些效验
#忽略效验的文件
/dist/*
.local
.output.js
/node_modules/****/*.svg
**/*.sh/public/*
vscode右键格式化文档 使用prettier格式化设置
package.json中配置一键执行全部文件代码格式化 3、安装husky插件保证git提交之前代码规范
npx husky-init npm install
修改husky中pre-commit文件npm test为npm run lint 4、配置vue.config.js
const { defineConfig } require(vue/cli-service)
module.exports defineConfig({transpileDependencies: true,publicPath: ./, //打包后的应用中所有 URL 都会带上的前缀host: 0.0.0.0,port: 8080, // 端口号open: true, // 自动启动浏览器//配置代理devServer: {//所有的配置项proxy: {//配置/api: {//代理名称,这里最好有一个target: process.env.VUE_APP_BASE_API, // 后台接口域名changeOrigin: true, //是否跨域pathRewrite: {^/api: /api //路径重写}}}}
})5、引入js必须在tsconfig.json文件配置 allowJs: true 6、新建两个文件配置如下
第一axios.ts文件配置如下
/* eslint-disable no-undef */
// 引入axios
import axios from axios
import type { AxiosRequestConfig } from axiosconsole.log(process.env.VUE_APP_BASE_API)// 请求超时时间
const server axios.create({baseURL: process.env.VUE_APP_BASE_API,timeout: 1000// headers: {// Content-Type: application/json// }
})// 请求拦截器
server.interceptors.request.use(config {// 每次发送请求之前判断是否存在token如果存在则统一在http请求的header都加上token不用每次请求都手动添加了// 即使本地存在token也有可能token是过期的所以在响应拦截器中要对返回状态进行判断// const token sessionStorage(Token)// token (config.headers.Authorization token)// if (config.method.toUpperCase() POST) {// config.headers[Content-Type] application/json;charsetutf-8// }return config},error {return error}
)
// 响应拦截器
server.interceptors.response.use(config {return config},// 服务器状态码不是200的情况error {return error}
)// 通过导出自定的request实例来实现对axios的类型封装
export default async T(config: AxiosRequestConfig) {const res await server(config)return (res.data.data || res.data) as T
}第二api.ts文件配置如下统一管理接口
import request from /axiosexport function testGetApi(params: any) {return request({url: /api/test?id1,method: get,params: params})
}
export function testPostApi(data: any) {return request({url: /api/login,method: post,data: data})
}
第三组件中接口调用如下 script setup langts
import { testGetApi, testPostApi } from /apiconst testgetFun async () {const res await testGetApi({})console.log(res)
}
const testPostFun async () {const res await testPostApi({ user: 111 })console.log(res)
}onMounted(() {testgetFun()testPostFun()
})
/script
