目录
- 一、配置简述
- 二、创建项目
-
- 1、使用包管理工具 pnpm
- 2、新增目录
- 三、配置 ESLint
-
- 1、添加代码
- 2、修改 VSCode 配置
- 四、husky 工具配置
- 五、暂存区 eslint 校验
- 六、axios 配置
-
- 1、安装创建
- 2、测试
- 七、导入 Element Plus
- 八、Pinia 持久化实现
- 九、其他
-
- 导入 .scss 文件需要安装 sass 插件
- 路径提示
一、配置简述
- 开发工具:VSCode
- 包管理工具:pnpm
- 代码质量检测:ESLint
- 代码格式化:Prettier
- 暂存区:eslint
- 数据交互:axios
- 页面效果:Element Plus
- Pinia 持久化:pinia-plugin-persistedstate
二、创建项目
1、使用包管理工具 pnpm
速度更快,更节省磁盘
- 安装方式:
npm install pnpm
- 创建项目:
pnpm create vue
或者使用 npm init vue@latest - 创建选项:选择 Vue Router、Pinia、ESLint、Prettier
- 进入目录执行:
pnpm install
2、新增目录
- apis:API 接口
- 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-vue@3.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.net'
const 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/request'
export 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 un服务器托管网plugin-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-co服务器托管网mponents/resolvers'
export 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 配置一下就有路径提示了
服务器托管,北京服务器托管,服务器租用 http://www.fwqtg.net