// pnpm
pnpm create vite

// npm 
npm create vite@latest

// yarn
yarn create vite

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution')

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-typescript/recommended',
    '@vue/eslint-config-prettier'
  ],
  env: {
    'vue/setup-compiler-macros': true
  },
  parserOptions: {
    ecmaVersion: 'latest'
  },
  parser: 'vue-eslint-parser',
  rules: {
    /* 
    "off" 或 0 - 關(guān)閉規(guī)則
    "warn" 或 1 - 打開(kāi)規(guī)則作為警告（不影響退出代碼）
    "error" 或 2 - 打開(kāi)規(guī)則作為錯(cuò)誤（觸發(fā)時(shí)退出代碼為 1）
    */
    'array-bracket-spacing': [2, 'never'], // 在數(shù)組括號(hào)內(nèi)強(qiáng)制保持一致的間距
    'block-spacing': [2, 'always'], // 在打開(kāi)塊之后和關(guān)閉塊之前禁止或強(qiáng)制塊內(nèi)的空格
    'brace-style': [2, '1tbs'], // 對(duì)塊執(zhí)行一致的大括號(hào)樣式
    'comma-dangle': [2, 'never'], // 不允許尾隨逗號(hào)
    'comma-spacing': [
      2,
      {
        before: false,
        after: true
      }
    ], // 在逗號(hào)前后強(qiáng)制保持一致的間距
    'comma-style': [2, 'last'], // 強(qiáng)制使用一致的逗號(hào)樣式
    'consistent-return': [
      2,
      {
        treatUndefinedAsUnspecified: true
      }
    ], // 要求 return 語(yǔ)句始終或從不指定值
    'computed-property-spacing': [2, 'never'], // 在計(jì)算的屬性括號(hào)內(nèi)強(qiáng)制執(zhí)行一致的間距
    'constructor-super': 2, // 在構(gòu)造函數(shù)中需要 super() 調(diào)用
    curly: 2, // 強(qiáng)制所有控制語(yǔ)句使用一致的括號(hào)風(fēng)格
    'default-case': 2, // 在 switch 語(yǔ)句中需要 default 個(gè)案例
    'eol-last': [2, 'always'], // 在文件末尾要求或禁止換行
    'func-call-spacing': [2, 'never'], // 要求或不允許函數(shù)標(biāo)識(shí)符及其調(diào)用之間有間距
    'guard-for-in': 2, // 要求 for-in 循環(huán)包含 if 語(yǔ)句
    indent: [
      2,
      2,
      {
        SwitchCase: 1
      }
    ], // 強(qiáng)制一致的縮進(jìn)
    'jsx-quotes': [2, 'prefer-double'], // 強(qiáng)制在 JSX 屬性中一致地使用雙引號(hào)或單引號(hào)
    'key-spacing': [
      2,
      {
        beforeColon: false,
        afterColon: true
      }
    ], // 在對(duì)象字面屬性中強(qiáng)制鍵和值之間的間距一致
    'new-cap': 0, // 設(shè)置名字首字母為大寫(xiě)的函數(shù)可以不為構(gòu)造函數(shù)
    'new-parens': 2, // 在調(diào)用不帶參數(shù)的構(gòu)造函數(shù)時(shí)強(qiáng)制或禁止使用括號(hào)
    'no-case-declarations': 2, // 不允許在case/default子句中使用詞法聲明
    'no-class-assign': 2, // 不允許重新分配類成員
    'no-compare-neg-zero': 2, // 禁止與 -0 進(jìn)行比較
    'no-cond-assign': [2, 'always'], // 禁止條件語(yǔ)句中出現(xiàn)賦值操作符
    'no-console': 0, // 允許出現(xiàn)console
    'no-const-assign': 2, // 建議使用const
    'no-constant-condition': 2, // 禁止在條件中使用常量表達(dá)式
    'no-control-regex': 2, // 禁止在正則表達(dá)式中使用控制字符
    'no-debugger': 0, // 可以使用debugger
    'no-delete-var': 2, // 不允許刪除變量
    'no-dupe-args': 2, // 禁止 function 定義中出現(xiàn)重名參數(shù)
    'no-dupe-class-members': 2, // 禁止重復(fù)的類成員
    'no-dupe-keys': 2, // 禁止對(duì)象字面量中出現(xiàn)重復(fù)的 key
    'no-duplicate-case': 2, // 禁止出現(xiàn)重復(fù)的 case 標(biāo)簽
    'no-empty': 2, // 禁止出現(xiàn)空語(yǔ)句塊
    'no-empty-character-class': 2, // 禁止在正則表達(dá)式中使用空字符集
    'no-empty-pattern': 2, // 禁止空的解構(gòu)模式
    'no-ex-assign': 2, // 禁止對(duì) catch 子句的參數(shù)重新賦值
    'no-extra-boolean-cast': 2, // 禁止不必要的布爾轉(zhuǎn)換
    'no-extra-parens': [2, 'functions'], // 禁止不必要的括號(hào)
    'no-extra-semi': 2, // 禁止不必要的分號(hào)
    'no-fallthrough': 2, // 不允許 case 語(yǔ)句的失敗
    'no-func-assign': 2, // 禁止對(duì) function 聲明重新賦值
    'no-global-assign': [
      2,
      {
        exceptions: []
      }
    ], // 不允許分配給原生對(duì)象或只讀全局變量
    'no-inner-declarations': 0, // 禁止在嵌套的塊中出現(xiàn)變量聲明或 function 聲明
    'no-invalid-regexp': 2, // 禁止 RegExp 構(gòu)造函數(shù)中存在無(wú)效的正則表達(dá)式字符串
    'no-irregular-whitespace': 2, // 禁止不規(guī)則的空白
    'no-mixed-spaces-and-tabs': 2, // 不允許使用混合空格和制表符進(jìn)行縮進(jìn)
    'no-multi-assign': 2, // 禁止使用鏈?zhǔn)劫x值表達(dá)式
    'no-multiple-empty-lines': 2, // 禁止多個(gè)空行
    'no-new-symbol': 2, // 禁止帶有 Symbol 對(duì)象的 new 運(yùn)算符
    'no-obj-calls': 2, // 禁止把全局對(duì)象作為函數(shù)調(diào)用
    'no-octal': 2, // 禁止八進(jìn)制字面
    'no-prototype-builtins': 2, // 禁止直接調(diào)用 Object.prototypes 的內(nèi)置屬性
    'no-redeclare': 2, // 禁止變量重新聲明
    'no-regex-spaces': 2, // 禁止正則表達(dá)式字面量中出現(xiàn)多個(gè)空格
    'no-self-assign': 2, // 禁止兩邊完全相同的賦值
    'no-sparse-arrays': 2, // 禁用稀疏數(shù)組
    'no-template-curly-in-string': 0, // 禁止在常規(guī)字符串中出現(xiàn)模板字面量占位符語(yǔ)法
    'no-this-before-super': 2, // 在構(gòu)造函數(shù)中調(diào)用 super() 之前禁止 this/super
    'no-undef': 0, // 除非在 /*global */ 注釋中提及，否則不允許使用未聲明的變量
    'no-undefined': 0, // 禁止使用 undefined 作為標(biāo)識(shí)符
    'no-unexpected-multiline': 2, // 禁止出現(xiàn)令人困惑的多行表達(dá)式
    'no-unreachable': 2, // 禁止在 return、throw、continue 和 break 語(yǔ)句之后出現(xiàn)不可達(dá)代碼
    'no-unsafe-finally': 2, // 禁止在 finally 語(yǔ)句塊中出現(xiàn)控制流語(yǔ)句
    'no-unsafe-negation': 2, // 禁止對(duì)關(guān)系運(yùn)算符的左操作數(shù)使用否定操作符
    'no-unused-labels': 2, // 禁止未使用的標(biāo)簽
    'no-use-before-define': 2, // 在定義之前禁止使用變量
    'no-useless-escape': 2, // 禁止不必要的轉(zhuǎn)義字符
    'no-var': 2, // 禁止使用var
    'prefer-const': 2, // 聲明后從不重新分配的變量需要 const 聲明
    quotes: 0, // 雙引號(hào)可無(wú)
    'require-yield': 2, // 要求生成器函數(shù)包含 yield
    semi: 0, // 句尾省略分號(hào)
    'space-before-function-paren': 0, // 在函數(shù)括號(hào)之前不使用間距
    strict: 2, // 要求或禁止嚴(yán)格模式指令
    'use-isnan': 2, // 要求使用 isNaN() 檢查 NaN
    'valid-jsdoc': 0, // 強(qiáng)制執(zhí)行有效且一致的 JSDoc 注釋
    'valid-typeof': 2, // 強(qiáng)制 typeof 表達(dá)式與有效的字符串進(jìn)行比較
    'vue/html-self-closing': [
      2,
      {
        html: {
          void: 'always',
          normal: 'always',
          component: 'always'
        },
        svg: 'always',
        math: 'always'
      }
    ] // 設(shè)置自閉合標(biāo)簽
  }
}

