「这是我参与2022首次更文挑战的第5天，活动详情查看：2022首次更文挑战」

前言

可能有些看过上一版的小伙伴有些疑惑，这个版本怎么变化这么大，在此解释一下：

是这样的，由于个人习惯原因，想要分类整理本项目，但是移动了main.js文件后却发现webpack会报错

于是在搜寻了一番无果后，遂决定不浪费时间，直接上vite，后端并入前端内

如此一来，可由Node来管理git提交，并且VUE代码和Python代码都在一处，倒也方便管理

新建项目

找到一个喜欢的文件夹，比如我的叫django-vue-element，记得只能有小写字母，数字，下划线和中划线这些内容，因为VUE不允许出现大写字母
然后使用VSCode打开并保存为工作区（这是一个好习惯）

初始化前端环境

确认此时位于根目录下
输入npm install -g cnpm --registry=https://registry.npm.taobao.org安装cnpm，因为国内使用npm速度过慢，注意此命令在PowerShell中会报错
输入npm create vite@latest使用当前文件夹作为前端目录
执行npm install
cnpm i vue@next更新vue版本到最新
cnpm i vue-router@4 vuex@next axios sass安装最新的vue全家桶和scss预编译器
在src下新建py-api文件夹，作为我们的后端环境

本系列后文统一称谓：

django-vue-element 根目录

django-vue-element/src/py-api 后端目录

安装配置python环境

进入后端目录，在终端内输入pipenv --three初始化python环境
此时打开pipfile修改url内容为：https://pypi.tuna.tsinghua.edu.cn/simple这是因为pip的官方镜像速度很慢，所以我们修改为国内的。
输入pipenv install django djangorestframework django-cors-headers pymysql安装对应的python包
此时项目结构如下：

配置项目规范

详情参考后一章节

进入根目录
首先我们先更新一下依赖包：

a. 如图所示，在package.json中鼠标悬浮就可以看到智能提示的最新版本，然后进行更新就可以了。

b. 不过，这个提示不是最新的，但是如果他比package.json里面的版本更新那就更新吧！

c. 记得优先使用npm安装，cnpm可能不好使
因为vite默认没有装eslint和Prettier(我猜的)
所以我们先来安装一下下：

a. cnpm i prettier@latest --save-dev安装Prettier

b. cnpm i eslint@latest --save-dev安装ESLint
ESLint:

a. 执行npx eslint --init初始化eslint的配置文件

如果出现安装报错，那就是你开头刚建完项目时没有npm install别问我怎么知道的，都是血的教训！

b. 此时.eslintrc.js配置如下：需要注意：indent那一项，只有两个值，只能选择tab或者空格个数
Prettier:

a. 在根目录中创建.prettierrc文件，填充内容如下(注意样式要和ESLint配合，不然会起冲突)：
此时Package.json应如下：

剩余配置

删除无用文件

a. 删除components\HelloWorld.vue

b. 修改App.vue内容为：

<script setup lang="ts"></script>

<template>
        <el-button type="primary" size="default">default</el-button>
</template>

<style lang="scss"></style>

安装element-plus

a. npm i element-plus这里使用cnpm可能会报依赖错误

b. npm i unplugin-vue-components unplugin-auto-import安装按需导入的依赖包

c. npm i vite-plugin-style-import --save-dev安装不需引入组件对应CSS文件即可使用css的依赖包

d. 修改vite.config.ts内容如下：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
import styleImport from 'vite-plugin-style-import';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
    styleImport({
      libs: [{
        libraryName: 'element-plus',
        esModule: true,
        // 按需引入 css
        resolveStyle: (name) => {
          return `element-plus/theme-chalk/${name}.css`
        },
      }]
    })
  ]
});

Git规范配置

在package.json中添加：

"lint-staged": {
  "./**/*.{js,vue,ts,html}": [
    "prettier --write",
    "eslint",
    "git add"
  ]
},
"config": {
  "commitizen": {
    "path": "node_modules/cz-customizable"
  },
  "cz-customizable": {
    "config": "cz-config.js"
  }
}

如下图所示：

新建commitlint.config.js文件，写入如下内容：

module.exports = {
        // 继承的规则
        extends: ["@commitlint/config-conventional"],
        parserPreset: {
                headerPattern: /^([0-9a-zA-Z_\u4e00-\u9fa5]*)(?:((.*)))?!?: (.*)$/,
        },
        // 定义规则类型
        rules: {
                // type 类型定义，表示 git 提交的 type 必须在以下类型范围内
                "type-enum": [
                        2,
                        "always",
                        [
                                "新增功能", // 新功能 feature
                                "问题修复", // 修复 bug
                                "文档变更", // 文档注释
                                "代码格式", // 代码格式(不影响代码运行的变动)
                                "代码重构", // 重构(既不增加新功能，也不是修复bug)
                                "性能优化", // 性能优化
                                "测试变更", // 增加测试
                                "工具变更", // 构建过程或辅助工具的变动
                                "代码回退", // 回退
                                "代码打包", // 打包
                        ],
                ],
                // subject 大小写不做校验
                "subject-case": [0],
                "type-case": [0],
        },
};

新建cz-config.js文件，写入如下内容：

module.exports = {
        // 可选类型
        types: [
                { value: "新增功能", name: "新增功能" },
                { value: "问题修复", name: "问题修复" },
                { value: "文档变更", name: "文档变更" },
                {
                        value: "代码格式",
                        name: "代码格式或注释的变动(不影响代码运行的变动)",
                },
                {
                        value: "代码重构",
                        name: "代码重构(一般会增加BUG~)",
                },
                { value: "性能优化", name: "性能优化" },
                { value: "测试变更", name: "增加或删除测试" },
                { value: "工具变更", name: "构建过程或辅助工具的变动" },
                { value: "代码回退", name: "回退" },
                { value: "代码打包", name: "打包" },
        ],
        // 消息步骤
        messages: {
                type: "请选择提交类型:",
                customScope: "请输入修改范围(/为项目根目录):",
                subject: "请简要描述提交(必填):",
                body: "请输入详细描述(可选):",
                footer: "请输入要关闭的issue(可选):",
                confirmCommit: "确认使用以上信息提交？(y/n/e/h)",
        },
        // subject文字长度默认是72
        subjectLimit: 72,
};

安装相关依赖包：

a. cnpm i -g commitizen@4.2.4 husky@7.0.1

b. cnpm i --save-dev cz-customizable@6.3.0 @commitlint/config-conventional@12.1.4 @commitlint/cli@12.1.4
进入node_modules\conventional-changelog-angular\parser-opts.js文件，修改headerPattern的值为：/^([0-9a-zA-Z_\u4e00-\u9fa5]*)(?:((.*)))?!?: (.*)$/

a. 此处有疑惑请参考后文【Django REST】番外：关于修改commitlint使其支持中文Type的方案
执行git init初始化Git
执行npx husky install初始化husky
执行npm set-script prepare "husky install"添加npm命令(好像不添加应该也行)
执行npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'添加commit-msg的Git钩子

a. 如果报错：

请使用PowerShell执行
执行npx husky add .husky/pre-commit "npx lint-staged"添加pre-commit的Git钩子
执行git cz查看是否成功配置：

a. 首先执行git add .暂存所有文件

b. 记得添加如下内容到.gitignore内：
```
package-lock.json
Pipfile.lock
.idea
.vscode
# Log files
npm-debug.log*
```
c. 使用git status查看暂存区的文件，此时应该如下：

d. 执行git cz此时结果应该如下：