[Projet Vue3+TS] Jour de sélection de la Silicon Valley02--construction du modèle de système de gestion d'arrière-plan/configuration du projet

1 Initialisation du projet

Un projet doit avoir une spécification unifiée, nous devons utiliser eslint+stylelint+prettier pour détecter et réparer la qualité de notre code , nous devons utiliser husky pour effectuer l'interception de validation , nous devons utiliser commitlint pour unifier la spécification de soumission, nous devons utiliser préinstaller pour unifier les outils de gestion des packages .

1.1 Préparation de l'environnement

• nœud v16.14.2

• pnpm 8.0.0

1.2 Initialiser le projet

Ce projet utilise vite pour construire, vite la référence officielle du document chinois : cn.vitejs.dev/guide/

pnpm : npm performant, signifiant « npm performant ». Dérivé de npm/yarn, pnpm résout les bogues potentiels dans npm/yarn, optimise considérablement les performances et élargit les scénarios d'utilisation. Considéré comme "l'outil de gestion de packages le plus avancé"

instructions d'installation de pnpm :

npm i -g pnpm

Commande d'initialisation du projet :

pnpm create vite

Entrez dans le répertoire racine du projet pnpm install pour installer toutes les dépendances et exécutez le programme après avoir installé les dépendances : pnpm run dev

Après l'exécution, le projet s'exécute à http://127.0.0.1:5173/ , vous pouvez visiter votre projet

Problèmes pouvant survenir

 Impossible de trouver le module './App.vue' ou ses déclarations de type correspondantes

Raison de l'erreur : le script dactylographié ne peut comprendre que les fichiers .ts, mais pas les fichiers .vue

Solution 1 : Installez le plugin volar , entrez volar, il y a plusieurs extensions, celle qui fonctionne est Typescript Vue Plugin (Volar)

Avant que vscode ne détecte vue3, il recommandait automatiquement d'installer la fonctionnalité Vue Language (Volar), mais il renvoyait une erreur de type. Il est officiellement recommandé de désactiver Vetur lors de son utilisation pour éviter les conflits.

Solution 2 : après avoir créé le projet vite, il y aura un fichier "env.d.ts" dans le répertoire racine du projet, recherchez le fichier et ajoutez-y du code

declare module "*.vue" {
  import { DefineComponent } from "vue"
  const component: DefineComponent<{}, {}, any>
  export default component
}

Petite astuce : Le navigateur s'ouvre automatiquement pour gagner en efficacité :

Ajouter au fichier package.json--open

"scripts": {
  "dev": "vite --open",
  "build": "vue-tsc && vite build",
  "preview": "vite preview"
},

J'ai trouvé que cela ne fonctionnait pas. . . . (Vous pouvez vous référer à la configuration du navigateur d'ouverture automatique de mon projet Vue2)

2 configuration de projet

Un, configuration eslint

Site officiel chinois d'eslint : ESLint - Pluggable JavaScript linter - ESLint Chinese

ESLint était à l'origine un projet open source créé par  Nicholas C. Zakas en juin 2013. Son objectif est de fournir un outil de détection de code javascript plug-in

Installez d'abord eslint

pnpm i eslint -D

Générer le fichier de configuration : .eslint.cjs

npx eslint --init

fichier de configuration .eslint.cjs

module.exports = {
   // 运行环境
    "env": { 
        "browser": true,// 浏览器端
        "es2021": true,// es2021
    },
    //规则继承
    "extends": [ 
       //全部规则默认是关闭的,这个配置项开启推荐规则,推荐规则参照文档
       //比如:函数不能重名、对象不能出现重复key
        "eslint:recommended",
        //vue3语法规则
        "plugin:vue/vue3-essential",
        //ts语法规则
        "plugin:@typescript-eslint/recommended"
    ],
    //要为特定类型的文件指定处理器
    "overrides": [
    ],
    //指定解析器:解析器
    //Esprima 默认解析器
    //Babel-ESLint babel解析器
    //@typescript-eslint/parser ts解析器
    "parser": "@typescript-eslint/parser",
    //指定解析器选项
    "parserOptions": {
        "ecmaVersion": "latest",//校验ECMA最新版本
        "sourceType": "module"//设置为"script"（默认），或者"module"代码在ECMAScript模块中
    },
    //ESLint支持使用第三方插件。在使用插件之前，您必须使用npm安装它
    //该eslint-plugin-前缀可以从插件名称被省略
    "plugins": [
        "vue",
        "@typescript-eslint"
    ],
    //eslint规则--最重要，需要看官网配置
    "rules": {
    }
}

