硅谷甄选 Blog_01-搭建后台管理系统模板

搭建后台管理系统模板分为两大步骤：

1. 项目初始化
2. 项目配置

项目初始化

环境准备

• node：v16.16.0
• pnpm：v7.22.0

初始化项目

全局安装pnpm指令：

npm i -g pnpm

项目初始化指令：

pnpm create vite

如下图所示进行项目的选项设置：

使用vscode打开创建好的项目，依次运行指令：

pnpm install //安装依赖
pnpm run dev //运行项目

在vscode终端得到如下图所示的结果，点击http://127.0.0.1:5173链接，浏览器中即可得到相应的项目界面

此时项目初始化步骤已完成

项目配置

一个项目要有统一的规范，需要使用eslint+stylelint+prettier来对我们的代码质量做检测和修复，使用husky来做commit拦截，使用commitlint来统一代码提交规范，使用preinstall统一包管理工具

其中，eslint用于代码语法检测；stylelint用于对css代码进行语法检测；prettier用于代码格式规范；husky用于commit拦截，在代码提交前自动对代码进行格式化；commitlint规范代码提交时的信息；preinstall统一包管理器工具

eslint 配置

ESLint 提供一个插件化的 JS 代码检测工具

安装 eslint 指令：

pnpm i eslint -D

生成配置文件 .eslint.cjs 指令：

npx eslint --init

选项配置如下图所示：

在生成的.eslintrc.cjs文件中写入如下代码：

module.exports = {
   
	//运行环境
	"env": {
   
		"browser": true,	//浏览器端
		"es2021": true,		//es2021
	},
	//规则继承
	"extends": [
		//全部规则默认是关闭的，这个配置项开启推荐规则，推荐规则参照文档
		//比如: 函数不能重名、对象不能出现重复key
		"eslint:recommended",
		//vue3语法规则
		"plugin:vue/vue3-essential",,
		//ts语法规则
		"plugin:@typescript-eslint/recommended"
	],
	//要为特定类型的文件指定处理器
	"overrides": [],
	//指定解析器: 解析器
	//Esprima 默认解析器
	//Babel-ESLint int babel解析器
	//@typescript-eslint/parser ts解析器
	"parser": "@typescript-eslint/parser",
	//指定解析器选项
	"parserOptions": {
   
		"ecmaVersion": "latest",	//校验ECMA最新版本
		"sourceType": "module",		//设置为"script"(默认), 或者"module"代码在ECMAScript模块中
	},
	//ESLint支持使用第三方插件。在使用插件之前，您必须使用npm安装它
	//该eslint-plugin-前缀可以从插件名称被省略
	"plugins": [
		"vue",
		"@typescript-eslint"
	],
	//eslint规则
	"rules": {
   
	}
}

安装 vue3 环境代码校验插件

# 让所有与prettier规则存在冲突的Eslint rules失效，并使用prettier进行代码检查
"eslint-config-prettier": "^8.6.0",
"eslint-plugin-import": "^2.27.5",
"eslint-plugin-node": "^11.1.0",
# 运行更漂亮的Eslint，使prettier规则优先级更高，Eslint优先级低
"eslint-plugin-prettier": "^4.2.1"
# vue.js的Eslint插件（查找vue语法错误，发现错误指令，查找违规风格指南）
"eslint-plugin-vue": "^9.9.0",
# 该解析器允许使用Eslint校验所有babel code
"@babel/eslint-parser": "^7.19.1"

安装指令：

pnpm install -D eslint-plugin-import es