Vite + Vue3.0 项目基础结构

此文章为学习笔记
原文章链接：备战2021：Vite2项目最佳实践

目录：
+ 定义别名
+ 路由
+ 数据请求封装
+ Mock 插件应用
+ 状态管理
+ 样式管理
+ 导入 UI 库

Vite + Vue3.0

定义别名

定义前：页面中引入组件的路径是相对路径或绝对路径。

定义方法：

此时 comps 就指向了路径/src/components。

在页面中使用：

注意：修改 vite.config.js 配置文件需要重启项目。

路由

安装路由

$ npm install vue-router@next -S -D

配置路由

/src/router/index.js

import { createRouter, createWebHashHistory } from 'vue-router';

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    // @ 是 /src 的别名
    { path: '/', component: () => import('@/views/Home.vue') },
    { path: '/user', component: () => import('@/views/User.vue') }
  ]
})

export default router

配置 main.js

import router from "@/router"
createApp(App).use(router).mount('#app')

使用

App.vue

效果

数据请求封装

统一封装数据请求服务，有利于解决以下问题：

• 统一配置请求
• 请求、响应统一处理

安装 axios

$ npm install axios -S -D

配置生产环境文件

在根目录下添加配置文件 .env.development

VITE_APP_BASE_API= '请求的 baseURL'

注意：修改该文件后需要重启项目。

请求封装

utils/request.js

import axios from 'axios'

// 创建 axios 实例
const service = axios.create({
  // 在请求地址前面加上 baseURL
  baseURL: import.meta.env.VITE_APP_BASE_API,
  // 请求超时时间
  timeout: 5000
})

// 请求拦截
service.interceptors.request.use(
  (config) => {
    // 在请求前做某些事情
    return config
  },
  (error) => {
    // 处理请求错误
    return Promise.reject(error)
  }
)

// 响应拦截器
service.interceptors.response.use(
  (response) => {
    // 响应成功
    return response
  },
  (error) => {
    // 处理响应错误
    return Promise.reject(error)
  }
)

export default service

封装第一个接口

api/user.js

import service from '@/utils/request.js'

export const getUsers = (params) => {
  return service({
    url: '/getUsers',
    method: 'get',
    params
  })
}

效果

App.vue

<script setup>
import { getUsers } from '@/api/user.js'

getUsers()
  .then(() => {
    console.log('请求成功')
  })
  .catch(() => {
    console.log('请求失败')
  })
</script>

接口不存在，报错是正常的。

目录结构变化

Mock 插件应用

安装插件

$ npm install mockjs -D
$ npm install vite-plugin-mock cross-env -D

配置 package.json

"scripts": {
  "dev": "cross-env NODE_ENV=development vite",
}

配置 vite-config.js

import { viteMockServe } from 'vite-plugin-mock'

export default defineConfig({
  // supportTs: 是否用了ts，可以根据自己选择 true or false
  plugins: [ viteMockServe({ supportTs: trues }) ]
})

封装 user.ts 文件

/mock/user.ts（ 与node_modules 目录同级 ）

// user.ts
import { MockMethod } from 'vite-plugin-mock'

export default [
  {
    url: '/api/getUsers',
    method: 'get',
    response: () => {
      return {
        code: 0,
        message: 'ok',
        data: [
          { name: 'zlz', age: 17 },
          { name: 'sjw', age: 18 }
        ]
      }
    }
  }
] as MockMethod[]

使用

App.vue

在数据请求封装步骤中请求失败的接口已经可以拿到 user.ts 文件模拟的数据了。

状态管理

安装 Vuex

$ npm install vuex@next -S -D

配置 Vuex

/src/store/index.js

import { createStore } from 'vuex'

const store = createStore({
  state: {
    count: 10
  }
})

export default store

配置 main.js

import store from '@/store'

createApp(App).use(store).mount('#app')

使用

App.vue

效果

样式管理

安装 sass

$ npm install sass -S -D

配置样式

index.scss：全局样式

user.scss：单文件样式

// index.scss
* {
  background-color: beige;
}

// user.scss
.container {
  background-color: rgb(88, 228, 60);
}

使用

User.vue

<style scoped>
@import 'styles/user.scss';  // styles 是 /src/styles 的别名，记得在 vite.config.js 添加
</style>

效果

导入UI库

UI 库采用了 element3

安装

$ npm install -S -D

按需引入

// 引入完整样式
import 'element3/lib/theme-chalk/index.css'
// 按需引入组件
import { ElButton } from 'element3'

createApp(App)
  .use(ElButton)
  .mount('#app')

使用

效果

有错误的地方欢迎大家指出，😁🤞