Vue - 集成 element-plus、svg、mock、sass，配置文件夹别名、环境变量等

---

一、集成 element-plus

• element-plus 官网: https://element-plus.gitee.io/zh-CN/

---

安装

pnpm install element-plus @element-plus/icons-vue

---

入口文件 main.ts 全局安装 element-plus, element-plus 默认支持语言英语设置为中文

import { createApp } from "vue";
import "./style.css";
import App from "./App.vue";

import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css'

//@ts-ignore忽略当前文件ts类型的检测否则有红色提示(打包会失败)

import zhCn from 'element-plus/dist/locale/zh-cn.mjs'

const app = createApp(App)
app.use(ElementPlus, {
    locale: zhCn
})

app.mount("#app");

打包：npm run build

---

Element Plus 全局组件类型声明

// tsconfig.json
{
  "compilerOptions": {
    // ...
    "types": ["element-plus/global"]
  }
}

---

配置完毕可以测试 element-plus 组件与图标的使用.
App.vue 中编写：

<template>
<div>
<el-button type="primary" size="default" >主要按钮el-button>
div>
template>

---

运行

npm run dev

---

二、src别名的配置

在开发项目的时候文件与文件关系可能很复杂，因此需要给src文件夹配置一个别名。

vite.config.ts 中添加配置项

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

export default defineConfig({
    plugins: [vue()],
    resolve: {
        alias: {
            "@": path.resolve("./src") // 相对路径别名配置，使用 @ 代替 src
        }
    }
})

---

TypeScript 编译配置

tsconfig.json 的 compilerOptions 选项添加两个配置项：

{
  "compilerOptions": {
    "baseUrl": "./", // 解析非相对模块的基地址，默认是当前目录
    "paths": { //路径映射，相对于baseUrl
      "@/*": ["src/*"] 
    }
  }
}

---

如此以来，main.ts 中原本的

import App from "./App.vue";

// 可替换为
import App from "@/App.vue";

---

测试，在 components 文件夹下，新建 Test.vue

---

三、环境变量的配置

项目开发过程中，至少会经历开发环境、测试环境和生产环境(即正式环境)三个阶段。
不同阶段请求的状态(如接口地址等)不尽相同，若手动切换接口地址是相当繁琐且易出错的。
于是环境变量配置的需求就应运而生，我们只需做简单的配置，把环境状态切换的工作交给代码。

---

开发环境（development）
顾名思义，开发使用的环境，每位开发人员在自己的dev分支上干活，开发到一定程度，同事会合并代码，进行联调。

测试环境（testing）
测试同事干活的环境啦，一般会由测试同事自己来部署，然后在此环境进行测试

生产环境（production）
生产环境是指正式提供对外服务的，一般会关掉错误报告，打开错误日志。(正式提供给客户使用的环境。)

---

1、在项目根目录下，添加以下三个文件：

.env.development
.env.production
.env.test

---

2、文件内容
注：变量必须以 VITE_ 为前缀才能暴露给外部读取

NODE_ENV = 'development'
VITE_APP_TITLE = '运营平台'
VITE_APP_BASE_API = '/dev-api'

---

NODE_ENV = 'production'
VITE_APP_TITLE = '运营平台'
VITE_APP_BASE_API = '/prod-api'

---

NODE_ENV = 'test'
VITE_APP_TITLE = '运营平台'
VITE_APP_BASE_API = '/test-api'

---

3、配置运行命令：
package.json 中添加：

 "scripts": {
    "dev": "vite --open",
    "build:test": "vue-tsc && vite build --mode test",
    "build:pro": "vue-tsc && vite build --mode production",
    "preview": "vite preview"
  },

---

4、测试获取环境变量

你可以再 main.js 中编写

console.log(import.meta.env);

---

四、SVG图标配置

使用SVG以后，页面上加载的不再是图片资源，这对页面性能来说是个很大的提升。
而且我们SVG文件比img要小的很多，放在项目中几乎不占用资源。

---

在 src 下创建 assets/icons 文件夹
将 svg 文件放到这里

---

一般调用 svg

svg 为图标外层容器节点，内部需要与 use 标签结合使用；
use 内部 xlink:href 指定执行用哪一个图标；属性值格式务必为 #icon-图标名称

<svg>
	<use xlink:href="#icon-phone">use>
<svg>


<svg>
	<use xlink:href="#icon-phone" fill="yellow">use>
<svg>


<svg style="width:30px;height:30px">
	<use xlink:href="#icon-phone" fill="yellow">use>
<svg>

