- Vue Router 和 Pinia 可以在创建 Vue 应用时一并安装，因为 Vue Router 和 Pinia 都需要通过
createXXX()创建实例并使用app.use(xxx)注册插件，所有这两个插件通过相同的方式进行注册，即setupXXX(app)- element-plus、tailwindcss、vite-plugin-mock 这三个插件都需要配置 Vite plugin，即
vite.config.ts的plugins选项，所以放在plugins目录下采用相同的方式进行注册，并统一管理- axios 归为工具类，所以放在
utils目录下，并统一管理
pnpm create vite- 在
src目录下新建.env文件，用于管理环境变量
VITE_BASE_URL = 'http://localhost:5173'- 在
src目录下新建vite-env.d.ts文件，用于提供类型定义
/// <reference types="vite/client" />
interface ImportMetaEnv {
readonly VITE_BASE_URL: string
}
interface ImportMeta {
readonly env: ImportMetaEnv
}pnpm create vue@latestpnpm install
pnpm add
pnpm dev
pnpm buildpnpm add vue-router@4-
在
src目录下新建router文件夹，在router目录下新建index.ts文件 -
在
index.ts中创建路由器实例
const router = createRouter({
// ...
})
// 方式1：直接导出路由器实例
export default router
// 方式2：导出注册函数
export function setupRouter(app: App) {
app.use(router)
}- 在
main.ts中注册路由器插件
// 方式1：导入路由器实例并注册
import router from './router'
app.use(router)
// 方式2：导入注册函数并调用
import { setupRouter } from './router'
setupRouter(app)pnpm add pinia- 方式 1：在
main.ts中创建一个pinia实例（根 store）并将其传递给应用
import { createPinia } from 'pinia'
app.use(createPinia())-
方式 2：在
src目录下新建stores文件夹，在stores目录下新建index.ts文件 -
在
index.ts中创建Pinia实例，并导出注册函数
const store = createPinia()
export function setupStore(app: App) {
app.use(store)
}- 在
main.ts中导入注册函数并调用
import { setupStore } from './stores'
setupStore(app)pnpm add axios-
在
src目录下新建utils文件夹，在utils目录下新建axios文件夹，在axios目录下新建Axios.ts类文件，导出Axios类 -
在
axios目录下新建index.ts类文件，导入Axios类新建一个Axios实例
import type { AxiosRequestConfig } from 'axios'
import Axios from './Axios'
const config: AxiosRequestConfig = {
baseURL: import.meta.env.VITE_BASE_URL,
timeout: 5000,
}
const axiosUtil = new Axios(config)
export default axiosUtil- 在
utils目录下新建index.ts，统一管理utils目录下的所有工具类
import axiosUtil from './axios/index'
const util = { axiosUtil }
export default utilpnpm install element-plus
pnpm add -D unplugin-vue-components unplugin-auto-import- 在
src目录下新建plugins文件夹，在plugins目录下新建element-plus文件夹，在element-plus目录下新建index.ts文件，导出vite.config.ts的plugins选项
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
const elementPlusPlugin = [
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
]
export default elementPlusPluginpnpm add tailwindcss @tailwindcss/vite- 在
plugins目录下新建tailwindcss文件夹，在tailwindcss目录下新建index.ts文件，导出vite.config.ts的plugins选项
import tailwindcss from '@tailwindcss/vite'
const tailwindcssPlugin = [tailwindcss()]
export default tailwindcssPlugin- 在
tailwindcss目录下新建index.css文件，导入Tailwind CSS
@import 'tailwindcss';- 在
main.ts中导入index.css
import './plugins/tailwindcss/index.css'pnpm add mockjs
pnpm add vite-plugin-mock -D- 在
plugins目录下新建vite-plugin-mock文件夹，在vite-plugin-mock目录下新建index.ts文件，导出vite.config.ts的plugins选项
import { viteMockServe } from 'vite-plugin-mock'
const vitePluginMockPlugin = [
viteMockServe({
// default
mockPath: 'mock',
enable: true,
}),
]
export default vitePluginMockPlugin- 在
plugins目录下新建index.ts，统一管理plugins目录下的所有插件
import tailwindcssPlugin from './tailwindcss/index'
import elementPlusPlugin from './element-plus/index'
import vitePluginMockPlugin from './vite-plugin-mock/index'
export function setupPlugins() {
return [...tailwindcssPlugin, ...elementPlusPlugin, ...vitePluginMockPlugin]
}- 在根目录下新建
mock文件夹，在mock目录下新建文件用于mock后端API提供的数据，如新建user.ts文件，用于mock用户数据
import type { MockMethod } from 'vite-plugin-mock'
export default [
{
url: '/api/getUser',
method: 'get',
response: () => {
return {
code: 0,
data: {
name: 'Jackie',
},
}
},
},
] as MockMethod[]- 在
src目录下新建apis文件夹，用于统一管理api，如新建testGetUser.ts用于测试获取用户数据的接口
import util from '../utils/index'
const http = util.axiosUtil
export function getUser() {
return http.request({
url: '/api/getUser',
method: 'get',
})
}- 在任一
.ts文件中调用函数即可
import { getUser } from '@/apis/testGetUser.ts'
getUser()
.then((res) => console.log(res))
.catch((err) => console.log(err))