vite企业级前端框架搭建

1.使用vite脚手架初始化项目 cn.vitejs.dev/guide

vite版本暂时用4.2.1

pnpm create vite@latest 

输入选项

? Project name: 我的工程
Package Name:
selecte a framework: vue
select a variant: javascript|Typescript

按照提示切换目录安装并启动项目

cd 我的工程
pnpm install
pnpm dev

修改vite.config.ts 修改端口自启动浏览器

server: {
      port: 4000,
      proxy: {
        // 选项写法
        '/api': {
          target: 'http://127.0.0.1:8000',
          changeOrigin: true,
          rewrite: path => path.replace(/^/api/, '')
        }
      },
      hmr: {
        overlay: false
      },
      host: '0.0.0.0',
      open:true
    },

2.代码加入eslint校验与自动格式化

最新参照element-plus-admin

• eslint eslint的核心代码库
• eslint-config-prettier eslint结合prettier的格式化
• eslint-define-config
• eslint-plugin-prettier将pretter结合进eslint插件
• eslint-plugin-vueeslint 在vue里的代码规范
• prettier prettier格式化代码的核心库

pnpm add eslint prettier eslint-config-prettier eslint-define-config eslint-plugin-prettier eslint-plugin-vue eslint-config-prettier

暂时不用下面的

pnpm add eslint eslint-plugin-vue eslint-config-prettier prettier eslint-plugin-import eslint-plugin-prettier eslint-config-airbab-base -D
eslint:eslint的核心代码库
prettier:prettier格式化代码的核心库
eslint-config-airban-base:airban的代码规范（依赖plugin-import）
eslint-config-prettier:eslint结合prettier的格式化
eslint-plugin-vue:eslint 在vue里的代码规范
eslint-plugin-import:项目里支持eslint
eslint-plugin-prettier:将pretter结合进eslint插件

配置script脚本，项目安装eslint配置

"lint:create":"eslint --init"

执行命令

npm run lint:create

会自动创建一个.eslintrc.cjs文件

安装完成以后，后面启动项目还缺一些依赖，提前按需安装好

• @typescript-eslint/eslint-plugin 这是一个eslint插件，包含了各类定义好的检测typescript代码规范
• @typescript-eslint/parser eslint解析器，用于解析typescript,从而检查和规范typescript代码
• @types/node

pnpm add @typescript-eslint/eslint-plugin @typescript-eslint/parser @types/node -D

暂时不用下面的

pnpm install typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-import-resolver-alias @types/eslint @types/node -D
@typescript-eslint/parser:eslint解析器，用于解析typescript,从而检查和规范typescript代码
@typescript-eslint/eslint-plugin：这是一个eslint插件，包含了各类定义好的检测typescript代码规范
eslint-import-resolver-alias：让我们可以import的时候使用别名 类@

## eslintrc文件的修改

暂时按element-plus-admin中的

暂时不用下面的

module.exports = {
//环境 浏览器，最新的es语法，node环境
    "env": {
        "browser": true,
        "es2021": true,
        "node": true
    },
    //扩展的eslint规范语法，可以被继承的规则，字符串数组：每个配置继承他前面的配置
    // 分别是 eslint-plugin-vue提供的
    //  eslint-config-airbnb-base
    // eslint-config-prettier
    // eslint-config-前缀可以缩写
    // https://eslint.vue.org/rules/valid-v-if.html
    "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended",
        "plugin:vue/vue3-essential"
    ],
    "overrides": [
        {
            "env": {
                "node": true
            },
            "files": [
                ".eslintrc.{js,cjs}"
            ],
            "parserOptions": {
                "sourceType": "script"
            }
        }
    ],
    //eslint 会对我们的代码进行校验，而parser的作用是将我们写的代码转换成Estree(AST),eslint会队Estree进行校验 vue-eslint-parser
    "parser":"vue-eslint-parser",
    "parserOptions": {
        // es的版本号
        "ecmaVersion": "latest",
        "parser": "@typescript-eslint/parser",
        // 源码类型默认是script es模块使用module
        "sourceType": "module"
        // 额外的语言类型
        ecmaFeature:{}
    },
    // 全局自定义的宏，这样在源文件使用全局变量就不会报错或警告
    globals:{
        defineProps:"readonly",
        defineEmits:"readonly",
        defineExpose:"readonly",
        withDefaults:"readonly",
    },
    // 插件
    // 前缀eslint-plugin-可以省略
    // vue官方提供了一个eslint插件eslint-plugin-vue,它提供了parser和rules,parser为vue-eslint-parser,放在上面的parser字段里，rules放在extands字段里，选择合适的规则
    "plugins": [
        "@typescript-eslint",
        "vue"
    ],
    setting:{
        // 设置项目内的别名
        'import/resolver':{
            alias:{
                map:[['@','./src']]
            }
        }
    },
    // 自定义规则，覆盖上面extends继承的第三方库的规则，根据组内成员灵活定义
    "rules": {
    }
}