---

安装/配置 SVG依赖插件

pnpm install vite-plugin-svg-icons -D

---

在vite.config.ts中配置插件

// 引入插件
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import path from 'path'

export default () => {
  return {
    plugins: [
      createSvgIconsPlugin({
        // Specify the icon folder to be cached
        iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
        // Specify symbolId format
        symbolId: 'icon-[dir]-[name]',
      }),
    ],
  }
}

---

封装 svg 组件

在 src/components 目录下创建一个SvgIcon文件夹，文件夹下新建 index.vue 文件，内容如下：

<template>
  <div>
    <svg :style="{ width: width, height: height }">
      <use :xlink:href="prefix + name" :fill="color"></use>
    </svg>
  </div>
</template>

<script setup lang="ts">

defineProps({
  //xlink:href属性值的前缀
  prefix: {
    type: String,
    default: '#icon-'
  },
  
  //svg矢量图的名字
  name: String,
  
  //svg图标的颜色
  color: {
    type: String,
    default: ""
  },
  
  //svg宽度
  width: {
    type: String,
    default: '16px'
  },
  
  //svg高度
  height: {
    type: String,
    default: '16px'
  }

})
</script> 

<style scoped></style>

---

测试使用

在 src-App.vue 中写入

<template>
	<svg-icon name="home" color="pink">svg-icon>
template>

<script>
import SvgIcon from '@/components/SvgIcon/index.vue'; 
script>

---

svg 封装为全局组件

---

入口文件 main.js 中导入

import 'virtual:svg-icons-register'

import SvgIcon from './SvgIcon/index.vue';
app.component('SvgIcon', SvgIcon);
app.mount('#app')

---

注册 components 文件夹内部全部全局组件

在 src/components 文件夹目录下创建一个 index.ts 文件：
对外暴露插件对象，用于注册 components 文件夹内部全部全局组件。

import SvgIcon from './SvgIcon/index.vue';
import Pagination from './Pagination/index.vue';
import type { App, Component } from 'vue';

//const components: { [name: string]: Component } = { SvgIcon };
const allGlobalComponents: { [name: string]: Component } = { SvgIcon, Pagination };

console.log(allGlobalComponents);
console.log(Object.keys(allGlobalComponents)); 

export default {
	// 务必叫做 install
    install(app: App) {
    	// 注册项目全部的全局组件 
        Object.keys(components).forEach((key: string) => {
        	// console.log(key);  // 组件名称
            app.component(key, components[key]);
        })
    }
}

---

在入口文件 main.ts 引入src/index.ts 文件,通过 app.use 方法安装自定义插件

import gloablComponent from './components/index';
app.use(gloablComponent);

---

五、集成sass

安装过 sass sass-loader,因此我们再组件内可以使用scss语法！需要加上 lang="scss"

<style scoped lang="scss"></style>

---

接下来我们为项目添加一些全局的样式

---

1、创建清除样式文件
src/styles 下新建文件：reset.scss
复制内容：https://www.npmjs.com/package/reset.scss?activeTab=code

---

2、在 src/styles 目录下创建一个 index.scss 文件

// 清除默认样式 
@import reset.scss

---

3、在入口文件 main.js 引入

import '@/styles'

---

4、但是你会发现在 src/styles/index.scss 全局样式文件中没有办法使用$变量。
因此需要给项目中引入全局变量$。

在 style/variable.scss 创建一个 variable.scss 文件，给项目提供 scss 全局变量。如：

$color:red;

---

App.vue 中调用：

<style scoped lang="scss">
div{
	h1 {
		color:$color;
	}
}
</style>

---

在 vite.config.ts 文件配置 如下:

export default defineConfig((config) => {
	css: {
      preprocessorOptions: {
      
        scss: {
          javascriptEnabled: true,
          additionalData: '@import "./src/styles/variable.scss";',
        },
        
      },
    },
	}
}

---

• @import "./src/styles/variable.less";后面的; 不要忘记，不然会报错。
• 配置完毕你会发现 scss 提供这些全局变量可以在组件样式中使用了。

---

六、mock数据

安装依赖：https://www.npmjs.com/package/vite-plugin-mock

pnpm install -D vite-plugin-mock mockjs

---

在 vite.config.js 配置文件启用插件。

import { UserConfigExport, ConfigEnv } from 'vite'
import { viteMockServe } from 'vite-plugin-mock'
import vue from '@vitejs/plugin-vue'

