1. 代码规范

1.1. 集成editorconfig配置

EditorConfig 有助于为不同 IDE 编辑器上处理同一项目的多个开发人员维护一致的编码风格。

# http://editorconfig.org

root = true

[*] # 表示所有文件适用
charset = utf-8 # 设置文件字符集为 utf-8
indent_style = space # 缩进风格（tab | space）
indent_size = 2 # 缩进大小
end_of_line = lf # 控制换行类型(lf | cr | crlf)
trim_trailing_whitespace = true # 去除行首的任意空白字符
insert_final_newline = true # 始终在文件末尾插入一个新行

[*.md] # 表示仅 md 文件适用以下规则
max_line_length = off
trim_trailing_whitespace = false
复制代码

VSCode需要安装一个插件：EditorConfig for VS Code

1.2. 使用prettier工具

Prettier 是一款强大的代码格式化工具，支持 JavaScript、TypeScript、CSS、SCSS、Less、JSX、Angular、Vue、GraphQL、JSON、Markdown 等语言，基本上前端能用到的文件格式它都可以搞定，是当下最流行的代码格式化工具。

1.安装prettier

npm install prettier -D
复制代码

2.配置.prettierrc文件：

useTabs：使用tab缩进还是空格缩进，选择false；

tabWidth：tab是空格的情况下，是几个空格，选择2个；

printWidth：当行字符的长度，推荐80，也有人喜欢100或者120；

singleQuote：使用单引号还是双引号，选择true，使用单引号；

trailingComma：在多行输入的尾逗号是否添加，设置为 none；

semi：语句末尾是否要加分号，默认值true，选择false表示不加；

{
  "useTabs": false,
  "tabWidth": 2,
  "printWidth": 80,
  "singleQuote": true,
  "trailingComma": "none",
  "semi": false
}
复制代码

3.创建.prettierignore忽略文件