1.1 Plug-in de vérification du code d'environnement Vue3

# 让所有与prettier规则存在冲突的Eslint rules失效，并使用prettier进行代码检查
"eslint-config-prettier": "^8.6.0",
"eslint-plugin-import": "^2.27.5",
"eslint-plugin-node": "^11.1.0",
# 运行更漂亮的Eslint，使prettier规则优先级更高，Eslint优先级低
"eslint-plugin-prettier": "^4.2.1",
# vue.js的Eslint插件（查找vue语法错误，发现错误指令，查找违规风格指南
"eslint-plugin-vue": "^9.9.0",
# 该解析器允许使用Eslint校验所有babel code
"@babel/eslint-parser": "^7.19.1",

instructions d'installation

pnpm install -D eslint-plugin-import eslint-plugin-vue eslint-plugin-node eslint-plugin-prettier eslint-config-prettier eslint-plugin-node @babel/eslint-parser

1.2 Modifier le fichier de configuration .eslintrc.cjs

// @see https://eslint.bootcss.com/docs/rules/
​
module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
    jest: true,
  },
  /* 指定如何解析语法 */
  parser: 'vue-eslint-parser',
  /** 优先级低于 parse 的语法解析配置 */
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    parser: '@typescript-eslint/parser',
    jsxPragma: 'React',
    ecmaFeatures: {
      jsx: true,
    },
  },
  /* 继承已有的规则 */
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-essential',
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended',
  ],
  plugins: ['vue', '@typescript-eslint'],
  /*
   * "off" 或 0    ==>  关闭规则
   * "warn" 或 1   ==>  打开的规则作为警告（不影响代码执行）
   * "error" 或 2  ==>  规则作为一个错误（代码不能执行，界面报错）
   */
  rules: {
    // eslint（https://eslint.bootcss.com/docs/rules/）
    'no-var': 'error', // 要求使用 let 或 const 而不是 var
    'no-multiple-empty-lines': ['warn', { max: 1 }], // 不允许多个空行
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-unexpected-multiline': 'error', // 禁止空余的多行
    'no-useless-escape': 'off', // 禁止不必要的转义字符
​
    // typeScript (https://typescript-eslint.io/rules)
    '@typescript-eslint/no-unused-vars': 'error', // 禁止定义未使用的变量
    '@typescript-eslint/prefer-ts-expect-error': 'error', // 禁止使用 @ts-ignore
    '@typescript-eslint/no-explicit-any': 'off', // 禁止使用 any 类型
    '@typescript-eslint/no-non-null-assertion': 'off',
    '@typescript-eslint/no-namespace': 'off', // 禁止使用自定义 TypeScript 模块和命名空间。
    '@typescript-eslint/semi': 'off',
​
    // eslint-plugin-vue (https://eslint.vuejs.org/rules/)
    'vue/multi-word-component-names': 'off', // 要求组件名称始终为 “-” 链接的单词
    'vue/script-setup-uses-vars': 'error', // 防止<script setup>使用的变量<template>被标记为未使用
    'vue/no-mutating-props': 'off', // 不允许组件 prop的改变
    'vue/attribute-hyphenation': 'off', // 对模板中的自定义组件强制执行属性命名样式
  },
}

1.3 .eslintignore ignore les fichiers

dist
node_modules

1.4 Exécuter le script

package.json ajoute deux scripts en cours d'exécution

"scripts": {
    "lint": "eslint src", //校验
    "fix": "eslint src --fix", //修复
}

Deux, configurez plus joli

Avec eslint, pourquoi avez-vous besoin de plus joli ? eslint est destiné à javascript, qui est un outil de détection, y compris la syntaxe js et un petit nombre de problèmes de format. Selon eslint, une syntaxe correcte peut garantir le fonctionnement normal du code, et les problèmes de format viennent en second ;

