2022年要开始了，今天开始尝试着写些文章，为自己新的一年设定个目标。

今天先开始项目搭建。

1 创建项目框架

打开终端，输入命令 npm init @vitejs/app

设置项目名字，选择框架，我们这里用vue的框架

选择vue-ts

项目搭建完成啦！！！然后进入可项目安装依赖，就可以跑起来了

根据提示命令运行起来

2 安装router

npm install vue-router@4

src/下创建router/index.ts文件

import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";

const layout = () => import('@/layout/index.vue');

const routes: Array<RouteRecordRaw> = [
  { path: '', redirect: '/home' },
  {
    path: '/home',
    component: layout,
    meta: {
      platform: 'user',
    }
}
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})


router.beforeEach((to: any, from: any, next) => {
    next();
})

export default router

3 安装 pinia

pinia 就是vuex； pinia.vuejs.org/

npm install pinia

src/下创建store/index.ts文件

import type { App } from 'vue';
import { createPinia } from 'pinia';

const store = createPinia();

export function setupStore(app: App<Element>) {
    app.use(store);
}

export { store };

main.ts

import { createApp } from 'vue'
import App from './App.vue'

import { createPinia } from 'pinia';
import router from './router';
const app = createApp(App)

app.use(createPinia()).use(router).mount('#app')

4 jsx支持

npm i @vitejs/plugin-vue-jsx -D

vite.config.ts 配置

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), vueJsx()]
})

5 vite别名配置

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import { resolve } from 'path'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), vueJsx()],
  alias: {
    '@': resolve(__dirname, 'src'),
    "comps": resolve(__dirname, "src/components")
  }
})

6 安装element-plus

npm install element-plus --save

mian.ts

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
const app = createApp(App)
app.use(createPinia()).use(router).use(ElementPlus).mount('#app')

7 安装sass

npm i sass -D

8 安装axios

npm i axios -S

请求封装

src/utils/axios.ts

/**
 * @description: axios
 * @param {*}
 * @return {*}
 * @author: cola
 */
 import axios, { AxiosRequestConfig, AxiosResponse, AxiosError } from 'axios';
 import router from '@/router';
 import { ElMessage } from 'element-plus';
 // 设置获取 baseURL
 const baseURL = '/api'
 
 const service = axios.create({
     baseURL,
     timeout: 10000,
     withCredentials: true,
     headers: {
         'Content-Type': 'application/json',
         'Accept': 'application/json',
         'OCS-APIRequest': true
     }
 })
 // 请求拦截
 service.interceptors.request.use(
     // 发送请求之前拦截
     (config: AxiosRequestConfig) => {
        config.headers['X-Token'] =  'X-Token'
         return config;
     },
     (error: AxiosError) => {
         // 请求错误的统一处理

         return Promise.reject(error);
     }
 )
 
// 响应拦截器
 service.interceptors.response.use(
     (response: AxiosResponse) => {
         // 返回status值为200请求成功
         if (response.status === 200 ) {
             return Promise.resolve(response.data);
         } else {
             ElMessage.error(response.data.message);
             return Promise.reject(response.data);
         }
     },
     (error: AxiosError) => {
         // 回话过期
         if ((error.response as any).status == 403) {
             ElMessage.error('会话已过期')
             router.replace("/login");
         } else {
             // 其他错误
             ElMessage.error((error.response as any).data.message);
         }
         return Promise.reject(error);
     }
 )
 
 export default service;

本章就到这里

vue3 + vite + ts 后台项目搭建更文（一）