Vite+Vue3.0+ElementPlus + axios +TS 搭建项目

Vite+Vue3.0+ElementPlus + axios +TS 搭建项目

一、vite构建项目 官网

1、创建项目

// pnpm
pnpm create vite

// npm 
npm create vite@latest

// yarn
yarn create vite

2、步骤

二、代码规范

注释：配置完成后需要重新启动项目

1、配置eslint

• 安装ESlint插件
  

• 在项目根目录下找到并打开 .eslintrc.cjs 文件

  /* 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 - 关闭规则
      "warn" 或 1 - 打开规则作为警告（不影响退出代码）
      "error" 或 2 - 打开规则作为错误（触发时退出代码为 1）
      */
      'array-bracket-spacing': [2, 'never'], // 在数组括号内强制保持一致的间距
      'block-spacing': [2, 'always'], // 在打开块之后和关闭块之前禁止或强制块内的空格
      'brace-style': [2, '1tbs'], // 对块执行一致的大括号样式
      'comma-dangle': [2, 'never'], // 不允许尾随逗号
      'comma-spacing': [
        2,
        {
          before: false,
          after: true
        }
      ], // 在逗号前后强制保持一致的间距
      'comma-style': [2, 'last'], // 强制使用一致的逗号样式
      'consistent-return': [
        2,
        {
          treatUndefinedAsUnspecified: true
        }
      ], // 要求 return 语句始终或从不指定值
      'computed-property-spacing': [2, 'never'], // 在计算的属性括号内强制执行一致的间距
      'constructor-super': 2, // 在构造函数中需要 super() 调用
      curly: 2, // 强制所有控制语句使用一致的括号风格
      'default-case': 2, // 在 switch 语句中需要 default 个案例
      'eol-last': [2, 'always'], // 在文件末尾要求或禁止换行
      'func-call-spacing': [2, 'never'], // 要求或不允许函数标识符及其调用之间有间距
      'guard-for-in': 2, // 要求 for-in 循环包含 if 语句
      indent: [
        2,
        2,
        {
          SwitchCase: 1
        }
      ], // 强制一致的缩进
      'jsx-quotes': [2, 'prefer-double'], // 强制在 JSX 属性中一致地使用双引号或单引号
      'key-spacing': [
        2,
        {
          beforeColon: false,
          afterColon: true
        }
      ], // 在对象字面属性中强制键和值之间的间距一致
      'new-cap': 0, // 设置名字首字母为大写的函数可以不为构造函数
      'new-parens': 2, // 在调用不带参数的构造函数时强制或禁止使用括号
      'no-case-declarations': 2, // 不允许在case/default子句中使用词法声明
      'no-class-assign': 2, // 不允许重新分配类成员
      'no-compare-neg-zero': 2, // 禁止与 -0 进行比较
      'no-cond-assign': [2, 'always'], // 禁止条件语句中出现赋值操作符
      'no-console': 0, // 允许出现console
      'no-const-assign': 2, // 建议使用const
      'no-constant-condition': 2, // 禁止在条件中使用常量表达式
      'no-control-regex': 2, // 禁止在正则表达式中使用控制字符
      'no-debugger': 0, // 可以使用debugger
      'no-delete-var': 2, // 不允许删除变量
      'no-dupe-args': 2, // 禁止 function 定义中出现重名参数
      'no-dupe-class-members': 2, // 禁止重复的类成员
      'no-dupe-keys': 2, // 禁止对象字面量中出现重复的 key
      'no-duplicate-case': 2, // 禁止出现重复的 case 标签
      'no-empty': 2, // 禁止出现空语句块
      'no-empty-character-class': 2, // 禁止在正则表达式中使用空字符集
      'no-empty-pattern': 2, // 禁止空的解构模式
      'no-ex-assign': 2, // 禁止对 catch 子句的参数重新赋值
      'no-extra-boolean-cast': 2, // 禁止不必要的布尔转换
      'no-extra-parens': [2, 'functions'], // 禁止不必要的括号
      'no-extra-semi': 2, // 禁止不必要的分号
      'no-fallthrough': 2, // 不允许 case 语句的失败
      'no-func-assign': 2, // 禁止对 function 声明重新赋值
      'no-global-assign': [
        2,
        {
          exceptions: []
        }
      ], // 不允许分配给原生对象或只读全局变量
      'no-inner-declarations': 0, // 禁止在嵌套的块中出现变量声明或 function 声明
      'no-invalid-regexp': 2, // 禁止 RegExp 构造函数中存在无效的正则表达式字符串
      'no-irregular-whitespace': 2, // 禁止不规则的空白
      'no-mixed-spaces-and-tabs': 2, // 不允许使用混合空格和制表符进行缩进
      'no-multi-assign': 2, // 禁止使用链式赋值表达式
      'no-multiple-empty-lines': 2, // 禁止多个空行
      'no-new-symbol': 2, // 禁止带有 Symbol 对象的 new 运算符
      'no-obj-calls': 2, // 禁止把全局对象作为函数调用
      'no-octal': 2, // 禁止八进制字面
      'no-prototype-builtins': 2, // 禁止直接调用 Object.prototypes 的内置属性
      'no-redeclare': 2, // 禁止变量重新声明
      'no-regex-spaces': 2, // 禁止正则表达式字面量中出现多个空格
      'no-self-assign': 2, // 禁止两边完全相同的赋值
      'no-sparse-arrays': 2, // 禁用稀疏数组
      'no-template-curly-in-string': 0, // 禁止在常规字符串中出现模板字面量占位符语法
      'no-this-before-super': 2, // 在构造函数中调用 super() 之前禁止 this/super
      'no-undef': 0, // 除非在 /*global */ 注释中提及，否则不允许使用未声明的变量
      'no-undefined': 0, // 禁止使用 undefined 作为标识符
      'no-unexpected-multiline': 2, // 禁止出现令人困惑的多行表达式
      'no-unreachable': 2, // 禁止在 return、throw、continue 和 break 语句之后出现不可达代码
      'no-unsafe-finally': 2, // 禁止在 finally 语句块中出现控制流语句
      'no-unsafe-negation': 2, // 禁止对关系运算符的左操作数使用否定操作符
      'no-unused-labels': 2, // 禁止未使用的标签
      'no-use-before-define': 2, // 在定义之前禁止使用变量
      'no-useless-escape': 2, // 禁止不必要的转义字符
      'no-var': 2, // 禁止使用var
      'prefer-const': 2, // 声明后从不重新分配的变量需要 const 声明
      quotes: 0, // 双引号可无
      'require-yield': 2, // 要求生成器函数包含 yield
      semi: 0, // 句尾省略分号
      'space-before-function-paren': 0, // 在函数括号之前不使用间距
      strict: 2, // 要求或禁止严格模式指令
      'use-isnan': 2, // 要求使用 isNaN() 检查 NaN
      'valid-jsdoc': 0, // 强制执行有效且一致的 JSDoc 注释
      'valid-typeof': 2, // 强制 typeof 表达式与有效的字符串进行比较
      'vue/html-self-closing': [
        2,
        {
          html: {
            void: 'always',
            normal: 'always',
            component: 'always'
          },
          svg: 'always',
          math: 'always'
        }
      ] // 设置自闭合标签
    }
  }
  