node_modules/
dist/
index.html

npm install husky-init //安裝husky-init包
npx husky-init  //執(zhí)行文件

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
    
npm run lint 

husky - can't create hook, .husky directory doesn't exist (try running husky install)

不能創(chuàng)建鉤子，.husky目錄不存在(嘗試運(yùn)行Husky install)

git init
npx husky-init

module.exports = {
  overrides: [
    {
      files: '.prettierrc',
      options: {
        parser: 'json'
      }
    }
  ],
  printWidth: 100, // 一行最多 100 字符
  tabWidth: 2, // 使用 2 個(gè)空格縮進(jìn)
  semi: false, // 句尾省略分號(hào)
  singleQuote: true, // 使用單引號(hào)而不是雙引號(hào)
  useTabs: false, // 用制表符而不是空格縮進(jìn)行
  quoteProps: 'as-needed', // 僅在需要時(shí)在對(duì)象屬性兩邊添加引號(hào)
  jsxSingleQuote: false, // 在 JSX 中使用單引號(hào)而不是雙引號(hào)
  trailingComma: 'none', // 末尾不需要逗號(hào)
  bracketSpacing: true, // 大括號(hào)內(nèi)的首尾需要空格
  bracketSameLine: false, // 將多行 HTML（HTML、JSX、Vue、Angular）元素反尖括號(hào)需要換行
  arrowParens: 'always', // 箭頭函數(shù)，只有一個(gè)參數(shù)的時(shí)候，也需要括號(hào) avoid
  rangeStart: 0, // 每個(gè)文件格式化的范圍是開(kāi)頭-結(jié)束
  rangeEnd: Infinity, // 每個(gè)文件格式化的范圍是文件的全部?jī)?nèi)容
  requirePragma: false, // 不需要寫(xiě)文件開(kāi)頭的 @prettier
  insertPragma: false, // 不需要自動(dòng)在文件開(kāi)頭插入 @prettier
  proseWrap: 'preserve', // 使用默認(rèn)的折行標(biāo)準(zhǔn) always
  htmlWhitespaceSensitivity: 'css', // 根據(jù)顯示樣式?jīng)Q定 html 要不要折行
  vueIndentScriptAndStyle: false, //（默認(rèn)值）對(duì)于 .vue 文件，不縮進(jìn) <script> 和 <style> 里的內(nèi)容
  endOfLine: 'lf', // 換行符使用 lf 在Linux和macOS以及git存儲(chǔ)庫(kù)內(nèi)部通用\n
  embeddedLanguageFormatting: 'auto' //（默認(rèn)值）允許自動(dòng)格式化內(nèi)嵌的代碼塊,
}