修改package.json文件添加一个脚本命令

"lint:eslint": "eslint --fix --ext .js,.ts,.vue ./src"

暂时不用下面的

"lint":"eslint "src/**/*.{js,vue,ts}" --fix"

4.修改vite.config.ts

• vite-plugin-eslint vite 的一个插件，让项目方便的得到eslint支持，完成eslint配置后，可以快速的将其集成到vite中，便于代码在不符合eslit规范的第一时间看到提示

pnpm add vite-plugin-eslint -D
import eslintPlugin from 'vite-plugin-eslint'
plugins:[vue(),eslintPlugin()]

5.修改添加常见的配置文件

外部新建 .eslintignore prettier.config.js .prettierignore

统一格式化命令 在package.json中添加脚本

 "lint:format": "prettier --write --loglevel warn \"src/**/*.{js,ts,json,tsx,css,less,vue,html,md}\"",

暂时不用下面的

外部新建 .eslintrcignore .prettierrc.cjs .prettierignore

"prettier-format":"prettier --config .prettier.cjs  "src/**/*.{vue,js,ts}" --write"

6.Husky、lint-staged、commitlint 功能添加

可以让我们在如 git commit、git push执行前预先处理我们的任务

• lint-staged
• husky

pnpm add lint-staged husky -D

配置package.json文件 -- （新项目需要先git init一下）【因为这是操作git的】

"prepare": "husky install"
pnpm run prepare --将husky安装完毕

后面我们就开始用各种git hook钩子

• pre-commit钩子一般是lint-stage对git暂存区代码做一些格式化操作

npx husky add .husky/pre-commit 'npx lint-staged'
add 追加
set 直接覆盖

lint-staged 对add之后，暂存区里面的文件进行格式化修复等工作

"lint-staged":{
    "*.{js,jsx,vue,ts,tsx}":[
    "npm run lint","npm run prettier-format"
    ]
}

package.json文件中添加两个脚本命令

"lint:eslint": "eslint --fix --ext .js,.ts,.vue ./src",
    "lint:format": "prettier --write --loglevel warn \"src/**/*.{js,ts,json,tsx,css,less,vue,html,md}\"",

以下的不用了

"lint":"eslint "src/**/*.{js,vue,ts}" --fix"
"prettier:format":"prettier --config .prettier.cjs  "src/**/*.{vue,js,ts}" --write" //利用prettier手动格式化一些样式

针对git提交注释说明进行规范化commitlint

• @commitlint/config-conventional
• @commitlint/cli

pnpm add @commitlint/config-conventional @commitlint/cli -D

安装两个库，然后新建commitlint.config文件

添加到git钩子里

npx husky add .husky/commit-msg "npx --no --commitlint --edit ${1}" //通过一个命令添加钩子

新建 commitlint.config.js 拷贝element-plus-admin中的