export default ({ command })=> {
  return {
    plugins: [
      vue(),
      viteMockServe({
        localEnabled: command === 'serve', // 保证开发阶段 可以使用 mock 接口 
      }),
    ],
  }
}

---

在根目录创建mock文件夹: 去创建我们需要mock数据与接口。
在mock文件夹内部创建一个user.ts文件

// 返回 用户信息数组
function createUserList() {
    return [
        {
            userId: 1,
            avatar:
                'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
            username: 'admin',
            password: '111111',
            desc: '平台管理员',
            roles: ['平台管理员'],
            buttons: ['cuser.detail'],
            routes: ['home'],
            token: 'Admin Token',
        },
        {
            userId: 2,
            avatar:
                'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
            username: 'system',
            password: '111111',
            desc: '系统管理员',
            roles: ['系统管理员'],
            buttons: ['cuser.detail', 'cuser.user'],
            routes: ['home'],
            token: 'System Token',
        },
    ]
}

// 对外暴露一个数组，包含两个接口：登陆、获取用户信息 
export default [
    // 用户登录接口
    {
        url: '/api/user/login',//请求地址
        method: 'post',//请求方式
        response: ({ body }) => {
            //获取请求体携带过来的用户名与密码
            const { username, password } = body;
            //调用获取用户信息函数,用于判断是否有此用户
            const checkUser = createUserList().find(
                (item) => item.username === username && item.password === password,
            )
            //没有用户返回失败信息
            if (!checkUser) {
                return { code: 201, data: { message: '账号或者密码不正确' } }
            }
            //如果有返回成功信息
            const { token } = checkUser
            return { code: 200, data: { token } }
        },
    },
    // 获取用户信息
    {
        url: '/api/user/info',
        method: 'get',
        response: (request) => {
            //获取请求头携带token
            const token = request.headers.token;
            //查看用户信息是否包含有次token用户
            const checkUser = createUserList().find((item) => item.token === token)
            //没有返回失败的信息
            if (!checkUser) {
                return { code: 201, data: { message: '获取用户信息失败' } }
            }
            //如果有返回成功信息
            return { code: 200, data: {checkUser} }
        },
    },
]

---

安装axios

pnpm install axios

---

最后通过axios测试接口。

---

七、axios二次封装

目的:

1. 使用请求拦截器，可以在请求拦截器中处理一些业务(开始进度条、请求头携带公共参数)
2. 使用响应拦截器，可以在响应拦截器中处理一些业务(进度条结束、简化服务器返回的数据、处理http网络错误)

---

在 src 目录下创建 utils/request.ts

import axios from "axios";
import { ElMessage } from "element-plus";

//创建axios实例
let request = axios.create({
    baseURL: import.meta.env.VITE_APP_BASE_API,
    timeout: 5000
})

//请求拦截器
request.interceptors.request.use(config => {

// 返回配置对象；配置对象有个 请求头属性，经常给服务器端 携带公共参数 
    return config;
});

//响应拦截器
request.interceptors.response.use((response) => {
    return response.data;
}, (error) => {
    //处理网络错误
    let msg = '';
    let status = error.response.status;
    switch (status) {
        case 401:
            msg = "token过期";
            break;
        case 403:
            msg = '无权访问';
            break;
        case 404:
            msg = "请求地址错误";
            break;
        case 500:
            msg = "服务器出现问题";
            break;
        default:
            msg = "无网络";

    }
    ElMessage({
        type: 'error',
        message: msg
    })
    return Promise.reject(error);
});

// 对外暴露 
export default request;

---

测试

在 App.vue 中编写：

<script setup lang="ts">
import request from '@/utils/request';
import onMounted from 'vue';
</script>

---

八、API接口统一管理

在开发项目的时候，接口可能很多需要统一管理。
在src目录下去创建api文件夹去统一管理项目的接口；
如下：

//统一管理项目用户相关的接口

import request from '@/utils/request'

import type {
 loginFormData,
 loginResponseData,
 userInfoReponseData,
} from './type'

//项目用户相关的请求地址

enum API { 
 LOGIN_URL = '/admin/acl/index/login', 
 USERINFO_URL = '/admin/acl/index/info', 
 LOGOUT_URL = '/admin/acl/index/logout',

}
//登录接口
export const reqLogin = (data: loginFormData) =>
 request.post<any, loginResponseData>(API.LOGIN_URL, data)
//获取用户信息

export const reqUserInfo = () =>

 request.get<any, userInfoReponseData>(API.USERINFO_URL)

//退出登录

export const reqLogout = () => request.post<any, any>(API.LOGOUT_URL)

---

2023-07-21