Et plus joli est un outil de formatage . Il ne peut pas comprendre que le format n'est pas uniforme, il continue donc à faire ce qu'eslint n'a pas bien fait. De plus, plus joli prend en charge

Plusieurs langages dont js.

Pour résumer, les deux frères eslint et prettier garantissent la qualité du code js et la beauté du code.

2.1 Installer les packages dépendants

pnpm install -D eslint-plugin-prettier prettier eslint-config-prettier

2.2 Ajouter des règles à .prettierrc.json

{
  "singleQuote": true,
  "semi": false,
  "bracketSpacing": true,
  "htmlWhitespaceSensitivity": "ignore",
  "endOfLine": "auto",
  "trailingComma": "all",
  "tabWidth": 2
}

2.3 .prettierignore ignore les fichiers

/dist/*
/html/*
.local
/node_modules/**
**/*.svg
**/*.sh
/public/*

Utilisez  pnpm run lint pour vérifier la grammaire, s'il y a un format irrégulier, modifiez-le via pnpm run fix

Trois, configurez stylelint

stylelint est un outil de charpie pour css. Il peut formater le code CSS, vérifier les erreurs de syntaxe CSS et l'écriture déraisonnable, spécifier l'ordre d'écriture CSS, etc.

Nous utilisons scss comme préprocesseur dans notre projet et installons les dépendances suivantes :

pnpm add sass sass-loader stylelint postcss postcss-scss postcss-html stylelint-config-prettier stylelint-config-recess-order stylelint-config-recommended-scss stylelint-config-standard stylelint-config-standard-vue stylelint-scss stylelint-order stylelint-config-standard-scss -D

3.1  .stylelintrc.cjsFichier de configuration

Site Web officiel : Accueil | Documentation chinoise Stylelint | Site Web chinois Stylelint

// @see https://stylelint.bootcss.com/
​
module.exports = {
  extends: [
    'stylelint-config-standard', // 配置stylelint拓展插件
    'stylelint-config-html/vue', // 配置 vue 中 template 样式格式化
    'stylelint-config-standard-scss', // 配置stylelint scss插件
    'stylelint-config-recommended-vue/scss', // 配置 vue 中 scss 样式格式化
    'stylelint-config-recess-order', // 配置stylelint css属性书写顺序插件,
    'stylelint-config-prettier', // 配置stylelint和prettier兼容
  ],
  overrides: [
    {
      files: ['**/*.(scss|css|vue|html)'],
      customSyntax: 'postcss-scss',
    },
    {
      files: ['**/*.(html|vue)'],
      customSyntax: 'postcss-html',
    },
  ],
  ignoreFiles: [
    '**/*.js',
    '**/*.jsx',
    '**/*.tsx',
    '**/*.ts',
    '**/*.json',
    '**/*.md',
    '**/*.yaml',
  ],
  /**
   * null  => 关闭该规则
   * always => 必须
   */
  rules: {
    'value-keyword-case': null, // 在 css 中使用 v-bind，不报错
    'no-descending-specificity': null, // 禁止在具有较高优先级的选择器后出现被其覆盖的较低优先级的选择器
    'function-url-quotes': 'always', // 要求或禁止 URL 的引号 "always(必须加上引号)"|"never(没有引号)"
    'no-empty-source': null, // 关闭禁止空源码
    'selector-class-pattern': null, // 关闭强制选择器类名的格式
    'property-no-unknown': null, // 禁止未知的属性(true 为不允许)
    'block-opening-brace-space-before': 'always', //大括号之前必须有一个空格或不能有空白符
    'value-no-vendor-prefix': null, // 关闭 属性值前缀 --webkit-box
    'property-no-vendor-prefix': null, // 关闭 属性前缀 -webkit-mask
    'selector-pseudo-class-no-unknown': [
      // 不允许未知的选择器
      true,
      {
        ignorePseudoClasses: ['global', 'v-deep', 'deep'], // 忽略属性，修改element默认样式的时候能使用到
      },
    ],
  },
}

3.2 .stylelintignore ignore les fichiers

/node_modules/*
/dist/*
/html/*
/public/*

3.3 Exécution du script

"scripts": {
    "lint:style": "stylelint src/**/*.{css,scss,vue} --cache --fix"
}

