硅谷甄选 Blog_02-项目集成

皮皮伍同学

已于 2023-06-11 08:46:56 修改

阅读量680

点赞数

文章标签： vue.js typescript

于 2023-06-11 08:44:21 首次发布

本文链接：https://blog.csdn.net/CYW2014_HUST/article/details/131149780

版权

集成 element-plus

硅谷甄选运营平台，UI 组件库采用的 element-plus，因此需要集成 element-plus 插件

官网地址：https://element-plus.gitee.io/zh-CN/

安装

pnpm install element-plus

用法

完整引入

// 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');

Volar 支持

如果我们使用 Volar，那就在tsconfig.json中通过compilerOptions.type指定全局组件类型

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

按需引入

想要按需引入，我们需要使用额外的插件来导入要使用的组件

自动导入

首先我们需要安装unplugin-vue-components和unplugin-auto-import两款插件

pnpm install -D unplugin-vue-components unplugin-auto-import

Vite

//vite.config.ts
import { defineConfig } from 'vite';
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()],
        }),
    ]
});

UI 组件使用

App.vue示例：

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

<script setup lang="ts">

</script>

<style scoped>

</style>

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": {
        "baseUrl": "./",	// 解析非相对模块的基地址，默认是当前目录
        "path": {
            // 路径映射，相对于 baseUrl
            "@/*": ["src/*"]
        }
    }
}

环境变量的配置

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

开发环境（development）

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

测试环境（testing）

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

生成环境（production）

生成环境是指正式提供对外服务的，一般会关掉错误报告，打开错误日志

注意：一般情况下，一个环境对应一台服务器，也有的公司开发与测试环境是一台服务器

项目根目录分别添加开发、测试和生成环境的文件

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

文件内容：

# 变量必须以 VITE_ 为前缀才能暴露给外部读取
NODE_ENV = 'development'
VITE_APP_TITLE = '硅谷甄选运营平台'
VITE_APP_BASE_API = '/dev-api'
VITE_SERVE="http://xxxx.com"

# 变量必须以 VITE_ 为前缀才能暴露给外部读取
NODE_ENV = ‘test’
VITE_APP_TITLE = '硅谷甄选运营平台'
VITE_APP_BASE_API = '/test-api'
VITE_SERVE="http://yyyy.com"

NODE_ENV = 'production'
VITE_APP_TITLE = '硅谷甄选运营平台'
VITE_APP_BASE_API = '/prod-api'
VITE_SERVE="http://zzzz.com"

配置运行命令：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"
},

通过 import.meta.env获取环境变量

SVG 图标配置

在开发项目的时候经常会用到 svg 矢量图，而且我们使用 SVG 以后，页面上加载的不再是图片资源

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

安装 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({
                iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
                symbolId: 'icon-[dir]-[name]',
            }),
        ],
    },
}

入口文件导入

import 'virtual:svg-icons-register';

svg 封装为全局组件

因为项目很多模块需要使用图标，因此把它封装为全局组件

在 src/components 目录下创建一个 SvgIcon 组件

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

<script setup lang="ts">
defineProps({
  prefix: {
    type: String,
    default: '#icon-',
  },
  name: String,
  width: {
    type: String,
    default: '16px',
  },
  height: {
    type: String,
    default: '16px',
  },
})
</script>

<style scoped></style>

在 App.vue 中引入

<template>
  <div>
    <h1>SVG 测试</h1>
    <svg-icon name="phone" width="100px" height="100px"></svg-icon>
  </div>
</template>

<script setup lang="ts">
  import SvgIcon from '@/components/SvgIcon/index.vue';
</script>

<style scoped>

</style>

SvgIcon 注册为全局组件

在 src/components 文件夹下新建 index.ts：

// 引入项目中的全部的全局组件
import SvgIcon from './SvgIcon/index.vue'

// 全局对象
const allGlobalComponent = { SvgIcon }
// 对外暴露插件对象
export default {
  install(app) {
    // 注册全部的全局组件
    Object.keys(allGlobalComponent).forEach((key) => {
      app.component(key, allGlobalComponent[key])
    })
  },
}

集成 sass

我们目前在组件内部已经可以使用 scss 样式，因为在配置 styleLint 工具的时候，项目当中已经安装过 sass sass-loader，因此我们在组件内可以使用 scss 语言，需要加上 lang=“scss”

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

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

在 src/styles 目录下创建一个 index.scss 文件，当然项目中需要用到清除默认样式，因此在 index.scss 引入 reset.scss

@import reset.scss

在入口文件引入

import '@/styles'

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

在 style/variable.scss 创建一个 variable.scss 文件

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

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

@import "./src/styles/variable.scss";后面的;不要忘记，不然会报错

配置完毕我们会发现 scss 提供这些全局变量可以在组件样式中使用了

mock 数据

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

pnpm install -D vite-plugin-mock mock.js

