搭建后台记录vite+ vue3 + ts + axios vite.config.ts 配置代码片段规范目录结构

vite+ vue3 + ts + axios

yarn create vite

vite.config.ts 配置

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
// 如果编辑器提示 path 模块找不到，则可以安装一下 @types/node -> npm i @types/node -D
import { resolve } from 'path'
// https://vitejs.dev/config/
export default defineConfig(({mode})=>{
  const baseURL = loadEnv(mode, __dirname).VITE_BASE_URL
  return {
    plugins: [vue()],
    resolve: {
      alias: {
        '@': resolve(__dirname, 'src') // 设置 `@` 指向 `src` 目录
      }
    },
    server: {
      https: false,
      host: '0.0.0.0', // ← 新增内容 ←
      open: false, // 设置服务启动时是否自动打开浏览器
      cors: true, // 允许跨域
      proxy: {
        '/marketing': {
          target: baseURL,
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/marketing/, '')
        },
        '/couponPackageOrder': {
          target: baseURL,
  
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/couponPackageOrder/, '')
        },
        '/product': {
          target: baseURL,
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/product/, '')
        }
      }
    }
  }
})

规范目录结构

public
src
    assets
    components
    APP.vue
    env.t.ts
    main.ts
.env.development
.gitignore
index.html
package.json
README.md
tsconfig.json
tsconfig.node.json
vite.config.ts

集成路由工具 Vue Router

安装支持 Vue3 的路由工具 vue-router@4

yarn add vue-router@4

创建 src/router/index.ts 文件

需要先安装一下   
yarn add -D  vue-router



import { createRouter, RouteRecordRaw, createWebHistory } from 'vue-router'
import Home from '../views/home.vue'

const activeName = import.meta.env.VITE_ACTIVE
const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/axios',
    name: 'Axios',
    component: () => import('@/views/axios.vue') // 懒加载组件
  },
  {
    path: '/vuex',
    name: 'Vuex',
    component: () => import('../views/vuex.vue') // 懒加载组件
  },

  {
    path: '/axios',
    name: 'Axios',
    component: () => import('../views/axios.vue') // 懒加载组件
  },

]
// console.log(import.meta.env.MODE, 'import.meta.env.MODE')
const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

App.vue

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

<template>
  <router-view v-slot="{ Component }">
    <transition name="router-fade" mode="out-in">
      <keep-alive>
        <component :is="Component" />
      </keep-alive>
    </transition>
  </router-view>
</template>

main.vue

import router from './router/index'
createApp(App).use(router).mount('#app')

集成状态管理工具 Vuex

1.安装支持 Vue3 的状态管理工具 vuex@next

yarn add vuex@next --save

创建 src/router/index.ts 文件

import { createStore } from 'vuex'

const defaultState = {
  count: 0,
  loading: false
}

// Create a new store instance.
export default createStore({
  state() {
    return defaultState
  },
  mutations: {
    increment(state: typeof defaultState) {
      // eslint-disable-next-line no-param-reassign
      state.count += 1
    },
    setLoading(state: typeof defaultState, flag) {
      state.loading = flag
    }
  },
  actions: {
    increment(context) {
      context.commit('increment')
    }
  },
  getters: {
    increment(state: typeof defaultState) {
      return state.count * 2
    },
    getLoading(state: typeof defaultState) {
      return state.loading
    }
  }
})

3.在 main.ts 文件中挂载 Vuex 配置

import { createApp } from 'vue'

import App from './App.vue'

import router from './router/index'

import store from './store/index'

createApp(App).use(router).use(store).mount('#app')

集成 UI 框架 Element Plus

安装支持 Vue3 的 UI 框架 Element Plus

yarn add element-plus

2.在 main.ts 文件中挂载 Element Plus

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

createApp(App).use(router).use(store).use(ElementPlus).mount('#app')

3.Volar 支持

如果您使用 Volar，请在 tsconfig.json 中通过 compilerOptions.type 指定全局组件类型。

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

4.按需导入您需要使用额外的插件来导入要使用的组件。

4.1 自动导入推荐

首先你需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件

yarn add  -D unplugin-vue-components unplugin-auto-import

然后把下列代码插入到你的 Vite 的配置文件中

// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

集成 HTTP 工具 Axios

安装 Axios（Axios 跟 Vue 版本没有直接关系，安装最新即可）

yarn add axios

配置 Axios

创建 src/utils/axios.ts 文件

import Axios from 'axios'
import { ElMessage } from 'element-plus'

const baseURL = 'https://api.github.com'

const axios = Axios.create({
  baseURL,
  timeout: 20000 // 请求超时 20s
})

// 前置拦截器（发起请求之前的拦截）
axios.interceptors.request.use(
  (response) => {
    /**
     * 根据你的项目实际情况来对 config 做处理
     * 这里对 config 不做任何处理，直接返回
     */
    return response
  },
  (error) => {
    return Promise.reject(error)
  }
)

// 后置拦截器（获取到响应时的拦截）
axios.interceptors.response.use(
  (response) => {
    /**
     * 根据你的项目实际情况来对 response 和 error 做处理
     * 这里对 response 和 error 不做任何处理，直接返回
     */
    return response
  },
  (error) => {
    if (error.response && error.response.data) {
      const code = error.response.status
      const msg = error.response.data.message
      ElMessage.error(`Code: ${code}, Message: ${msg}`)
      console.error(`[Axios Error]`, error.response)
    } else {
      ElMessage.error(`${error}`)
    }
    return Promise.reject(error)
  }
)