Enfin configurer un plus joli unifié pour formater notre code js et css, html

 "scripts": {
    "dev": "vite --open",
    "build": "vue-tsc && vite build",
    "preview": "vite preview",
    "lint": "eslint src",
    "fix": "eslint src --fix",
    -"format": "prettier --write \"./**/*.{html,vue,ts,js,json,md}\"",
    -"lint:eslint": "eslint src/**/*.{ts,vue} --cache --fix",
    -"lint:style": "stylelint src/**/*.{css,scss,vue} --cache --fix"
  },

Lorsque nous exécutons pnpm run format , le code sera formaté directement

Selon ma compréhension, si l'entreprise a un style de code mature dans les futurs projets de travail, nous le configurons en fonction du style de code de l'entreprise, ce qui peut garantir un style unifié et améliorer l'efficacité. Configurez-le pour qu'il soit disponible à vie.

Quatrièmement, configurez husky

Nous avons intégré notre outil de vérification de code ci-dessus, mais nous devons exécuter manuellement la commande à chaque fois pour formater notre code. Si quelqu'un soumet au référentiel distant sans formatage, alors cette spécification est inutile. Nous devons donc forcer les développeurs à soumettre selon les spécifications du code.

Pour ce faire, nous devons utiliser husky pour déclencher le crochet git (le crochet de git côté client) avant que le code ne soit soumis , puis exécuter pnpm run format  pour formater automatiquement notre code.

Installer husky

pnpm install -D husky

mettre en œuvre

Vous devez d'abord initialiser l'entrepôt avec git

npx husky-init

Un répertoire .husky sera généré sous le répertoire racine, et il y aura un fichier de pré-commit sous ce répertoire . Les commandes de ce fichier seront exécutées lorsque nous exécuterons commit

.husky/pre-commitAjoutez la commande suivante au fichier :

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
pnpm run format //关键

Lorsque nous validerons le code, la commande sera exécutée, le code sera formaté, puis soumis.

Cinq, configurez commitlint

Pour nos informations de validation, il existe également une spécification unifiée, qui ne peut pas être écrite par hasard. Pour que tout le monde l'implémente conformément à la norme unifiée, nous pouvons utiliser commitlint pour y parvenir.

Forfait d'installation

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

Ajoutez un fichier de configuration, créez-en un nouveau commitlint.config.cjs(notez qu'il s'agit de cjs), puis ajoutez le code suivant :

module.exports = {
  extends: ['@commitlint/config-conventional'],
  // 校验规则
  rules: {
    'type-enum': [
      2,
      'always',
      [
        'feat',
        'fix',
        'docs',
        'style',
        'refactor',
        'perf',
        'test',
        'chore',
        'revert',
        'build',
      ],
    ],
    'type-case': [0],
    'type-empty': [0],
    'scope-empty': [0],
    'scope-case': [0],
    'subject-full-stop': [0, 'never'],
    'subject-case': [0, 'never'],
    'header-max-length': [0, 'always', 72],
  },
}

package.jsonConfigurez la commande scripts dans

# 在scrips中添加下面的代码
{
"scripts": {
    "commitlint": "commitlint --config commitlint.config.cjs -e -V"
  },
}

La configuration est terminée, maintenant lorsque nous remplissons commitles informations, nous devons apporter les éléments suivantssubject

'feat',//新特性、新功能
'fix',//修改bug
'docs',//文档修改
'style',//代码格式修改, 注意不是 css 修改
'refactor',//代码重构
'perf',//优化相关，比如提升性能、体验
'test',//测试用例修改
'chore',//其他修改, 比如改变构建流程、或者增加依赖库、工具等
'revert',//回滚到上一个版本
'build',//编译相关的修改，例如发布版本、对项目构建或者依赖的改动

configurer husky

npx husky add .husky/commit-msg 

Ajoutez la commande suivante au fichier commit-msg généré

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
pnpm commitlint

Lorsque nous validons les informations de soumission, nous ne pouvons plus les écrire à volonté. Ce doit être git commit -m 'fix: xxx' qui correspond au type. Il convient de noter que le type doit être suivi de English:, et le deux-points doit être vide Une grille, cela ne peut pas être omis

6. Utilisation obligatoire de l'outil de gestion de packages pnpm