在 vite.config.ts 配置文件启用插件

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

export default defineConfig(({ command, mode}) => {
    return {
        plugins: [
            viteMockServe({
                localEnabled: command === 'serve',
            })
        ]
    }
})

在根目录创建 mock 文件夹：去创建我们需要的 mock 数据与接口

// user.ts
//createUserList:次函数执行会返回一个数组,数组里面包含两个用户信息
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 i axios

最后通过 axios 测试接口

axios 二次封装

在开发项目的时候避免不了与后端进行交互，因此我们需要使用 axios 插件实现发送网络请求，在开发项目的时候我们经常会把 axios 进行二次封装

目的：

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

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

//进行axios二次封装:使用请求与响应拦截器
import axios from "axios";
import { ElMessage } from "element-plus";

//第一步:利用axios对象的create方法,去创建axios实例(其他的配置:基础路径、超时的时间)
let request = axios.create({
    //基础路径
    baseURL: import.meta.env.VITE_APP_BASE_API,//基础路径上会携带/api
    timeout: 5000//超时的时间的设置
});

//第二步:request实例添加请求与响应拦截器
request.interceptors.request.use((config) => {
    //config配置对象,headers属性请求头,经常给服务器端携带公共参数
    //返回配置对象
    return config;
});

//第三步:响应拦截器
request.interceptors.response.use((response) => {
    //成功回调
    //简化数据
    return response.data;
}, (error) => {
    //失败回调:处理http网络错误的
    //定义一个变量:存储网络错误信息
    let message = '';
    //http状态码
    let status = error.response.status;
    switch (status) {
         case 401:
              message = "TOKEN过期"
              break;
         case 403:
              message = "无权访问"
              break;
         case 404:
              message = "请求地址错误";
              break;
         case 500:
              message = "服务器出现问题"
              break;
         default:
              message = "网络出现问题";
              break;
    }
    //提示错误信息
    ElMessage({
         type: 'error',
         message
    });
    return Promise.reject(error);
});
//对外暴露
export default request;

API 接口统一管理

创建 src/api 文件夹，里面存放各类 API 接口

在 src/api/user 文件夹下创建 index.ts 文件，用于统一管理项目中用户相关的接口：

// index.ts
// 统一管理项目中用户相关的接口
import request from '@/utils/request';
import type { loginForm, loginResponseData } from './type';
import { userResponseData } from './type';
// 统一管理接口
enum API {
    LOGIN_URL="/user/login",
    USERINFO_URL="/user/info",
}
// 暴露请求函数
// 登录接口方法
export const reqLogin = (data: loginForm ) => request.post<any, loginResponseData>(API.LOGIN_URL, data);
// 获取用户信息接口方法
export const reqUserInfo = () => request.get<any, userResponseData>(API.USERINFO_URL);

创建 type.ts 文件，设定类型：

// 登录接口需要携带参数 ts 类型
export interface loginForm {
    username: string,
    password: string
}

interface dataType {
    token: string,
}

// 登录接口返回数据类型
export interface loginResponseData {
    code: number,
    data: dataType,
}

// 定义服务器返回用户信息相关的数据类型
interface userInfo {
    userId: number,
    avatar: string,
    username: string,
    password: string,
    desc: string,
    roles: string[],
    buttons: string[],
    routes: string[],
    token: string
}
interface user {
    checkUser: userInfo
}
export interface userResponseData {
    code: number,
    data: user
}

模板的路由配置

安装 vue-router

pnpm install vue-router

在 src 下创建 views 文件夹，在其中创建 home、login、404 文件夹和它们的 index.vue

接着在 src 下创建 router 文件夹，添加 index.ts 文件：

// index.ts
// 通过 vue-router 插件实现模板路由配置
import { createRouter, createWebHashHistory } from 'vue-router';
import { constantRoute } from './routes';

// 创建路由器
let router = createRouter({
    // 路由模式 hashi
    history: createWebHashHistory(),
    routes: constantRoute,
    // 滚动模式
    scrollBehavior() {
        return {
            left: 0,
            top: 0
        }
    }
});

export default router;

添加 routes.ts 文件

// 对外暴露配置路由
export const constantRoute = [
    {
        path: '/login',
        component: () => import('@/views/login/index.vue'),
        name: 'login', // 命名路由
    },
    {
        path: '/',
        component: () => import('@/views/home/index.vue'),
        name: 'layout',
    },
    {
        path: '/404',
        component: () => import('@/views/404/index.vue'),
        name: '404',
    },
    {
        path: '/:pathMatch(.*)*',
        redirect: '/404',
        name: 'Any',
    }
]

在入口文件中注册：

// main.ts
import router from '@/router/index';

app.use(router);

最后在 App.vue 中测试：

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue';
import { reqLogin } from './api/user/index';

onMounted(() => {
  reqLogin({ username: 'admin', password: '111111'})  
})
</script>

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