/dist/*
.local
.output.js
/node_modules/**
    
**/*.svg
**/*.sh
    
/public/*

"editor.formatOnSave": true, // 每次保存的時(shí)候自動(dòng)格式化
  "editor.formatOnPaste": true, // 自動(dòng)格式化粘貼內(nèi)容
  "editor.codeActionsOnSave": {
    // 保存時(shí)使用 ESLint 修復(fù)可修復(fù)錯(cuò)誤
    "source.fixAll": true,
    "source.fixAll.eslint": true // 保存時(shí)使用 ESLint 修復(fù)可修復(fù)錯(cuò)誤
    // "source.fixAll.stylelint": true
  },
  // 文件設(shè)置
  "files.eol": "\n", // 默認(rèn)行尾字符。 git全局配置 git config --global core.autocrlf false
  // eslint 設(shè)置
  "eslint.alwaysShowStatus": true, // 總是顯示 ESlint 狀態(tài)欄項(xiàng)
  "eslint.probe": [
    // eslint 校驗(yàn)的語(yǔ)言類型
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "html",
    "vue",
    "markdown",
    "tsx"
  ],

EditorConfig for VS Code

# http://editorconfig.org
    
root = true
    
[*] # 表示所有文件適用
charset = utf-8 # 設(shè)置文件字符集為 utf-8
indent_style = space # 縮進(jìn)風(fēng)格（tab | space）
indent_size = 2 # 縮進(jìn)大小
end_of_line = lf # 控制換行類型(lf | cr | crlf)
trim_trailing_whitespace = true # 去除行首的任意空白字符
insert_final_newline = true # 始終在文件末尾插入一個(gè)新行
    
[*.md] # 表示僅 md 文件適用以下規(guī)則
max_line_length = off
trim_trailing_whitespace = false

npm i sass-loader node-sass -S

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

npm i less less-loader

// 使用
    <style lang="less" scoped></style>

npm i normalize.css

// main.ts
import 'normalize.css'

html,body,div,span,applet,object,iframe,h1,h2,h2,h4,h5,h3,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,
u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,caption {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}
table,tbody,tfoot,thead,tr,th,td {
  margin: 0;
  padding: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}
button,input,textarea {margin: 0;padding: 0;}
/* form elements 表單元素 */
body,button,input,select,textarea {
  font: normal 12px/1.5 '\5FAE\8F6F\96C5\9ED1', tahoma, arial;
}
/*設(shè)置的字體，行高*/
h1,h2,h2,h4,h5,h3,th {font-size: 100%;font-weight: normal;}
/*重置標(biāo)題*/
address,cite,dfn,var {font-style: normal;}
/* 將斜體扶正 */
code,kbd,pre,samp {
  font-family: 'courier new', courier, monospace;
}
/* 統(tǒng)一等寬字體 */
small {font-size: 12px;}
/* 小于 12px 的中文很難閱讀，讓 small 正常化 */
ul,ol {list-style: none;}
/* 重置列表元素 */
button,input[type='submit'],input[type='button'] {
  cursor: pointer;
}
input[type='radio'],input[type='checkbox'],input[type='submit'],input[type='reset'] {
  vertical-align: middle;
  cursor: pointer;
  border: none;
}
/** 重置文本格式元素 **/
a {text-decoration: none;}
a:hover {text-decoration: underline;}
a:focus {outline: 0;}
sup {vertical-align: text-top;}
/* 重置，減少對(duì)行高的影響 */
sub {vertical-align: text-bottom;}
/** 重置表單元素 **/
legend {color: #000;}
/* for ie6 */
fieldset,img {border: 0;}
/* img 搭車：讓鏈接里的 img 無(wú)邊框 */
button,input,select,textarea {
  background: transparent;
  font-size: 100%;
  outline: 0;
}
/* 使得表單元素在 ie 下能繼承字體大小 */
/* 注：optgroup 無(wú)法扶正 */
table {border-collapse: collapse; border-spacing: 0;}
td,th {
  vertical-align: middle;
}
/** 重置表格元素 **/
/* 重置 HTML5 元素 */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,
video {
  display: block;
  margin: 0;
  padding: 0;
}
/*回復(fù)標(biāo)簽重置*/
blockquote,q {quotes: none;}
blockquote:before,blockquote:after,q:before,q:after {
  content: '';
  display: none;
}

/* 字體顏色 */
.clfff{color: #fff;}
.cl00baad{color: #00baad;}
.clff6262{color: #ff6262;}
.clc5cedd{color: #c5cedd;}
.cl909399{color: #909399;}
.cl808080{color: #808080;}
.ls2{letter-spacing: 2px;}
.text-2{text-indent: 2rem;}
/* 背景顏色 */
.bgfff{background-color: #fff;}
/* 字體大小 */
.fs12 {font-size: 12px;}
.fs16 {font-size: 16px;}
.fs18 {font-size: 18px;}
.fs20 {font-size: 20px;}
.fs22 {font-size: 22px;}
.fs24 {font-size: 24px;}
/* 圓角邊框 */
.br6{border-radius: 6px;}
.br8{border-radius: 8px;}
.br10{border-radius: 10px;}
/* 內(nèi)邊距 */
.pd5{padding: 5px;}
.pd10{padding: 10px;}
.pd15{padding: 15px;}
.pd20{padding: 20px;}
.pd25{padding: 25px;}
.pd30{padding: 30px;}
.pd35{padding: 35px;}
.pd40{padding: 40px;}
.pd45{padding: 45px;}
.pd50{padding: 50px;}
.pdt5{padding-top: 5px;}
.pdt10{padding-top: 10px;}
.pdt15{padding-top: 15px;}
.pdt20{padding-top: 20px;}
.pdt25{padding-top: 25px;}
.pdt30{padding-top: 30px;}
.pdt35{padding-top: 35px;}
.pdt40{padding-top: 40px;}
.pdt45{padding-top: 45px;}
.pdt50{padding-top: 50px;}
.pdb5{padding-bottom: 5px;}
.pdb10{padding-bottom: 10px;}
.pdb15{padding-bottom: 15px;}
.pdb20{padding-bottom: 20px;}
.pdb25{padding-bottom: 25px;}
.pdb30{padding-bottom: 30px;}
.pdb35{padding-bottom: 35px;}
.pdb40{padding-bottom: 40px;}
.pdb45{padding-bottom: 45px;}
.pdb50{padding-bottom: 50px;}
.pdl5{padding-left: 5px;}
.pdl10{padding-left: 10px;}
.pdl15{padding-left: 15px;}
.pdl20{padding-left: 20px;}
.pdl25{padding-left: 25px;}
.pdl30{padding-left: 30px;}
.pdl35{padding-left: 35px;}
.pdl40{padding-left: 40px;}
.pdl45{padding-left: 45px;}
.pdl50{padding-left: 50px;}
.pdr5{padding-right: 5px;}
.pdr10{padding-right: 10px;}
.pdr15{padding-right: 15px;}
.pdr20{padding-right: 20px;}
.pdr25{padding-right: 25px;}
.pdr30{padding-right: 30px;}
.pdr35{padding-right: 35px;}
.pdr40{padding-right: 40px;}
.pdr45{padding-right: 45px;}
.pdr50{padding-right: 50px;}
/* 外邊距 */
.mg5{margin: 5px;}
.mg10{margin: 10px;}
.mg15{margin: 15px;}
.mg20{margin: 20px;}
.mg25{margin: 25px;}
.mg30{margin: 30px;}
.mg35{margin: 35px;}
.mg40{margin: 40px;}
.mg45{margin: 45px;}
.mg50{margin: 50px;}
.mgt5{margin-top: 5px;}
.mgt10{margin-top: 10px;}
.mgt15{margin-top: 15px;}
.mgt20{margin-top: 20px;}
.mgt25{margin-top: 25px;}
.mgt30{margin-top: 30px;}
.mgt35{margin-top: 35px;}
.mgt40{margin-top: 40px;}
.mgt45{margin-top: 45px;}
.mgt50{margin-top: 50px;}
.mgb5{margin-bottom: 5px;}
.mgb10{margin-bottom: 10px;}
.mgb15{margin-bottom: 15px;}
.mgb20{margin-bottom: 20px;}
.mgb25{margin-bottom: 25px;}
.mgb30{margin-bottom: 30px;}
.mgb35{margin-bottom: 35px;}
.mgb40{margin-bottom: 40px;}
.mgb45{margin-bottom: 45px;}
.mgb50{margin-bottom: 50px;}
.mgl5{margin-left: 5px;}
.mgl10{margin-left: 10px;}
.mgl15{margin-left: 15px;}
.mgl20{margin-left: 20px;}
.mgl25{margin-left: 25px;}
.mgl30{margin-left: 30px;}
.mgl35{margin-left: 35px;}
.mgl40{margin-left: 40px;}
.mgl45{margin-left: 45px;}
.mgl50{margin-left: 50px;}
.mgr5{margin-right: 5px;}
.mgr10{margin-right: 10px;}
.mgr15{margin-right: 15px;}
.mgr20{margin-right: 20px;}
.mgr25{margin-right: 25px;}
.mgr30{margin-right: 30px;}
.mgr35{margin-right: 35px;}
.mgr40{margin-right: 40px;}
.mgr45{margin-right: 45px;}
.mgr50{margin-right: 50px;}
/* 文字省略 u-line-1 u-line-2 u-line-3 u-line-4*/
.u-line-2{
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
/* flex布局 */
.u-flex{display: flex;}
/* 垂直居中 */
.ai-c{align-items: center;}
/* 水平居中 */
.jc-c{justify-content: center;}
.jc-b{justify-content: space-between;}
.jc-r{justify-content: flex-end;}
/* 空間分布 */
.flex-1{flex: 1;}
.flex-2{flex: 2;}
/* 字體大小 */
.fw700{font-weight: 700;}
/* 手型 */
.cp{cursor: pointer;}
/* 文字對(duì)齊 */
.ac{text-align: center;}
.ar{text-align: right;}
.al{text-align: left;}
/* 清除默認(rèn)樣式 */
* {margin: 0; padding: 0;}
html,body,#app {width: 100%;height: 100%;}

// NPM
 npm install element-plus --save

// Yarn
 yarn add element-plus

// pnpm
 pnpm install element-plus

// main.ts

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

app.use(ElementPlus)

// 1.在項(xiàng)目的根目錄下創(chuàng)建一個(gè)文件
    .env.development
    
// 2.在文件中添加我們要配置的變量：
    變量名結(jié)構(gòu)： VITE_APP_XXX
    例如： VITE_APP_BASEURL = http://localhost:5000
    
// 3.在要使用的位置獲取:
    import.meta.env.VITE_APP_BASEURL

// 1.在項(xiàng)目的根目錄下創(chuàng)建一個(gè)文件
    .env.production
    
// 2.在文件中添加我們要配置的變量：
    變量名結(jié)構(gòu)： VITE_APP_XXX
    例如： VITE_APP_BASEURL = http://152.136.185.210:5000
    
// 3.在要使用的位置獲取:
    import.meta.env.VITE_APP_BASEURL

npm i axios

export const errorCodeType = function (code: number, message: string): string {
  let errMessage = '未知錯(cuò)誤'
  switch (code) {
    case 400:
      errMessage = '錯(cuò)誤的請(qǐng)求'
      break
    case 401:
      errMessage = '未授權(quán)，請(qǐng)重新登錄'
      break
    case 403:
      errMessage = '拒絕訪問(wèn)'
      break
    case 404:
      errMessage = '請(qǐng)求錯(cuò)誤,未找到該資源'
      break
    case 405:
      errMessage = '請(qǐng)求方法未允許'
      break
    case 408:
      errMessage = '請(qǐng)求超時(shí)'
      break
    case 500:
      errMessage = '服務(wù)器端出錯(cuò)'
      break
    case 501:
      errMessage = '網(wǎng)絡(luò)未實(shí)現(xiàn)'
      break
    case 502:
      errMessage = '網(wǎng)絡(luò)錯(cuò)誤'
      break
    case 503:
      errMessage = '服務(wù)不可用'
      break
    case 504:
      errMessage = '網(wǎng)絡(luò)超時(shí)'
      break
    case 505:
      errMessage = 'http版本不支持該請(qǐng)求'
      break
    default:
      errMessage = message
  }
  return errMessage
}

import axios from 'axios'
import { errorCodeType } from './error-code-type'
import { ElMessage } from 'element-plus'

/** 創(chuàng)建axios實(shí)例 */
const service = axios.create({
  timeout: 100000, // 超時(shí)時(shí)間
  baseURL: import.meta.env.VITE_APP_BASEURL,
  headers: {
    'Content-Type': 'application/json;charset=utf-8'
  }
})

//2. 請(qǐng)求攔截器
service.interceptors.request.use(
  (config) => {
    // 是否需要設(shè)置 token放在請(qǐng)求頭
    // config.headers['Authorization'] = 'Bearer ' + getToken()
    return config
  },
  (error) => {
    Promise.reject(error)
  }
)

//3. 響應(yīng)攔截器
service.interceptors.response.use(
  (response) => {
    const code = response.data['code']
    const message = response.data['message']
    // 獲取錯(cuò)誤信息
    const msg = errorCodeType(code, message)
    if (code === 200) {
      return Promise.resolve(response.data)
    } else {
      ElMessage.error(msg)
      return Promise.reject(response.data)
    }
  },
  (error) => {
    return Promise.reject(error)
  }
)

export default service

import request from '@/utils/request'
//請(qǐng)求示例
//get
export const mokeGet = (data) => {
    return axios({
        url: "/api/xxxx",
        method: "get",
        data,
    })
}

//post
export const mokePost = (data) => {
    return axios({
        url: "/api/xxxx",
        method: "post",
        data,
    })
}

import { mokePost } from "@/api";
import {onMounted} from "vue"
export default {
  setup() {
     onMounted(() => {
      mokePost().then(res=>{
        console.log(res)
      })
    })
    return {};
  },
};

// 操作本地存儲(chǔ)(localStorage)

const local = {
  getToken(key) {
    if (!key) return
    return window.localStorage.getItem(key)
  },
  get(key) {
    if (!key) return
    return JSON.parse(window.localStorage.getItem(key))
  },
  set(key, value) {
    if (!key) return
    if (typeof value !== 'string') {
      value = JSON.stringify(value)
    }
    window.localStorage.setItem(key, value)
  },
  clear() {
    window.localStorage.clear()
  },
  remove(key) {
    if (!key) return
    window.localStorage.removeItem(key)
  }
}
export default local

// 防抖
export const debounce = (() => {
  let timer = null
  return (callback, wait) => {
    clearTimeout(timer)
    timer = setTimeout(callback, wait)
  }
})()

// 驗(yàn)證密碼 - 請(qǐng)輸入6 ~ 14位,數(shù)字/字母/下劃線/-
export const isPassword = (val) => {
  return /^[a-zA-Z0-9_-]{6,20}$/.test(val)
}

// 驗(yàn)證用戶名 - 姓名不能有數(shù)字
export const isName = (val) => {
  return /^[^\d]*$/.test(val)
}

// 驗(yàn)證手機(jī)號(hào) - 請(qǐng)輸入正確的手機(jī)號(hào)
export const isPhone = (val) => {
  return /^1(3|4|5|7|8|9)\d{9}$/.test(val)
}

// 驗(yàn)證賬號(hào) - 賬號(hào)不能輸入漢字
export const isAccount = (val) => {
  return /^[^\u4e00-\u9fa5]+$/.test(val)
}

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'

// https://vitejs.dev/config/
export default defineConfig({
  //本地打開(kāi)dist文件夾下index.html
  base: './',
  plugins: [vue(), vueJsx()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

import { resolve } from "path"
 
export default defineConfig({
  ......
 
  resolve: {
    alias: {
      "@": resolve(__dirname, "./src"),
    },
  },
})

"compilerOptions"：{
    ......
 
    "baseUrl": ".",
    "paths": {
       "@/*": ["src/*"]
    }
}

//重啟項(xiàng)目即可