Vue进阶之Vue3后台系统

目录详解

• .github
  • workflows
    • deploy.yml 一般在公司中没有私网给部署的，通常是gitee和github来部署的，这个文档就是经典的自动化部署的
• .husky
  • pre-commit 代码提交前去处理
• .vscode
  • .extensions.json 推荐安装的配置
  • settings.json 代码的编辑调准
• public 静态资源
• src 更符合国内开发标准
• test 单元测试
• types 全局types
• .editorconfig 编辑器的配置
• .env
• .env.development 根据执行指令去区分
• .env.production
• .env.staging
• .eslintignore
• .eslintrc.cjs
• index.html 默认布局
• package.json
• prettier.config.js

.github

workflows/deploy.yml

这里的workflow是基于git actions去做的，github提供的自动部署的能力 git actions
借助于一台ubuntu服务的机器，安装当前代码运行的环境后，将代码运行到服务器上，这其实就是说的日常去部署的指令，只不过是在云上(线上)做的

name: Build And Deploy vue3-template

on:   # 类似于v-on绑定事件
  push:       # git push指令
    branches:  # 判断分支
      - main  # main分支

# 代码提交到github后会自动执行以下工作内容
jobs: # 定义工作内容
  build-and-deploy: # 构建和部署
    runs-on: ubuntu-latest # 运行环境——github提供的免费部署机器ubuntu
    steps: # 定义步骤 以下内容类似数组的形式
      - name: Checkout
        uses: actions/checkout@v2
        with:
          persist-credentials: false # 在ubuntu机器上运行node所需要的基础的环境

      - name: Setup Node.js 20.15.1 # 安装node@20.12.1
        uses: actions/setup-node@master
        with:
          node-version: 20.15.1

      - name: Setup pnpm  # 安装pnpm
        uses: pnpm/action-setup@v2
        with:
          version: 9.5.0

      - name: Build
        run: pnpm install && pnpm build:prod # 本地代码的执行

      - name: Deploy # 部署借助的是github-pages-deploy-action,通过这个，能够直接加载到当前的steps任务中，然后触发actions节点，通过这个节点就能够进行deploy部署，这些都是封装好了的，只需要告诉在哪个分支上
        uses: JamesIves/github-pages-deploy-action@releases/v3
        with:
          ACCESS_TOKEN: ${
   {
    secrets.GITHUB_TOKEN }}
          BRANCH: gh-pages  
          FOLDER: dist

github-pages-deploy-action

在pages下 —> Build and deployment =>这里就是部署我们的 github pages的，比如说，在github下注册了“xxx”仓库，针对于这个仓库，能够在站点的网址上有“xxx.github.io”这样的内容，就是通过这里Build and deployment，部署的话，就可以选择刚刚代码中部署的分支，然后选择根目录，把我们这样的静态资源（gh-pages分支上打包的产物）部署到 xxx.github.io上。

上述内容等效为：
执行命令：

pnpm run build:prod

将文件内容打包到dist文件下

然后将这个dist放到远程服务器上

.husky

pre-commit

npx lint-staged

在进行git commit之前，会先执行lint-staged校验，还需要在package.json中关联到：
package.json:

"lint-staged": {
     
    "*.{vue,js,jsx,ts,tsx}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.{css,less,scss,html,md}": [
      "prettier --write"
    ],
    "package.json": [
      "prettier --write"
    ]
  },

针对不同的后缀执行prettier 和 eslint，eslint针对的是代码规范去处理的，prettier针对代码的外观和布局的。prettier对应的是prettier.config.js和.prettierignore文件，而eslint对应的是.eslintrc.cjs和.eslintignore文件

public

自己应用中的代码，自己应用中的内容，不建议直接使用public中的文件，这里的public文件一般都是用来存放代码中公用的依赖，而代码中的静态资源建议放到assets下，除了index中引入的全局图片可以放在public中，其他任何情况都不建议放在public中

index.html

<script type="module" src="/src/main.ts"></script>

这里直接引用对应的esmodule，也是在目前浏览器环境下，能够直接当作module的类型去引用。 这里其实是模板化的内容
运行打包之后，是通过vue-router绑定到app节点上。因此这里绑定到src下的main.ts，

tests

测试用例

components/Notify.test.ts

test是借助于 vitest，在package.json中对应着的命令，执行：

pnpm run test

匹配的就是 describe(“Notify”) 和 describe(“NotifyList”) 这两个指令，这里借助的是shallowMount工具类去做的

拓展：所谓的自动化测试，做的事情都是基于当前本地的代码片段/方法执行的函数，针对这些执行的函数去解析渲染

import {
    shallowMount } from "@vue/test-utils"
import {
    describe, expect, it } from "vitest"
import Notify from "@/components/Notify/index.vue"
import NotifyList from "@/components/Notify/NotifyList.vue"

describe("Notify", () => {
   
  it("正常渲染", () => {
   
    const wrapper