Lorsqu'une équipe développe un projet, il est nécessaire d'unifier l'outil de gestion de packages, car différents outils de gestion de packages téléchargent la même dépendance et la version peut être différente.

Cela entraîne des problèmes de bugs dans le projet, donc l'outil de gestion de packages doit être géré de manière uniforme ! ! !

Créez scritps/preinstall.jsun fichier dans le répertoire racine et ajoutez le contenu suivant

if (!/pnpm/.test(process.env.npm_execpath || '')) {
  console.warn(
    `\u001b[33mThis repository must using pnpm as the package manager ` +
    ` for scripts to work properly.\u001b[39m\n`,
  )
  process.exit(1)
}

commande de configuration

"scripts": {
    "preinstall": "node ./scripts/preinstall.js"
}

Lorsque nous utilisons npm ou yarn pour installer des packages, une erreur est signalée. Le principe est que le code contenu dans le fichier preinstall (le life cycle hook fourni par npm) sera déclenché lors de l'installation.

3 Intégration du projet

3.1 Intégration d'element-plus

La Silicon Valley sélectionne la plate-forme d'exploitation et la bibliothèque de composants d'interface utilisateur utilise element-plus , de sorte que le plug-in element-plus doit être intégré ! ! !

Adresse du site Web officiel : Un cadre d'interface utilisateur Vue 3 | Element Plus

@element-plus/icons-vue: est une bibliothèque de composants d'icônes, souvent utilisée

pnpm install element-plus @element-plus/icons-vue

Le fichier d'entrée main.ts installe element-plus globalement, et la langue par défaut prise en charge par element-plus est l'anglais et le chinois

import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css'
//@ts-ignore  忽略当前文件ts类型的检测否则有红色提示(打包会失败)
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
app.use(ElementPlus, {
    locale: zhCn
})

 

La déclaration de type de composant global Element Plus --- peut être ignorée

// tsconfig.json
{
  "compilerOptions": {
    // ...
    "types": ["element-plus/global"]
  }
}

Après la configuration, vous pouvez tester l'utilisation des composants et des icônes element-plus.

3.2 Configuration de l'alias src

Lors du développement d'un projet, la relation entre les fichiers et les fichiers peut être compliquée, nous devons donc configurer un alias pour le dossier src ! ! !

// vite.config.ts
import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
--import path from 'path'
export default defineConfig({
    plugins: [vue()],
    resolve: {
        alias: {
            "@": path.resolve("./src") // 相对路径别名配置，使用 @ 代替 src
        }
    }
})

Configuration de la compilation TypeScript

// tsconfig.json
{
  "compilerOptions": {
    --"baseUrl": "./", // 解析非相对模块的基地址，默认是当前目录
    --"paths": { //路径映射，相对于baseUrl
      "@/*": ["src/*"] 
    }
  }
}

Si les sous-composants introduits dans vue3 ne sont pas utilisés, il peut y avoir une invite de ligne rouge, qui n'affecte pas l'opération. Pour vous en débarrasser, vous pouvez désactiver le plugin Vetur.

3.3 Configuration des variables d'environnement