export default axios

3.用 Axios

<template></template>
<script lang="ts">
  import { defineComponent } from 'vue'
  import axios from '../utils/axios'

  export default defineComponent({
    setup() {
      axios
        .get('/users/XPoet')
        .then((res) => {
          console.log('res: ', res)
        })
        .catch((err) => {
          console.log('err: ', err)
        })
    }
  })
</script>

集成 CSS 预编译器 Sass

yarn add sass -D

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

集成 EditorConfig 配置

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

在项目根目录下增加 .editorconfig 文件：

# Editor configuration, see http://editorconfig.org

# 表示是最顶层的 EditorConfig 配置文件
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

VSCode 使用 EditorConfig 需要去插件市场下载插件 EditorConfig for VS Code

集成 Prettier 配置

Prettier 是一款强大的代码格式化工具，支持 JavaScript、TypeScript、CSS、SCSS、Less、JSX、Angular、Vue、GraphQL、JSON、Markdown 等语言，基本上前端能用到的文件格式它都可以搞定，是当下最流行的代码格式化工具

1.安装 Prettier

yarn add --dev --exact prettier

2.创建 Prettier 配置文件

在本项目根目录下创建 .prettierrc 文件

3.配置 .prettierrc

Prettier 安装且配置好之后，就能使用命令来格式化代码

# 格式化所有文件（. 表示所有文件）
npx prettier --write .

VSCode 编辑器使用 Prettier 配置需要下载插件 Prettier - Code formatter

集成 ESLint 配置

eslint 是一款用于查找并报告代码中问题的工具，并且支持部分问题自动修复。其核心是通过对代码解析得到的 AST（Abstract Syntax Tree 抽象语法树）进行模式匹配，来分析代码达到检查代码质量和风格问题的能力。

正如前面我们提到的因团队成员之间编程能力和编码习惯不同所造成的代码质量问题，我们使用 ESLint 来解决，一边写代码一边查找问题，如果发现错误，就给出规则提示，并且自动修复，长期下去，可以促使团队成员往同一种编码风格靠拢。

1.安装 ESLint

yarn add eslint --save-dev

2.然后，您应该设置一个配置文件：

运行后`npm init @eslint/config`，您的目录中将有一个`.eslintrc`文件

截屏2022-06-12 20.59.41.png

我们这里选择 To check syntax, find problems, and enforce code style（检查语法、发现问题并强制执行代码风格）

What type of modules does your project use?（你的项目使用哪种类型的模块?）

截屏2022-06-12 21.00.51.png

Which framework does your project use? （你的项目使用哪种框架?）

截屏2022-06-12 21.01.49.png

Does your project use TypeScript?（你的项目是否使用 TypeScript？）

截屏2022-06-12 21.02.26.png

Where does your code run?（你的代码在哪里运行?）

截屏2022-06-12 21.03.37.png

How would you like to define a style for your project?（你想怎样为你的项目定义风格？）

截屏2022-06-12 21.04.07.png

Which style guide do you want to follow?（你想遵循哪一种风格指南?）

截屏2022-06-12 21.05.03.png

What format do you want your config file to be in?（你希望你的配置文件是什么格式?）

截屏2022-06-12 21.05.20.png

Would you like to install them now with npm?（你想现在就用 NPM 安装它们吗?）

截屏2022-06-12 21.06.58.png

3.ESLint 配置文件 .eslintrc.js

module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "plugin:vue/essential",
        "airbnb-base"
    ],
    "parserOptions": {
        "ecmaVersion": "latest",
        "parser": "@typescript-eslint/parser",
        "sourceType": "module"
    },
    "plugins": [
        "vue",
        "@typescript-eslint"
    ],
    "rules": {
    }
}

VSCode 使用 ESLint 配置文件需要去插件市场下载插件 ESLint 。

虽然，现在编辑器已经给出错误提示和修复方案，但需要我们一个一个去点击修复，还是挺麻烦的。很简单，我们只需设置编辑器保存文件时自动执行 eslint --fix 命令进行代码风格修

VSCode 在 settings.json 设置文件中，增加以下代码：

 "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
 }

解决 Prettier 和 ESLint 的冲突

通常大家会在项目中根据实际情况添加一些额外的 ESLint 和 Prettier 配置规则，难免会存在规则冲突情况。

本项目中的 ESLint 配置中使用了 Airbnb JavaScript 风格指南校验，其规则之一是代码结束后面要加分号，而我们在 Prettier 配置文件中加了代码结束后面不加分号的配置项，这样就有冲突了，会出现用 Prettier 格式化后的代码，ESLint 检测到格式有问题的，从而抛出错误提示。

解决两者冲突问题，需要用到 eslint-plugin-prettier 和 eslint-config-prettier。

eslint-plugin-prettier 将 Prettier 的规则设置到 ESLint 的规则中。
eslint-config-prettier 关闭 ESLint 中与 Prettier 中会发生冲突的规则。

最后形成优先级：Prettier 配置规则 > ESLint 配置规则。

yarn add eslint-plugin-prettier eslint-config-prettier -D

在 .eslintrc.js 添加 prettier 插件

module.exports = {
  ...
  extends: [
    'plugin:vue/essential',
    'airbnb-base',
    'plugin:prettier/recommended' // 添加 prettier 插件
  ],
  ...
}

这样，我们在执行 eslint --fix 命令时，ESLint 就会按照 Prettier 的配置规则来格式化代码，轻松解决二者冲突问题。