• 根目录创建忽略文件：.eslintignore

  node_modules/
  dist/
  index.html
  

• git Husky

  husky是一个git hook工具，可以帮助我们触发git提交的各个阶段：pre-commit、commit-msg、pre-push

  • 自动配置命令

    npm install husky-init //安装husky-init包
    npx husky-init  //执行文件
    

  • 在 .husky/pre-commit 文件中修改成 npm run lint

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

  • 安装husky报错（遇到的问题）

    husky - can't create hook, .husky directory doesn't exist (try running husky install)
    
    不能创建钩子，.husky目录不存在(尝试运行Husky install)
    

  • 重新执行下面命令

    git init
    npx husky-init
    

2、配置prettier

• 安装 Prettier 扩展
  

• 在项目根目录下找到 .prettierrc.json 文件，将其改为 .prettierrc.js 文件

  module.exports = {
    overrides: [
      {
        files: '.prettierrc',
        options: {
          parser: 'json'
        }
      }
    ],
    printWidth: 100, // 一行最多 100 字符
    tabWidth: 2, // 使用 2 个空格缩进
    semi: false, // 句尾省略分号
    singleQuote: true, // 使用单引号而不是双引号
    useTabs: false, // 用制表符而不是空格缩进行
    quoteProps: 'as-needed', // 仅在需要时在对象属性两边添加引号
    jsxSingleQuote: false, // 在 JSX 中使用单引号而不是双引号
    trailingComma: 'none', // 末尾不需要逗号
    bracketSpacing: true, // 大括号内的首尾需要空格
    bracketSameLine: false, // 将多行 HTML（HTML、JSX、Vue、Angular）元素反尖括号需要换行
    arrowParens: 'always', // 箭头函数，只有一个参数的时候，也需要括号 avoid
    rangeStart: 0, // 每个文件格式化的范围是开头-结束
    rangeEnd: Infinity, // 每个文件格式化的范围是文件的全部内容
    requirePragma: false, // 不需要写文件开头的 @prettier
    insertPragma: false, // 不需要自动在文件开头插入 @prettier
    proseWrap: 'preserve', // 使用默认的折行标准 always
    htmlWhitespaceSensitivity: 'css', // 根据显示样式决定 html 要不要折行
    vueIndentScriptAndStyle: false, //（默认值）对于 .vue 文件，不缩进 <script> 和 <style> 里的内容
    endOfLine: 'lf', // 换行符使用 lf 在Linux和macOS以及git存储库内部通用\n
    embeddedLanguageFormatting: 'auto' //（默认值）允许自动格式化内嵌的代码块,
  }
  