Au cours du processus de développement du projet, celui-ci passera par au moins trois étapes : environnement de développement , environnement de test et environnement de production (c'est-à-dire environnement formel). L'état de la demande à différentes étapes (telles que l'adresse de l'interface, etc.) n'est pas le même, et il est assez fastidieux et sujet aux erreurs de changer manuellement l'adresse de l'interface. Par conséquent, la nécessité d'une configuration de variable d'environnement est apparue. Nous n'avons qu'à faire une configuration simple et laisser le travail de changement d'état d'environnement au code .

Comme son nom l'indique, l'environnement de développement (développement) est un environnement de développement et d'utilisation. Chaque développeur travaille sur sa propre branche de développement. Lorsque le développement atteint un certain niveau, des collègues fusionnent le code et procèdent à un débogage commun.

L'environnement de test (testing) est l'environnement dans lequel travaillent les collègues, généralement déployé par les collègues de test eux-mêmes, puis testé dans cet environnement

Environnement de production (production) L'environnement de production fait référence à la fourniture formelle de services externes.Généralement, le rapport d'erreurs sera désactivé et le journal des erreurs sera activé. (L'environnement officiellement fourni aux clients.)

Remarque : En général, un environnement correspond à un serveur, et certaines entreprises ont un environnement de développement et de test qui est un serveur ! ! !

Ajoutez des fichiers pour les environnements de développement, de production et de test au répertoire racine du projet !

.env.development
.env.production
.env.test

contenu des documents

# 变量必须以 VITE_ 为前缀才能暴露给外部读取
NODE_ENV = 'development'
VITE_APP_TITLE = '硅谷甄选运营平台'
VITE_APP_BASE_API = '/api'


NODE_ENV = 'production'
VITE_APP_TITLE = '硅谷甄选运营平台'
VITE_APP_BASE_API = '/prod-api'


# 变量必须以 VITE_ 为前缀才能暴露给外部读取
NODE_ENV = 'test'
VITE_APP_TITLE = '硅谷甄选运营平台'
VITE_APP_BASE_API = '/test-api'

Commande d'exécution de la configuration : package.json

 "scripts": {
    "dev": "vite --open",
    "build:test": "vue-tsc && vite build --mode test",
    "build:pro": "vue-tsc && vite build --mode production",
    "preview": "vite preview"
  },

Obtenir des variables d'environnement via import.meta.env

//import.meta.env获取环境变量--任何组件都可以使用
console.log(import.meta.env)
// 比如后面的api接口会使用到这里的基础路径

3.4 Configuration des icônes SVG

Les graphiques vectoriels SVG sont souvent utilisés lors du développement de projets, et après avoir utilisé SVG, les ressources d'image ne sont plus chargées sur la page.

C'est une grande amélioration des performances de la page, et notre fichier SVG est beaucoup plus petit que img, et il prend à peine des ressources dans le projet.

Installez le plugin de dépendance SVG

pnpm install vite-plugin-svg-icons -D

vite.config.tsConfigurez le plugin dans

import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import path from 'path'
export default () => {
  return {
    plugins: [
      createSvgIconsPlugin({
        // Specify the icon folder to be cached
        iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
        // Specify symbolId format
        symbolId: 'icon-[dir]-[name]',
      }),
    ],
  }
}

Importation du fichier d'entrée

import 'virtual:svg-icons-register'

Facile à utiliser dans n'importe quel composant

Créez un nouveau dossier d'icônes dans src/assets, qui stocke les icônes svg requises

<!-- svg：图标外层容器，内部需要use标签结合使用 -->
<svg>
  <!-- xlink:href执行用哪一个图标，属性值必须加上 #icon-图标名字 -->
  <use xlink:href="#icon-apple" fill="red"></use>
</svg>

3.4.1 svg est conditionné en tant que composant global

Parce que de nombreux modules du projet ont besoin d'utiliser des icônes, il est packagé en tant que composant global ! ! !

Créez un composant SvgIcon dans le répertoire src/components : la représentation est la suivante

<template>
  <div>
    <svg :style="{ width: width, height: height }">
      <use :xlink:href="prefix + name" :fill="color"></use>
    </svg>
  </div>
</template>
​
<script setup lang="ts">
defineProps({
  //xlink:href属性值的前缀
  prefix: {
    type: String,
    default: '#icon-'
  },
  //svg矢量图的名字
  name: String,
  //svg图标的颜色
  color: {
    type: String,
    default: ""
  },
  //svg宽度
  width: {
    type: String,
    default: '16px'
  },
  //svg高度
  height: {
    type: String,
    default: '16px'
  }
​
})
</script>
<style scoped></style>

Créez un fichier index.ts dans le répertoire du dossier src : utilisé pour enregistrer tous les composants globaux dans le dossier des composants ! ! !

Si vous enregistrez des composants globaux directement dans le fichier d'entrée, 100 devront être écrits cent fois, ce qui est trop. via des plugins personnalisés

// 引入项目中全部的全局组件
import SvgIcon from '@/components/SvgIcon/index.vue';
​
// 全局组件的对象
const allGlobalComponents = { SvgIcon: SvgIcon };
// 对外暴露一个插件对象
export default {
    install(app) {
        Object.keys(allGlobalComponents).forEach((key) => {
            app.component(key, allGlobalComponents[key]);
        })
    }
}

Introduisez le fichier src/index.ts dans le fichier d'entrée et installez le plug-in personnalisé via la méthode app.use

// 引入自定义插件对象：注册全局组件
import globalComponent from '@/components/index.ts'
// 安装自定义插件
app.use(globalComponent)

3.5 Sas intégré

Nous pouvons déjà utiliser le style scss à l'intérieur du composant, car le sass sass-loader a été installé dans le projet lors de la configuration de l'outil styleLint, nous pouvons donc utiliser la syntaxe scss dans le composant ! ! ! Besoin d'ajouter lang="scss"

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

Ensuite, nous ajoutons des styles globaux au projet

Créez un fichier index.scss dans le répertoire src/style Bien sûr, le projet doit effacer le style par défaut, donc introduisez reset.scss dans index.scss. Les styles dans reset.scss sont disponibles dans npm.

@import './reset.scss'

Introduit dans le dossier d'entrée

// 引入全局样式
import '@/style/index.scss'

Mais vous constaterez qu'il n'y a aucun moyen d'utiliser des variables dans le fichier de style global src/styles/index.scss . Par conséquent, des variables globales doivent être introduites dans le projet.

Créez un fichier variable.scss dans style/variable.scss !

La configuration dans le fichier vite.config.ts est la suivante :

export default defineConfig((config) => {
    css: {
      preprocessorOptions: {
        scss: {
          javascriptEnabled: true,
          additionalData: '@import "./src/styles/variable.scss";',
        },
      },
    },
}

@import "./src/styles/variable.less";;N'oubliez pas ce dernier , ou vous rapporterez une erreur !

Après configuration, vous constaterez que ces variables globales fournies par scss peuvent être utilisées dans les styles de composants ! ! !

3.6 données fictives

Dépendance d'installation : vite-plugin-mock - npm

Faites attention à la version de vite-plugin-mock, la dernière version 3.0.0 signalera une erreur, il est recommandé d'installer 2.9.6

Argument de type '{ localEnabled : booléen ; }' n'est pas assignable au paramètre de type 'ViteMockOptions'. Le littéral d'objet ne peut spécifier que des propriétés connues et 'localEnabled' n'existe pas dans le type 'ViteMockOptions'.

 

pnpm install -D [email protected] mockjs

Activez le plugin dans le fichier de configuration vite.config.js.

import { UserConfigExport, ConfigEnv } from 'vite'
import { viteMockServe } from 'vite-plugin-mock'
import vue from '@vitejs/plugin-vue'
export default ({ command })=> {
  return {
    plugins: [
      vue(),
      viteMockServe({
        localEnabled: command === 'serve',
      }),
    ],
  }
}

Créez un dossier fictif dans le répertoire racine : pour créer les données fictives et l'interface dont nous avons besoin ! ! !

Créez un fichier user.ts dans le dossier fictif

//用户信息数据
function createUserList() {
    return [
        {
            userId: 1,
            avatar:
                'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
            username: 'admin',
            password: '111111',
            desc: '平台管理员',
            roles: ['平台管理员'],
            buttons: ['cuser.detail'],
            routes: ['home'],
            token: 'Admin Token',
        },
        {
            userId: 2,
            avatar:
                'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
            username: 'system',
            password: '111111',
            desc: '系统管理员',
            roles: ['系统管理员'],
            buttons: ['cuser.detail', 'cuser.user'],
            routes: ['home'],
            token: 'System Token',
        },
    ]
}
​
export default [
    // 用户登录接口
    {
        url: '/api/user/login',//请求地址
        method: 'post',//请求方式
        response: ({ body }) => {
            //获取请求体携带过来的用户名与密码
            const { username, password } = body;
            //调用获取用户信息函数,用于判断是否有此用户
            const checkUser = createUserList().find(
                (item) => item.username === username && item.password === password,
            )
            //没有用户返回失败信息
            if (!checkUser) {
                return { code: 201, data: { message: '账号或者密码不正确' } }
            }
            //如果有返回成功信息
            const { token } = checkUser
            return { code: 200, data: { token } }
        },
    },
    // 获取用户信息
    {
        url: '/api/user/info',
        method: 'get',
        response: (request) => {
            //获取请求头携带token
            const token = request.headers.token;
            //查看用户信息是否包含有次token用户
            const checkUser = createUserList().find((item) => item.token === token)
            //没有返回失败的信息
            if (!checkUser) {
                return { code: 201, data: { message: '获取用户信息失败' } }
            }
            //如果有返回成功信息
            return { code: 200, data: {checkUser} }
        },
    },
]

installer axios

pnpm install axios

Enfin, testez l'interface via axios ! ! !

3.7 Emballage secondaire Axios

Il est inévitable d'interagir avec le backend lors du développement d'un projet, nous devons donc utiliser le plug-in axios pour envoyer des requêtes réseau. Lors du développement de projets, nous remballons souvent axios.

But:

• En utilisant l'intercepteur de requêtes, certaines affaires peuvent être traitées dans l'intercepteur de requêtes (démarrage de la barre de progression, en-tête de requête portant des paramètres publics)
• À l'aide de l'intercepteur de réponse, vous pouvez traiter certaines affaires dans l'intercepteur de réponse (fin de la barre de progression, simplifier les données renvoyées par le serveur, gérer les erreurs de réseau http)

Créez utils/request.ts dans le répertoire racine

import axios from "axios";
import { ElMessage } from "element-plus";
//创建axios实例
let request = axios.create({
    baseURL: import.meta.env.VITE_APP_BASE_API,
    timeout: 5000
})
//请求拦截器
request.interceptors.request.use(config => {
    return config;
});
//响应拦截器
request.interceptors.response.use((response) => {
    return response.data;
}, (error) => {
    //处理网络错误
    let msg = '';
    let status = error.response.status;
    switch (status) {
        case 401:
            msg = "token过期";
            break;
        case 403:
            msg = '无权访问';
            break;
        case 404:
            msg = "请求地址错误";
            break;
        case 500:
            msg = "服务器出现问题";
            break;
        default:
            msg = "无网络";
​
    }
    ElMessage({
        type: 'error',
        message: msg
    })
    return Promise.reject(error);
});
export default request;

point important:

Ce qui est exposé est la requête encapsulée au lieu d'axios

Pas besoin de transporter /api lors de l'envoi de la requête, car le chemin de base est configuré

Toute demande passera par l'intercepteur de demande, de sorte que la configuration de configuration dans l'intercepteur de demande peut transporter quelque chose au serveur, généralement un jeton

L'objet de configuration doit être renvoyé dans l'intercepteur de requête, sinon la requête ne peut pas être envoyée

3.8 Gestion unifiée de l'interface API

Lors du développement d'un projet, il peut y avoir de nombreuses interfaces qui doivent être gérées de manière uniforme. Créez un dossier api dans le répertoire src pour gérer l'interface du projet de manière unifiée.

Par exemple : de la manière suivante

//统一管理咱们项目用户相关的接口
​
import request from '@/utils/request'
​
import type {
​
 loginFormData,
​
 loginResponseData,
​
 userInfoReponseData,
​
} from './type'
​
//项目用户相关的请求地址
​
enum API {
​
 LOGIN_URL = '/admin/acl/index/login',
​
 USERINFO_URL = '/admin/acl/index/info',
​
 LOGOUT_URL = '/admin/acl/index/logout',
​
}
//登录接口
export const reqLogin = (data: loginFormData) =>
 request.post<any, loginResponseData>(API.LOGIN_URL, data)
//获取用户信息
​
export const reqUserInfo = () =>
​
 request.get<any, userInfoReponseData>(API.USERINFO_URL)
​
//退出登录
​
export const reqLogout = () => request.post<any, any>(API.LOGOUT_URL)

Type.ts peut limiter les paramètres de requête et le type de données reçues src/api/user/type.ts

// 登入接口需要携带参数ts类型
export interface loginForm {
    username: string,
    password: string
}
​
interface dataType {
    token: string
}
//定义登录接口返回数据类型
export interface loginResponseData {
    code: number,
    data: dataType
}
​
​
interface userInfo {
    userId: number,
    avatar: string,
    username: string,
    password: string,
    desc: string,
    roles: string[],
    buttons: string[],
    routes: string[],
    token: string
}
​
interface user {
    checkUser: userInfo
}
​
//定义服务器返回用户信息相关的数据类型
export interface userResponseData {
    code: number,
    data: user
}