/dist/*
.local
.output.js
/node_modules/**

**/*.svg
**/*.sh

/public/*
复制代码

4.VSCode需要安装prettier的插件

5.测试prettier是否生效

测试一：在代码中保存代码；

测试二：配置一次性修改的命令；

在package.json中配置一个scripts：

    "prettier": "prettier --write ."
复制代码

1.3. 使用ESLint检测

1.在前面创建项目的时候，我们就选择了ESLint，所以Vue会默认帮助我们配置需要的ESLint环境。

2.VSCode需要安装ESLint插件：

3.解决eslint和prettier冲突的问题：

安装插件：（vue在创建项目时，如果选择prettier，那么这两个插件会自动安装）

npm i eslint-plugin-prettier eslint-config-prettier -D
复制代码

添加prettier插件：

  extends: [
    "plugin:vue/vue3-essential",
    "eslint:recommended",
    "@vue/typescript/recommended",
    "@vue/prettier",
    "@vue/prettier/@typescript-eslint",
    'plugin:prettier/recommended'
  ],
复制代码

1.4. git Husky和eslint

虽然我们已经要求项目使用eslint了，但是不能保证组员提交代码之前都将eslint中的问题解决掉了：

也就是我们希望保证代码仓库中的代码都是符合eslint规范的；

那么我们需要在组员执行 git commit 命令的时候对其进行校验，如果不符合eslint规范，那么自动通过规范进行修复；

那么如何做到这一点呢？可以通过Husky工具：

husky是一个git hook工具，可以帮助我们触发git提交的各个阶段：pre-commit、commit-msg、pre-push

如何使用husky呢？

这里我们可以使用自动配置命令：

npx husky-init && npm install
//&&有问题可以加上引号
npx husky-init "&&" npm install
复制代码

这里会做三件事：

1.安装husky相关的依赖：

2.在项目目录下创建 .husky 文件夹：

npx huksy install
复制代码

3.在package.json中添加一个脚本：

接下来，我们需要去完成一个操作：在进行commit时，执行lint脚本：

这个时候我们执行git commit的时候会自动对代码进行lint校验。

1.5. git commit规范

1. 代码提交风格

通常我们的git commit会按照统一的风格来提交，这样可以快速定位每次提交的内容，方便之后对版本进行控制。

但是如果每次手动来编写这些是比较麻烦的事情，我们可以使用一个工具：Commitizen

Commitizen 是一个帮助我们编写规范 commit message 的工具；

1.安装Commitizen

npm install commitizen -D
复制代码

2.安装cz-conventional-changelog，并且初始化cz-conventional-changelog：

npx commitizen init cz-conventional-changelog --save-dev --save-exact
复制代码

这个命令会帮助我们安装cz-conventional-changelog：

并且在package.json中进行配置：

这个时候我们提交代码需要使用 npx cz：

第一步是选择type，本次更新的类型

Type	作用
feat	新增特性 (feature)
fix	修复 Bug(bug fix)
docs	修改文档 (documentation)
style	代码格式修改(white-space, formatting, missing semi colons, etc)
refactor	代码重构(refactor)
perf	改善性能(A code change that improves performance)
test	测试(when adding missing tests)
build	变更项目构建或外部依赖（例如 scopes: webpack、gulp、npm 等）
ci	更改持续集成软件的配置文件和 package 中的 scripts 命令，例如 scopes: Travis, Circle 等
chore	变更构建流程或辅助工具(比如更改测试环境)
revert	代码回退

第二步选择本次修改的范围（作用域）

第三步选择提交的信息

第四步提交详细的描述信息

第五步是否是一次重大的更改

第六步是否影响某个open issue

我们也可以在scripts中构建一个命令来执行 cz：

2. 代码提交验证

如果我们按照cz来规范了提交风格，但是依然有同事通过 git commit 按照不规范的格式提交应该怎么办呢？

我们可以通过commitlint来限制提交；

1.安装 @commitlint/config-conventional 和 @commitlint/cli

npm i @commitlint/config-conventional @commitlint/cli -D
复制代码

2.在根目录创建commitlint.config.js文件，配置commitlint

module.exports = {
  extends: ['@commitlint/config-conventional']
}
复制代码

3.使用husky生成commit-msg文件，验证提交信息：

npx husky add .husky/commit-msg "npx --no-install commitlint --edit $1"
复制代码

2. 库集成

2.1. vue-router集成

安装vue-router的最新版本：

npm install vue-router@next
复制代码

创建router对象：

import { createRouter, createWebHashHistory } from 'vue-router'
import { RouteRecordRaw } from 'vue-router'

const routes: RouteRecordRaw[] = [
  {
    path: '/',
    redirect: '/main'
  },
  {
    path: '/main',
    component: () => import('../views/main/main.vue')
  },
  {
    path: '/login',
    component: () => import('../views/login/login.vue')
  }
]

const router = createRouter({
  routes,
  history: createWebHashHistory()
})

export default router
复制代码

安装router：

import router from './router'

createApp(App).use(router).mount('#app')
复制代码

在App.vue中配置跳转：

<template>
  <div id="app">
    <router-link to="/login">登录</router-link>
    <router-link to="/main">首页</router-link>
    <router-view></router-view>
  </div>
</template>
复制代码

2.2. vuex集成

安装vuex：

npm install vuex@next
复制代码

创建store对象：

import { createStore } from 'vuex'

const store = createStore({
  state() {
    return {
      name: 'coderwhy'
    }
  }
})

export default store
复制代码

安装store：

createApp(App).use(router).use(store).mount('#app')
复制代码

在App.vue中使用：

<h2>{{ $store.state.name }}</h2>
复制代码

2.3. element-plus集成

Element Plus，一套为开发者、设计师和产品经理准备的基于 Vue 3.0 的桌面端组件库：

它的使用方式和很多其他的组件库是一样的，所以学会element-plus，其他类似于ant-design-vue、NaiveUI、VantUI都是差不多的；

安装element-plus

npm install element-plus --save
复制代码

1. 完整引入

如果你对打包后的文件大小不是很在乎，那么使用完整导入会更方便。

// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'  //引入这个和下面的样式
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')
复制代码

2. 按需引入

首先你需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件

npm install -D unplugin-vue-components unplugin-auto-import
复制代码

在vite中

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default {
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
}
复制代码

在webpack中

const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')

module.exports = {
  // ...
  plugins: [
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
}
复制代码

通过以上步骤即可随用随加载对应组件。

2.4. axios集成

安装axios：

npm install axios
复制代码

封装axios：

import axios from 'axios'
import QS from 'qs' //用于序列化body内容，后端有配置可以不用这个库
import { ElLoading, ElMessage } from 'element-plus' //用于请求成功与否的弹框提醒和等待
import store from '@/store'
import router from '@/router'

//可以通过下面这个来获取vite中的环境是开发环境还是生产环境
//let { VITE_NORMALURL: normalUrl, MODE } = import.meta.env
//console.log('vite', import.meta.env)

//如果为开发模式
//let baseURL = MODE == 'development' ? String(normalUrl) : String(normalUrl)
let baseURL ='http://localhost:3000/'
const instance = axios.create({
  baseURL, //基础url
  timeout: 30000, //请求超时时间
})

// 请求拦截器
instance.interceptors.request.use(
  (config) => {
    /* 
    *将token放在请求头里就不需要每次都手动添加token。
    *即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断。
    */
    //const token = store.state.token;
    //token && (config.headers.Authorization = token);

    //如果公司的token是直接放在请求参数里面的，那么可以使用以下的配置
    let token = store.state.token
    if (token) {
      if (config.params) {
        config.params.token = token
      } else {
        config.params = {
          token,
        }
      }
    }
    return config
  },
  (error) => {
    return Promise.error(error)
  }
)