module.exports = {
  extends: ['@commitlint/config-conventional'],
  rules: {
    'type-enum': [
      2,
      'always',
      [
        'feat', // 新功能(feature)
        'fix', // 修补bug
        'docs', // 文档(documentation)
        'style', // 格式、样式(不影响代码运行的变动)
        'refactor', // 重构(即不是新增功能，也不是修改BUG的代码)
        'perf', // 优化相关，比如提升性能、体验
        'test', // 添加测试
        'ci', // 持续集成修改
        'chore', // 构建过程或辅助工具的变动
        'revert', // 回滚到上一个版本
        'workflow', // 工作流改进
        'mod', // 不确定分类的修改
        'wip', // 开发中
        'types', // 类型修改
        'release' // 版本发布
      ]
    ],
    'subject-full-stop': [0, 'never'],
    'subject-case': [0, 'never']
  }
}

常用的git hooks

• pre-commit 由git commit调用，在commit之前执行
• commit-msg 由git commit 或者git merge调用
• pre-merge-commit 由git merge调用在merge之前
• pre-push 由git push 调用 在git push前执行，防止进行推送

7.styleline 钩子

1.安装vscode插件 styleline插件 2.修改settings.json, 添加以下配置

 "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "styleline.validate":["css","scss","lesss","vue"]

3.安装需要的校验库

• stylelint
• stylelint-config-standard
• stylelint-config-html
• stylelint-config-prettier
• stylelint-config-recommended
• stylelint-order

pnpm add stylelint stylelint-config-standard stylelint-config-html stylelint-config-prettier stylelint-config-recommended stylelint-order -D

4.根目录建立 stylelint.config.js 拷贝element-admin-plus // 这是一个标准样式库 也可以自定义一些样式规则 5.执行 npx styleline "**/*.css"

6.针对vue文件里面的样式支持（附带less和scss的支持） 前面安装过了 以下略过 pnpm add styleline-less styleline-config-recomented-less -D pnpm add styleline-scss styleline-config-recomented-scss postcss -D pnpm add postcss-html postcss styleline-config-standard-less styleline-config-recomented-vue -D vite同时也提供了队.scss,.sass,.less,.styl和。stylus的内置支持，不需要再安装特定的插件和预处理器 extends:[ "styleline-config-standard", "styleline-config-recomented-less", "styleline-config-recomented-scss", "styleline-config-recomented-vue" ]

7.packege.json中添加

"lint:style": "stylelint --fix \"**/*.{vue,less,postcss,css,scss}\" --cache --cache-location node_modules/.cache/stylelint/"

8.探索者stylelint 提交不过没有装postcss

• postcss
• postcss-html
• postcss-less

pnpm add postcss postcss-html postcss-less -D

6.配置vite-plugin-mock

安装

• axios
• mockjs
• vite-plugin-mock v2.9.6

pnpm add axios mockjs
pnpm add vite-plugin-mock -D

在vite.config.ts中配置

import { viteMockServe } from 'vite-plugin-mock'
在plugins中引入

viteMockServe({
    mockPath: "./src/mock/",//mock文件夹的路径
    watchFiles: true,
    enable: true,
    logger: true
})

配置的文件夹在src下的mock所以在src下新建mock文件夹新增index.ts

import { MockMethod } from 'vite-plugin-mock'
const Mock = require('mockjs')
export default [
  {
    url: '/api/getUserInfo',
    method: 'post',
    response: ({}) => {
      return {
        code: 200,
        data: {
          nickname: '@cname',
          age: '@integer(10-100)',
          uid: '@id',
          url: '@image',
          city: '@city',
          country: '@county(true)',
          province: '@province',
          mobile_phone: '@phone',
          email: '@email',
          region: '@region',
          menus: [
            {
              menu_name: '一级导航',
              id: '@id',
              code: 'Nav1',
              children: [
                {
                  code: 'about',
                  menu_url: 'views/about',
                  access_permissions: '["about"]',
                  children: [],
                  menu_name: '测试1',
                  id: '@id'
                },
                {
                  code: 'home',
                  menu_url: 'views/home',
                  access_permissions: '["home"]',
                  children: [],
                  menu_name: '测试2',
                  id: '@id'
                }
              ]
            }
          ]
        }
      }
    }
  }
] as MockMethod[]

6.配置vite-alias

resolve: {
    alias: {
      '@/': new URL('./src/', import.meta.url).pathname
    }
  },

7.安装其他核心

• less
• pinia
• vue-router

pnpm add less
pnpm add pinia
pnpm add vue-router