vue3脚手架+vite+antd3+pinia创建一个中小型后台管理项目

众所周知，前端技术更新迭代比较快，vue官网 3成为默认版本了, ant design vue 随之也紧跟把3正式发布成为默认文档, 自己手搭一个后台管理项目，vue3+antd3搭配用起来。

环境依赖版本：

• node: 16.13.0

创建项目:

npm init vue@latest

✔ Project name: … <your-project-name>
✔ Add TypeScript? … No
✔ Add JSX Support? … No
✔ Add Vue Router for Single Page Application development? … Yes
✔ Add Pinia for state management? … Yes
✔ Add Vitest for Unit testing? … No
✔ Add Cypress for both Unit and End-to-End testing? … No
✔ Add ESLint for code quality? … Yes
✔ Add Prettier for code formatting? … Yes

Scaffolding project in ./<your-project-name>...
Done.

> cd <your-project-name>
> npm install
> npm run dev

安装 ant desgin vue 3

npm i --save ant-design-vue

注册

全局完整注册

import { createApp } from 'vue';
import Antd from 'ant-design-vue';
import App from './App';
import 'ant-design-vue/dist/antd.css';

const app = createApp(App);

app.use(Antd).mount('#app');

全局部分注册

import { createApp } from 'vue';
import { Button, message } from 'ant-design-vue';
import App from './App';

const app = createApp(App);

/* 会自动注册 Button 下的子组件, 例如 Button.Group */
app.use(Button).mount('#app');

app.config.globalProperties.$message = message;

局部注册组件

此种方式需要分别注册组件子组件，如 Button、ButtonGroup，并且注册后仅在当前组件中有效。所以我们推荐使用上述两种方式。

<template>
  <a-button>Add</a-button>
</template>
<script>
  import { Button } from 'ant-design-vue';
  const ButtonGroup = Button.Group;

  export default {
    components: {
      AButton: Button,
      AButtonGroup: ButtonGroup,
    },
  };
</script>

不用vuex了，改用pinia，pinia vue3最好的状态管理库，用法如下：

import { defineStore } from 'pinia'

export const useCounterStore = defineStore({
  id: 'counter',
  state: () => ({
    counter: 0
  }),
  getters: {
    doubleCount: (state) => state.counter * 2
  },
  actions: {
    increment() {
      this.counter++
    }
  }
})

import { useCounterStore } from "@/stores/counter";
const counter = useCounterStore();
counter.increment();


<template>
    {{ counter }} // { "$id": "counter", "counter": 3, "doubleCount": 6, "_isOptionsAPI": true }
</template>

再者就是 全局 axios 封装：

在src文件夹下建一个utils文件夹，新建一个service.js

代码如下:

import axios from "axios";
import { get } from "lodash-es";

function createService() {
  const service = axios.create();
  // 请求拦截
  service.interceptors.request.use(
    (config) => config,
    (error) => Promise.reject(error)
  );
  
  service.interceptors.response.use(
    (response) => {
      const apiData = response.data;
      const code = apiData.code;
      switch (code) {
          case 0:
            // code === 0 代表没有错误
            return apiData;
          case 20000:
            // code === 20000 代表没有错误
            return apiData;
          default:
            // 不是正确的 code
            console.error(apiData.msg || "Error");
            return Promise.reject(new Error("Error"));
       }
    },
    (error) => {
      const status = get(error, "response.status");
      switch (status) {
        case 400:
          error.message = "请求错误";
          break;
        case 401:
          error.message = "未授权，请登录";
          break;
        case 403:
          // token 过期时，直接退出登录并强制刷新页面（会重定向到登录页）
          location.reload();
          break;
        case 404:
          error.message = "请求地址出错";
          break;
        default:
          break;
      }
      console.error(error.message);
      return Promise.reject(error);
    }
  );
  return service;
}

function createRequestFunction(service) {
  return function (config) {
    const configDefault = {
      headers: {
        // 携带 token
        "X-Access-Token": "111",
        "Content-Type": get("headers.Content-Type", "application/json"),
      },
      timeout: 5000,
      baseURL: process.env.VUE_APP_BASE_API,
      data: {},
    };
    return service(Object.assign(configDefault, config));
  };
}

export const service = createService();
export const request = createRequestFunction(service);

在src下创建一个api文件，所有后端api接口分类放在该目录下:

login.js

import { request } from "@/utils/service";

/** 登录，返回 token */
export function accountLogin(data) {
  return request({
    url: "users/login",
    method: "post",
    data,
  });
}

/** 获取用户详情 */
export function userInfoRequest() {
  return request({
    url: "users/info",
    method: "post",
  });
}

最后引入第三方插件库，比如 需要做一个拖拽的功能，推荐使用vuedraggable

npm i vuedraggable@4.1.0

import draggable from "vuedraggable";

const myArray = [
  { id: 1, name: "Apple" },
  { id: 2, name: "Banana" },
  { id: 3, name: "Orange" },
];

<template>
    <draggable v-model="myArray">
      <template #item="{ element }">
        <div>{{ element.name }}</div>
      </template>
    </draggable>
</template>

代码链接

最后: 祝各位开发顺利，愉快编程！！！