• 根目录创建忽略：.prettierignore

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

• 在 settings.json 文件中添加如下配置代码
  

  "editor.formatOnSave": true, // 每次保存的时候自动格式化
    "editor.formatOnPaste": true, // 自动格式化粘贴内容
    "editor.codeActionsOnSave": {
      // 保存时使用 ESLint 修复可修复错误
      "source.fixAll": true,
      "source.fixAll.eslint": true // 保存时使用 ESLint 修复可修复错误
      // "source.fixAll.stylelint": true
    },
    // 文件设置
    "files.eol": "\n", // 默认行尾字符。 git全局配置 git config --global core.autocrlf false
    // eslint 设置
    "eslint.alwaysShowStatus": true, // 总是显示 ESlint 状态栏项
    "eslint.probe": [
      // eslint 校验的语言类型
      "javascript",
      "javascriptreact",
      "typescript",
      "typescriptreact",
      "html",
      "vue",
      "markdown",
      "tsx"
    ],
  

3、集成editorconfig配置

EditorConfig 有助于为不同 IDE 编辑器上处理同一项目的多个开发人员维护一致的编码风格。

• 安装插件

  EditorConfig for VS Code
  

  

• 在项目根目录创建 ：.editorconfig

  # http://editorconfig.org
      
  root = true
      
  [*] # 表示所有文件适用
  charset = utf-8 # 设置文件字符集为 utf-8
  indent_style = space # 缩进风格（tab | space）
  indent_size = 2 # 缩进大小
  end_of_line = lf # 控制换行类型(lf | cr | crlf)
  trim_trailing_whitespace = true # 去除行首的任意空白字符
  insert_final_newline = true # 始终在文件末尾插入一个新行
      
  [*.md] # 表示仅 md 文件适用以下规则
  max_line_length = off
  trim_trailing_whitespace = false
  

4、git commit规范

Type	作用
feat	新增特性 (feature)
fix	修复 Bug(bug fix)
docs	修改文档 (documentation)
style	代码格式修改(white-space, formatting, missing semi colons, etc)
refactor	代码重构(refactor)
perf	改善性能(A code change that improves performance)
test	测试(when adding missing tests)
build	变更项目构建或外部依赖（例如 scopes: webpack、gulp、npm 等）
ci	更改持续集成软件的配置文件和 package 中的 scripts 命令，例如 scopes: Travis, Circle 等
chore	变更构建流程或辅助工具(比如更改测试环境)
revert	代码回退

三、项目配置

一、css预处理器及样式重置

1、css预处理器

• scss安装（选其一）

  npm i sass-loader node-sass -S
  
  // 使用
  <style lang="scss" scoped></style>
  

• less安装（选其一）

  npm i less less-loader
  
  // 使用
      <style lang="less" scoped></style>
  

2、样式重置

• 1、安装 normalize.css

  npm i normalize.css
  

• 2、引入

  // main.ts
  import 'normalize.css'
  

• 3、reset.css

  html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,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;
  }
  
  /*设置的字体，行高*/
  h1,h2,h3,h4,h5,h6,th {font-size: 100%;font-weight: normal;}
  
  /*重置标题*/
  address,cite,dfn,var {font-style: normal;}
  
  /* 将斜体扶正 */
  code,kbd,pre,samp {
    font-family: 'courier new', courier, monospace;
  }
  
  /* 统一等宽字体 */
  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;}
  
  /* 重置，减少对行高的影响 */
  sub {vertical-align: text-bottom;}
  
  /** 重置表单元素 **/
  legend {color: #000;}
  
  /* for ie6 */
  fieldset,img {border: 0;}
  
  /* img 搭车：让链接里的 img 无边框 */
  button,input,select,textarea {
    background: transparent;
    font-size: 100%;
    outline: 0;
  }
  
  /* 使得表单元素在 ie 下能继承字体大小 */
  
  /* 注：optgroup 无法扶正 */
  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;
  }
  
  /*回复标签重置*/
  blockquote,q {quotes: none;}
  
  blockquote:before,blockquote:after,q:before,q:after {
    content: '';
    display: none;
  }
  

