Vue3+vite+vue-router+pinia+axios+typescript 搭建企业级开发脚手架

最近打算新项目，因为没有技术显示所以打算用一下还算比较新的技术，就直接上vite了

项目搭建

如果没有安装vite的话需要先执行

$ npm install vite -g

初始化vite 项目

$ yarn crate vite

$ npm create vite@last

之后按照提示操作即可

$ cd {file_name}

$ yarn

$ yarn dev

这样就能启动一个vite 项目了

这是 vite 初始化的文件目录

配置alias

$ yarn add path @type/node -D

// vite.config.ts
function resolveSrc (str) {
  return resolve(__dirname, str)
}
resolve: {
    alias: {
      '@': resolveSrc('src')
    }
}

"compilerOptions": {
    "paths": {
      "@/*": ["src/*"] 
    },
    baseUrl: "./"
}

安装elementplus

$ yarn add element-plus -D

如果不在乎打包大小的的话

// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

如果想要按需引入的话

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

然后修改 vite.config.ts文件

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
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()],
    }),
    vue()
  ]
})

安装vue-router

$ yarn add vue-router -D

导出一个router变量

然后在main.ts中进行配置

安装 Pinia

先进行安装

$ yarn add pinia -D

然后在main.js中配置

import { createPinia } from 'pinia'
const app = createApp(App)
app.use(createPinia())

之后定义仓库

使用

配置 preitter

文件根目录新建一个 .prettierrc文件

{
  "semi": false,
  "singleQuote": true,
  "printWidth": 100,
  "bracketSpacing": true
}

安装axios

$ yarn add axios -D 新建services文件夹 index.ts 文件

/*
 * @Author: 马强
 * @since: 2022-06-28 19:02:05
 * @lastTime: 2022-07-01 15:49:50
 * @LastEditors: Moriarty
 * @Descriptions: file content
 */
import axios, { AxiosError, AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios'
import dayjs from 'dayjs'
import qs from 'qs'
// axios.interceptors.request.use(
//   (config) => {
//     console.log(config, 'config')
//     return config
//   },
//   (err) => {
//     return Promise.reject(err)
//   }
// )

// axios.interceptors.response.use((res) => {
//   return res
// })

const BASE_URL = ''
class Http {
  baseUrl: string
  headers: Record<string, string | number | boolean>
  protected readonly instance: AxiosInstance
  public constructor() {
    this.baseUrl = BASE_URL
    this.headers = {
      'content-type': 'application/json',
    }
    this.instance = axios.create({
      baseURL: this.baseUrl,
      timeout: 1000 * 60
    })
    this._initRequestConfig()
    this._initResponseConfig()
  }
  private _initRequestConfig () {
    this.instance.interceptors.request.use(
      this.handleRequestSuccess,
      this.handleRquestError
    )
  }
  private _initResponseConfig () {}
  private handleRequestSuccess = (config: AxiosRequestConfig) => {
    return config
  }
  private handleRquestError = (err: AxiosError) => err
  public get<T = any, R = any>(url: string, data?: AxiosRequestConfig<T>) {
    return this.instance.get<R>(url, data)
  }
  // get<T = any, R = AxiosResponse<T>, D = any>(url: string, config?: AxiosRequestConfig<D>): Promise<R>;

}

const $http = new Http()

export {
  $http
}