从零开始搭建企业级前端项目模板（vue3+vite+ts）
文章目录
- 主要内容
- 一、vite脚手架工具初始化项目
- 二、项目代码加入eslint校验和自动格式化
-
- 2.1安装对应依赖插件
- 2.2 配置script脚本，项目安装eslint配置
- 2.3 安装完成后，后面启动项目还缺少一些依赖，提前按需安装好
- 三，修改eslintrc.cjs文件
- 四、修改vue.config.ts文件
- 五、修改添加常见配置
- 六、Husky、lint-staged、commitlint功能添加
- 七、stylelint钩子，校验css
- 八、环境配置（开发，预发，生产环境）
- 九、vite.config.js配置
- 十、添加路由
- 十一、添加api,封装请求（axios）
- 十二、pinia状态管理器
主要内容
vite,eslint,prettierrc,husky,commitlint,lint-staget,stylelint，vuex，vue-router，axios，pinia
环境：win11，node 18.17.0 ，pnpm 8.12.0
一、vite脚手架工具初始化项目
vite官网：初始化项目：https://cn.vitejs.dev/guide/，本文以pnpm创建项目
# npm 7+, extra double-dash is needed:
npm create vite@latest vue3_project_template --template vue-ts
# yarn
yarn create vite vue3_project_template --template vue-ts
# pnpm
pnpm create vite vue3_project_template --template vue-ts
# bun
bunx create-vite vue3_project_template --template vue-ts
- 创建好项目
- 根据创建项目提示输入命令
cd vue3_project_template
pnpm install
pnpm run dev
- 运行结果如下
二、项目代码加入eslint校验和自动格式化
node工具eslint官网
eslint 运行代码前就可以发现一些语法错误和潜在bug，保证团队代码的一直性
prettier格式化官网
prettier 是代码格式化工具，用于检查代码中的格式问题
区别联系：eslint保证代码质量，prettier保证代码风格，eslint有小部分格式化功能，通常和prettier结合使用
2.1安装对应依赖插件
eslint： ESLint的核心代码库
prettier：prettier格式化代码的核心库
eslint-config-airbnb-base： airbnb的代码规范 (依赖plugin-import)
eslint-config-prettier：eslint结合prettier的格式化
eslint-plugin-vue：eslint在vue里的代码规范
eslint-plugin-import：项目里面支持eslint
eslint-plugin-prettier：将prettier结合进入eslint的插件
pnpm install eslint eslint-plugin-vue eslint-config-prettier prettier eslint-plugin-import eslint-plugin-prettier eslint-config-airbnb-base -D
vscode 安装两个插件
2.2 配置script脚本，项目安装eslint配置
- 在package.json文件scripts加入命令
"lint:create":"eslint --init"
- 执行npm run lint:create
npm run lint:create
- 执行之后会自动创建.eslintrc.cjs文件
2.3 安装完成后，后面启动项目还缺少一些依赖，提前按需安装好
@typescript-esTint/parser: ESLint的解析器，用于解析typescript，从而检查和规范Typescript代码;
@typescript-eslint/eslint-plugin: 这是一个ESLint插件，包含了各类定义好的检测Typescript代码的规范
eslint-import-resolver-alias 让我们可以import的时候使用 @ 别名
pnpm install typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-import-resolver-alias @types/eslint @types/node -D
三，修改eslintrc.cjs文件
- eslintrc.cjs主要内容如下
module.exports = {
// 环境 浏览器，最新ES语法，node环境
"env": {
"browser": true,
"es2021": true,
"node": true
},
/**
* 扩展的eslint规范语法，可以被继承的规则，字符串数组，每个配置继承它之前的配置
* 分别是eslint-config-vue 提供的
* eslint-config-airbnb-base 提供的
* eslint-config-prettier 提供的
* eslint-config- 前缀可以简写
*/
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"plugin:vue/vue3-essential",
"airbnb-base",
"prettier"
],
// eslint 会对代码进行校验，parser是将代码转换为ESTree(AST),ESlint会对ESTree校验
"parser": "vue-eslint-parser",
// 解析器的配置项
"parserOptions": {
// eslint的版本号，或者年份都可以
"ecmaVersion": "latest",
"parser": "@typescript-eslint/parser",
"sourceType": "module",
// 额外的语言类型
"ecmaFeatures": {
"jsx": true,
"tsx": true
}
},
// 全局自定义宏，这样在源文件中使用全局变量不会报错或警告
"globals": {
"defineProps": 'readonly',
"defineEmits": 'readonly',
"defineExpose": 'readonly',
"withDefaults": 'readonly'
},
/**
* 插件
* eslint-plugin- 前缀可以简写
* vue官方提供了一个eslint插件eslint-plugin-vue，它提供了parser和rules。
* parser为vue-eslint-parser，放在前面的parser字段里，rules放在extends字段里
*/
"plugins": [
"@typescript-eslint",
"vue"
],
"settings": {
// 设置项目内的别名
"import/resolver": {
"alias": {
"map": [['@','./src']]
}
},
"import/extensions": ['.js','.jsx','.tsx','.ts','.mjs','.cjs']
},
/**
* rules: 自定义规则，覆盖extends继承的规则，对规则进行灵活配置
*
* "off" 或 0 ==> 关闭规则
* "warn" 或 1 ==> 打开的规则作为警告（不影响代码执行）
* "error" 或 2 ==> 规则作为一个错误（代码不能执行，界面报错）
*/
"rules": {
// eslint（https://eslint.bootcss.com/docs/rules/）
'no-var': 'error', // 要求使用 let 或 const 而不是 var
'no-multiple-empty-lines': ['warn', { max: 2 }], // 不允许多个空行
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-unexpected-multiline': 'error', // 禁止空余的多行
'no-useless-escape': 'off', // 禁止不必要的转义字符
'import/no-unresolved': 'off',
'import/extensions': 'off',
'import/no-absolute-path': 'off',
'import/no-extraneous-dependencies': 'off',
'import/prefer-default-export': 'off',
// typeScript (https://typescript-eslint.io/rules)
'@typescript-eslint/no-unused-vars': 'error', // 禁止定义未使用的变量
'@typescript-eslint/prefer-ts-expect-error': 'error', // 禁止使用 @ts-ignore
'@typescript-eslint/no-explicit-any': 'off', // 禁止使用 any 类型
'@typescript-eslint/no-non-null-assertion': 'off',
'@typescript-eslint/no-namespace': 'off', // 禁止使用自定义 TypeScript 模块和命名空间。
'@typescript-eslint/semi': 'off',
// eslint-plugin-vue (https://eslint.vuejs.org/rules/)
'vue/multi-word-component-names': 'off', // 要求组件名称始终为 “-” 链接的单词
'vue/script-setup-uses-vars': 'error', // 防止