• common.css (一直完善中…)

  
  /* 字体颜色 */
  .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;}
  
  /* 内边距 */
  .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;}
  
  /* 文字对齐 */
  .ac{text-align: center;}
  .ar{text-align: right;}
  .al{text-align: left;}
  
  /* 清除默认样式 */
  * {margin: 0; padding: 0;}
  html,body,#app {width: 100%;height: 100%;}
  
  

二、引入Element-Plus 官网

• 安装Element-Plus

  // 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)
  

三、环境变量配置

设置.env中的内容信息 注意vue3+vite 必须使用VITE开头的配置信息 否则无法获取

• 配置开发环境（npm run serve）

  // 1.在项目的根目录下创建一个文件
      .env.development
      
  // 2.在文件中添加我们要配置的变量：
      变量名结构： VITE_APP_XXX
      例如： VITE_APP_BASEURL = http://localhost:5000
      
  // 3.在要使用的位置获取:
      import.meta.env.VITE_APP_BASEURL
  

• 配置生产环境（npm run build）

  // 1.在项目的根目录下创建一个文件
      .env.production
      
  // 2.在文件中添加我们要配置的变量：
      变量名结构： VITE_APP_XXX
      例如： VITE_APP_BASEURL = http://152.136.185.210:5000
      
  // 3.在要使用的位置获取:
      import.meta.env.VITE_APP_BASEURL
  

四、axios集成

1、安装axios

npm i axios

2、封装请求错误代码提示： /src/utils/error-code-type.ts

export const errorCodeType = function (code: number, message: string): string {
  let errMessage = '未知错误'
  switch (code) {
    case 400:
      errMessage = '错误的请求'
      break
    case 401:
      errMessage = '未授权，请重新登录'
      break
    case 403:
      errMessage = '拒绝访问'
      break
    case 404:
      errMessage = '请求错误,未找到该资源'
      break
    case 405:
      errMessage = '请求方法未允许'
      break
    case 408:
      errMessage = '请求超时'
      break
    case 500:
      errMessage = '服务器端出错'
      break
    case 501:
      errMessage = '网络未实现'
      break
    case 502:
      errMessage = '网络错误'
      break
    case 503:
      errMessage = '服务不可用'
      break
    case 504:
      errMessage = '网络超时'
      break
    case 505:
      errMessage = 'http版本不支持该请求'
      break
    default:
      errMessage = message
  }
  return errMessage
}

3、封装：/src/utils/request.ts

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

/** 创建axios实例 */
const service = axios.create({
  timeout: 100000, // 超时时间
  baseURL: import.meta.env.VITE_APP_BASEURL,
  headers: {
    'Content-Type': 'application/json;charset=utf-8'
  }
})

//2. 请求拦截器
service.interceptors.request.use(
  (config) => {
    // 是否需要设置 token放在请求头
    // config.headers['Authorization'] = 'Bearer ' + getToken()
    return config
  },
  (error) => {
    Promise.reject(error)
  }
)

//3. 响应拦截器
service.interceptors.response.use(
  (response) => {
    const code = response.data['code']
    const message = response.data['message']
    // 获取错误信息
    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

4、封装请求接口

import request from '@/utils/request'
//请求示例
//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,
    })
}

5、vue中使用

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

五、封装本地存储(localStorage)

// 操作本地存储(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)
  }
})()

// 验证密码 - 请输入6 ~ 14位,数字/字母/下划线/-
export const isPassword = (val) => {
  return /^[a-zA-Z0-9_-]{6,20}$/.test(val)
}

// 验证用户名 - 姓名不能有数字
export const isName = (val) => {
  return /^[^\d]*$/.test(val)
}

// 验证手机号 - 请输入正确的手机号
export const isPhone = (val) => {
  return /^1(3|4|5|7|8|9)\d{9}$/.test(val)
}

// 验证账号 - 账号不能输入汉字
export const isAccount = (val) => {
  return /^[^\u4e00-\u9fa5]+$/.test(val)
}

五、扩展

1、本地打开vue3+vite+ts项目打包的dist文件夹下index.html

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({
  //本地打开dist文件夹下index.html
  base: './',
  plugins: [vue(), vueJsx()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

2、vite项目中配置路径别名@

• 在vite.config.ts中添加如下代码

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

• 在tsconfig.json中的compilerOptions里面添加代码：

  "compilerOptions"：{
      ......
   
      "baseUrl": ".",
      "paths": {
         "@/*": ["src/*"]
      }
  }
  
  //重启项目即可