做微博网站,制作网站的成本,免费可商用图片素材网站,室内设计和装修设计目录 一、配置简述二、创建项目1、使用包管理工具 pnpm2、新增目录 三、配置 ESLint1、添加代码2、修改 VSCode 配置 四、husky 工具配置五、暂存区 eslint 校验六、axios 配置1、安装创建2、测试 七、导入 Element Plus八、Pinia 持久化实现九、其他导入 .scss 文件需要安装 s… 目录 一、配置简述二、创建项目1、使用包管理工具 pnpm2、新增目录 三、配置 ESLint1、添加代码2、修改 VSCode 配置 四、husky 工具配置五、暂存区 eslint 校验六、axios 配置1、安装创建2、测试 七、导入 Element Plus八、Pinia 持久化实现九、其他导入 .scss 文件需要安装 sass 插件路径提示 一、配置简述
开发工具VSCode包管理工具pnpm代码质量检测ESLint代码格式化Prettier暂存区eslint数据交互axios页面效果Element PlusPinia 持久化pinia-plugin-persistedstate
二、创建项目
1、使用包管理工具 pnpm 速度更快更节省磁盘 安装方式npm install pnpm创建项目pnpm create vue 或者使用 npm init vuelatest创建选项选择 Vue Router、Pinia、ESLint、Prettier进入目录执行pnpm install
2、新增目录
apisAPI 接口composables组合函数directives全局指令styles全局样式utils工具函数
三、配置 ESLint ESLint 用于代码质量检测Prettier 用于代码格式化配合使用 1、添加代码 在 .eslintrc.cjs 文件中的 module.exports 对象中添加: ,rules: {prettier/prettier: [warn,{singleQuote: true, //单引号semi: false, //无分号printwidth: 80, //每行宽度至多80字符trailingComma: none, //不加对象|数组最后逗号endofLine: auto //换行符号不限制(win mac不致)}],vue/multi-word-component-names: [warn,{ignores: [index] // vue组件名称多单词组成(忽略index.vue)}],vue/no-setup-props-destructure: [off], //关闭props解构的校验//添加未定义变量错误提示, create-vue3.6.3 关闭no-undef: error}2、修改 VSCode 配置 a. 禁用 prettier 插件安装 ESLint 插件 b. 在设置中添加 //ESlint插件 Vscode配置 实现自动格式化修复
editor.codeActionsOnSave: {source.fixAll: true
},
//关闭保存自动格式化
editor.formatOnSave: false,四、husky 工具配置 a. git 提交代码前会帮助我们进行校验并指出错误的代码 b. 执行 git init 初始化 git c. 初始化 husky 工具配置执行 pnpm dlx husky-init pnpm install 五、暂存区 eslint 校验 a. pnpm lint 命令是全局效验速度太慢所以配置暂存区只校验暂存区 b. 安装 lint-staged 包执行 pnpm i lint-staged -D c. package.json 添加 lint-staged 命令: ,lint-staged: {*.{js,ts,vue}:[eslint --fix]}d. 在 scripts 中添加lint-staged: lint-staged e. husky/pre-commit 文件中的 npm test 修改为 pnpm lint-staged 六、axios 配置
1、安装创建 a. 安装命令pnpm install axios b. utils 包下面的 request.js 文件 import axion from axios
//为了导入token
import { useUserStore } from /stores
import { ElMessage } from element-plus
import router from /router//改成自己配置的router
//基础地址如
const baseURL http://xuantianling.netconst instance axion.create({//基础地址超时时间baseURL,timeout: 10000
})//请求拦截器
instance.interceptors.request.use((config) {//携带 token//const userStore useUserStore()//if (userStore.token) {//判断是否有token//有token的话每次请求都在请求头上添加上//config.headers.Authorization userStore.token//}return config},(err) Promise.reject(err)
)//响应拦截器
instance.interceptors.response.use((res) {//if (res.data.code 0) {//根据后端传送的数据判断是否响应成功//响应成功放行//return res//}//响应失败//ElMessage.error(res.data.message || 服务异常)return Promise.reject(res.data)},(err) {//处理401错误权限不足||token过期//if (err.response?.state 401) {//router.push(/login)//}//错误的默认情况//ElMessage.error(err.response.data.message || 服务异常)Promise.reject(err)}
)
export default instance
export { baseURL }2、测试 a. 创建请求文件 import instance from /utils/requestexport const userLoginService (user) request.post(/api/login, user)b. 在 main.js 中进行测试 userLoginService(user).then(res {// 获取用户登录返回的信息console.log(res)
})七、导入 Element Plus a. 执行命令pnpm install element-plus b. 按需导入npm install -D unplugin-vue-components unplugin-auto-import c. 在 vite.config.ts 文件中添加 import AutoImport from unplugin-auto-import/vite
import Components from unplugin-vue-components/vite
import { ElementPlusResolver } from unplugin-vue-components/resolversexport default defineConfig({// ...plugins: [// ...AutoImport({resolvers: [ElementPlusResolver()],}),Components({resolvers: [ElementPlusResolver()],}),],
})
八、Pinia 持久化实现 a. 安装插件pinia-plugin-persistedstate命令pnpm install pinia-plugin-persistedstate b. 开始持久化在对应模块第三个参数传入 persist设置值为 true 九、其他
导入 .scss 文件需要安装 sass 插件 a. 很大几率是要使用 .scss 文件 b. 安装命令pnpm add sass -D 路径提示 插件 path in tellisense 配置一下就有路径提示了
