使用Vite搭建Vue3.0 + TypeScript + Element-plus + VueRouter + Vuex + axios项目

最近在学习vue3.0，所以尝试自己创建项目玩玩。
大多数项目都是有登录的，这就会涉及到token失效跳转回登录页，以及请求携带token。配置里面都有涉及到，可以参考。

安装vite环境

npm init @vitejs/app 或者 yarn create @vitejs/app

创建vue3.0 + ts

npm init vite 或者 yarn create vite

之后会填写项目名称，选择vue和ts。如图：

下载Element-plus和使用

根据element-plus文档可以快速入门，这个没啥好讲的。

npm i element-plus -S 或者 yarn add element-plus

下载VueRouter和配置

npm i vue-router@4

创建项目一般都会配置路由。导航守卫判断token是否存在就行。

router.ts

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import Login from '../views/Login.vue'
import Index from '../views/Layout.vue'
const routes: Array<RouteRecordRaw> = [
  { path: '/', redirect: '/login' },
  { path: '/login', name: 'login', component: Login },
  {path: '/index', name: 'index', component: Index, children: [] },
]

const router = createRouter({
  history: createWebHistory(),
  routes,
})
router.beforeEach((to, from, next) => {
  const isLogin = localStorage.TOKEN ? true : false;
  if (to.path == "/login") {
    next();
  } else {
    isLogin ? next() : next("/login");
  }
})
export default router

下载Vuex和配置

npm i vuex@next -S

根据Vue3中Vuex的介绍。配置一下就行了。

store.ts

import { InjectionKey } from 'vue'
import { createStore, useStore as baseUseStores, Store } from 'vuex'
// 为 store state 声明类型
export interface State {
  actions: any
}
// 定义 injection key
export const key: InjectionKey<Store<State>> = Symbol()
// 重写useStore方法
// 如果其他页面有使用到useStore，可以直接使用这个
export const useStore = () => baseUseStores(key)
export const store = createStore<State>({
  state: {
    actions: []
  },
  mutations: {
    set_Actions(state, data) {
      state.actions = data
    }
  }
})

下载axios和配置

npm i -S axios

axios的配置我也是查阅资料做的，具体哪一篇忘了。主要就是interceptors.ts和request.ts两个文件。这两个文件可以整理成一个文件，我有点懒了就两个文件把。

interceptors.ts

  import axios, { AxiosInstance } from "axios";
  // 用于加载的
  import { ElMessage, ElLoading } from 'element-plus';
  // 这个就是上面创建的router实例，用来跳转到login页面的
  import router from '../router'
  export default class Interceptors {
    instance: AxiosInstance;
    loading: any;
    constructor() {
    // 基础配置
      this.instance = axios.create({
        // baseURL: "http://localhost:8800",
        timeout: 10000,
      });

      this.init()
    };
    // 下面两个方法可以参考element-plus
    startLoading() {
      this.loading = ElLoading.service({
        lock: true,
        text: '加载中...',
        background: 'rgba(0, 0, 0, 0.7)'
      })
    }
    endLoading() {
      this.loading.close()
    }
    init() {
      this.instance.interceptors.request.use(
        config => {
          this.startLoading()
          if (localStorage.eleToken) config.headers.Authorization = localStorage.TOKEN
          return config

        }, err => {
        // 失败就简单处理了
          return Promise.reject(err)
        });

      this.instance.interceptors.response.use(response => {
        this.endLoading();
        if (response.data.success) {
          return response.data.result || response.data.message;
        } else {
        // 这个就是错误的时候自行处理的代码了，具体业务具体处理，加上注释只供参考
         /* if (response.data.Code == 401) {
            // 清除token
            localStorage.removeItem('TOKEN')
            router.push('/login')
            ElMessage.error(response.data.Message)
           
          } else {
            if (response.status == 200) {
              return response.data
            }
            ElMessage.error(response.data.message || '系统错误')
          }
          return*/
        }

      }, error => {
        this.endLoading()
        // 具体业务具体处理，加上注释只供参考
        /*const { status } = error.response
        if (status == '401') {
          ElMessage.error('token值无效，请重新登录')
          // 清除token
          localStorage.removeItem('TOKEN')
          // 页面跳转
          router.push('/login')
        } else {
          ElMessage.error('系统错误')
        }
        return Promise.reject(error)*/
      })
    };
    getInterceptors() {
      return this.instance;
    }
  }

request.ts

import Interceptors from './interceptors'
// 请求配置
class HttpServer {
  axios: any;
  // 获取axios实例
  constructor() {
    this.axios = new Interceptors().getInterceptors();
  }
export default new HttpServer()

具体使用如下,下面是创建的一个login.ts主要是写login的代码，可以参考

login.ts

import http from '../http/request'
export const userLogin = async (user: { userName: string, password: string }) => {
  return await http.axios.get(`/api/Login/Login?userName=${user.userName}&password=${user.password}`)
}

vite.config.js配置跨域

export default defineConfig({
  plugins: [vue()],
  server: {
    open: true,
    host: 'localhost',
    port: 8800,
    https: false,
    proxy: { // 配置跨域
      '/api': {
        target: 'http://localhost:60999/api', 
        ws: true,
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/, '')
      }
    }
  }
})

最后的最后！！！！我也是初学的，可能还存在许多不足的地方，欢迎指正。仅以此做个记录，方便以后对比