// 响应拦截器
instance.interceptors.response.use(
  (response) => {
    if (response.status === 200) {
      return Promise.resolve(response)
    } else {
      return Promise.reject(response)
    }
  },
  // 服务器状态码不是200的情况
  (error) => {
    if (error.response.status) {
      switch (error.response.status) {
        //无权限，直接回到登录页
        case 401:
          ElMessage({
            message: '登录过期，请重新登录',
            type: 'error',
          })
          // 清除token
          store.commit('setUserInfo', { token: '' })
          // 跳转登录页面，并将要浏览的页面fullPath传过去，登录成功后跳转需要访问的页面
          setTimeout(() => {
            router.replace({
              path: '/',
              query: {
                redirect: router.currentRoute.fullPath,
              },
            })
          }, 1000)
          break
        // 404请求不存在
        case 404:
          ElMessage({
            message: '网络请求不存在',
            type: 'error',
          })
          break
        // 其他错误，直接抛出错误提示
        default:
          ElMessage({
            message: error.response.data.message,
            type: 'error',
          })
      }
      return Promise.reject(error.response)
    }
  }
)

/**
 * get方法，对应get请求
 * @param {String} url [请求的url地址]
 * @param {Object} params [请求时携带的参数]
 */
export function get(url, params) {
  return new Promise((resolve, reject) => {
    instance
      .get(url, {
        params: params,
      })
      .then((res) => {
        resolve(res.data)
      })
      .catch((err) => {
        reject(err.data)
      })
  })
}
/**
 * post方法，对应post请求
 * @param {String} url [请求的url地址]
 * @param {Object} params [请求时携带的参数]
 */
export function post(url, params) {
  return new Promise((resolve, reject) => {
    instance
      .post(url, QS.stringify(params))
      .then((res) => {
        resolve(res.data)
      })
      .catch((err) => {
        reject(err.data)
      })
  })
}

export { instance }
复制代码

2.5 normalize.css集成

作用：

保护有用的浏览器样式而不是去掉他们。
为大部分HTML元素提供一般化的样式。
修复浏览器自身的bug并保证各浏览器的一致性。
优化css可用性。
用注释和详细的文档来解释代码。
Normalize支持包括手机浏览器在内的超多浏览器，同时对HTML5元素、排版、列表、嵌入的内容、表单和表格都进行了一般化。

