# zhufeng-vue3-system2105

**Repository Path**: wenduhary/zhufeng-vue3-system2105

## Basic Information

- **Project Name**: zhufeng-vue3-system2105
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 76
- **Created**: 2021-05-22
- **Last Updated**: 2021-05-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### Vue3 后台系统开发

#### 第一章节 - 项目配置

- 项目规范配置

> git commit -m <type>(<scope>?): <subject>

commitlint配置

安装：`npm install --save-dev @commitlint/config-conventional  @commitlint/cli`;
        
项目目录下创建commitlint.config.js 配置如下:
```js
module.exports = {
  extends: ['@commitlint/config-conventional']
}
```

安装lint-stage husky (配合commitlint使用)`npm i -D lint-staged``npm i husky -D`
```js
# 激活开启 husky 执行完会看到根目录下生成.husky文件夹 里面会保存husky add增加的hook文件
npx husky install

# 用husky添加一个commit-msg hook 代码提交时用来执行 commitlint命令
# yarn husky add 文件路径 写入命令内容 
yarn husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'

# 再添加一个pre-commit hook 代码提交时 用来执行lint-staged命令
yarn husky add .husky/pre-commit 'npx --no-install lint-staged'

# 如果仓库没有初始化，需要先执行git init;
```

package.json添加如下内容
```js
{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged",
      "commit-msg": "npx --no-install commitlint --edit $1"
    }
  },
  "lint-staged": {
    "src/**/*.{js,vue,ts}": [
      "vue-cli-service lint"
    ]
  }
}
```

验证配置

`git fail:  git commit -m "提交代码"`

#### commitlint配置成功

```js
# type 类型 feat(项目新功能) fix(修补bug) test(测试) chore(工程配置改动)
# scope 影响范围 比如 src/main
# subject msg简短描述
# type(scope): subject  冒号后面也要有一个空格
git commit -m "chore(config): 添加commitlint和lint-stage配置"
```


### SvgIcon组件开发
>svg-sprite-loader 的插件，用来根据导入的 svg 文件自动生成 symbol 标签并插入 html
- 配置svg-sprite-loader；`npm install svg-sprite-loader -D`

根目录下创建 vue.config.js 配置loader
```js
'use strict'
// eslint-disable-next-line @typescript-eslint/no-var-requires
const path = require('path')

const resolve = dir => path.join(__dirname, dir)

function chainWebpack(config) {
 
  // 在已有的svg loader配置中 排除掉对src/icons里svg进行转换
  config.module
    .rule('svg')
    .exclude.add(resolve('src/icons')) // 排除掉src/icons目录
    .end()
  // svg icon工作原理 https://segmentfault.com/a/1190000015367490
  // 配置svg-sprite-loader
  config.module
    .rule('icons')
    .test(/\.svg$/)
    .include.add(resolve('src/icons')) // 指定src/icons要处理svg的文件目录
    .end()
    .use('svg-sprite-loader')
    .loader('svg-sprite-loader') // 用svg-sprite-loader解析
    .options({
      symbolId: 'icon-[name]' // symbol id命名格式 icon-图标名称
    })
    .end()
}

module.exports = {
  chainWebpack,
  devServer: {
    port: 8080,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    }
  }
}
```
- 利用svgo压缩svg大小；