二.硅谷甄选运营平台-搭建后台管理系统模板

2.1项目初始化

今天来带大家从0开始搭建一个vue3版本的后台管理系统。一个项目要有统一的规范，需要使用eslint+stylelint+prettier来对我们的代码质量做检测和修复，需要使用husky来做commit拦截，需要使用commitlint来统一提交规范，需要使用preinstall来统一包管理工具。

下面我们就用这一套规范来初始化我们的项目，集成一个规范的模版。

2.1.1环境准备

• node v16.14.2

• pnpm 8.0.0

2.1.2初始化项目

本项目使用vite进行构建，vite官方中文文档参考：cn.vitejs.dev/guide/

pnpm:performant npm ，意味“高性能的 npm”。pnpm由npm/yarn衍生而来，解决了npm/yarn内部潜在的bug，极大的优化了性能，扩展了使用场景。被誉为“最先进的包管理工具”

pnpm安装指令

npm i -g pnpm

项目初始化命令:

pnpm create vite

进入到项目根目录pnpm install或者pnpm i安装全部依赖.安装完依赖运行程序:pnpm run dev

运行完毕项目跑在http://127.0.0.1:5173/,可以访问你得项目啦

2.2项目配置

一、eslint配置

eslint中文官网:ESLint - Pluggable JavaScript linter - ESLint中文

ESLint最初是由Nicholas C. Zakas 于2013年6月创建的开源项目。它的目标是提供一个插件化的javascript代码检测工具

1.首先安装eslint

pnpm i eslint -D

 2.生成配置文件:.eslintrc.cjs(出错未解决自己新建)

npx eslint --init

.eslintrc.cjs配置文件  

module.exports = {
   //运行环境
    "env": { 
        "browser": true,//浏览器端
        "es2021": true,//es2021
    },
    //规则继承
    "extends": [ 
       //全部规则默认是关闭的,这个配置项开启推荐规则,推荐规则参照文档
       //比如:函数不能重名、对象不能出现重复key
        "eslint:recommended",
        //vue3语法规则
        "plugin:vue/vue3-ess