安装：

npm install --save normalize.css 
复制代码

main.js中引入

import 'normalize.css/normalize.css'
复制代码

3.vue.config.js配置

vue.config.js有三种配置方式：

方式一：直接通过CLI提供给我们的选项来配置：

- 比如publicPath：配置应用程序部署的子目录（默认是 /，相当于部署在 https://www.my-app.com/）；

- 比如outputDir：修改输出的文件夹；

方式二：通过configureWebpack修改webpack的配置：

- 可以是一个对象，直接会被合并；

- 可以是一个函数，会接收一个config，可以通过config来修改配置；

方式三：通过chainWebpack修改webpack的配置：

- 是一个函数，会接收一个基于 webpack-chain 的config对象，可以对配置进行修改；

const path = require('path')

module.exports = {
  outputDir: './build',
  // configureWebpack: {
  //   resolve: {
  //     alias: {
  //       views: '@/views'
  //     }
  //   }
  // }
  // configureWebpack: (config) => {
  //   config.resolve.alias = {
  //     '@': path.resolve(__dirname, 'src'),
  //     views: '@/views'
  //   }
  // },
  //配置跨域代理
  devServer: {
   proxy: {
   	//如果地址以/api开头 就请求到这个地址
     '/api' :{
     	target: 'http://111.11.111.111',
      changeOrigin:true,
      pathRewrite: {
      	'^/api':'' //请求的时候/api就会替换成''
      }
     }
   } 
  }
  chainWebpack: (config) => {
    config.resolve.alias.set('@', path.resolve(__dirname, 'src')).set('views', '@/views')
  }
}
复制代码

同时在axios的baseURL里将其设置为/api即可

Proxy跨域处理

① devServer.proxy 提供的代理功能，仅在开发调试阶段生效

② 项目上线发布时，依旧需要 API 接口服务器开启 CORS 跨域资源共享

vite创建项目的vite.config.js配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
//自动导入elementui
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
  alias: {//别名配置
    '@': '/src/',
    '@components': '/src/components/',
    '@assets': '/src/assets/',
  },
})
复制代码

4.VSCode

4.1. VSCode配置

{
  "eslint.migration.2_x": "off",
  "editor.fontSize": 16,
  "editor.tabSize": 2,
  "editor.formatOnPaste": true,
  "terminal.integrated.fontSize": 14,
  "editor.renderWhitespace": "all",
  "debug.console.fontSize": 15,
  "window.zoomLevel": 1,
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "workbench.tree.indent": 16,
  "javascript.updateImportsOnFileMove.enabled": "always",
  "editor.smoothScrolling": true,
  "vetur.completion.autoImport": false,
  "security.workspace.trust.untrustedFiles": "open",
  // 100 列后换行
  "editor.wordWrapColumn": 100,
  // prettier 设置强制单引号
  "prettier.singleQuote": true,
  // prettier 设置语句末尾加分号
  "prettier.semi": false,
  //指定每行代码的最佳长度
  "prettier.printWidth": 90,
  "editor.quickSuggestions": {
    "strings": true
  },
  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
  },
  "editor.tokenColorCustomizations": {
    "comments": "#408653" // 注释
  },
  "workbench.iconTheme": "material-icon-theme",
  "workbench.colorTheme": "One Dark Pro",
  "editor.fontLigatures": false,
  "oneDarkPro.italic": false,
  "editor.fontFamily": " Consolas,微软雅黑, 'Courier New', monospace,Inconsolata",
  "editor.wordWrap": "on",
  "workbench.sideBar.location": "left",
  "eslint.lintTask.enable": true,
  "eslint.alwaysShowStatus": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "vetur.ignoreProjectWarning": true,
  "px2vw.width": 375,
  "cssrem.rootFontSize": 13,
  "editor.suggest.preview": true
}
复制代码

配置同步插件：