三、项目集成

放生960
163 阅读11分钟

3.1集成element-plus

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

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

//安装上element ui 和 对应 element ui 的 icons
pnpm install element-plus @element-plus/icons-vue

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

import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css'
//@ts-ignore忽略当前文件ts类型的检测否则有红色提示(打包会失败)
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
app.use(ElementPlus, {
    locale: zhCn
})

Element Plus全局组件类型声明

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

配置完毕可以测试element-plus组件与图标的使用.

3.2src别名的配置

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

起了别名之后所有的地方要进行导报都可以用@来表示在src下，然后来引入文件，如果vscode中安装了 vetur 用@引入文件会有红色的波浪线，这是插件的问题，项目是可以正常运行的，如果介意可以将此插件禁用掉

// vite.config.ts
import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
 // path 是node.js提供的，专门用来获取路径的，可以获取相对路径也可以获取绝对路径
import path from 'path'
export default defineConfig({
    plugins: [vue()],
    resolve: {
        alias: {
            "@": path.resolve("./src") // 相对路径别名配置，使用 @ 代替 src
        }
    }
})

TypeScript 编译配置

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

3.3环境变量的配置

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

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

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

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

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

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

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

文件内容

# 变量必须以 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'

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

配置运行命令：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获取环境变量

​
​
<template>
  <div>
    <el-button type="primary" size="default" :icon="Edit" round>主要按钮</el-button>
     <el-button type="success" :icon="Star" >Success</el-button>
    <el-button type="info" plain>Info</el-button>
​
    <Test />
  </div>
</template>
​
<script setup lang="ts">
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from '@element-plus/icons-vue'
​
import Test from '@/components/Test.vue'
​
 console.log('获取环境变量======》',import.meta.env)
​
​
</script>
​
<style scoped></style>
​

3.4SVG图标配置

在开发项目的时候经常会用到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({
        // Specify the icon folder to be cached
        iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
        // Specify symbolId format
        symbolId: 'icon-[dir]-[name]',
      }),
    ],
  }
}

因为在上述的配置中配置了src/assets/icons，所以接下来新建对应的目录，并且去阿里矢量图标中下载对应的svg

图标地址： www.iconfont.cn/collections… （先加入公务车然后下载）

image-20230819111116875.png

入口文件main.ts导入

import 'virtual:svg-icons-register'

3.4.1svg封装为全局组件

因为项目很多模块需要使用图标,因此把它封装为全局组件,分装全局组件不用在每个vue文件手动显示的引入，即可使用！！！

在src/components目录下创建一个SvgIcon组件:代表如下

image-20230819111340584.png

<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/components文件夹目录下创建一个index.ts文件：用于注册components文件夹内部全部全局组件！！！

是通过自定义插件的形式来自定义全局组件的

// 引入项目中 的全部的全局组件
import SvgIcon from './SvgIcon/index.vue';
import type { App, Component } from 'vue';
const components: { [name: string]: Component } = { SvgIcon };
// 对外暴露插件对象
export default {
    //务必叫install方法，会传入一个App对象
    install(app: App) {
        // 注册项目中全部的全局组件
        Object.keys(components).forEach((key: string) => {
            // 注册全局组件
            app.component(key, components[key]);
        })
    }
}

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

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

在App.vue中使用测试 （不需要导包直接使用）

​
​
<template>
  <div>
    <el-button type="primary" size="default" :icon="Edit" round>主要按钮</el-button>
     <el-button type="success" :icon="Star" >Success</el-button>
    <el-button type="info" plain>Info</el-button>
    // 使用图标
    <svg-icon name="home" width=100 height=100 color="red"/>
  </div>
</template>
​
<script setup lang="ts">
import {Check,Delete, Edit,Message, Search,Star,} from '@element-plus/icons-vue'
​
</script>
<style scoped></style>
​

3.5集成sass

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

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

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

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

也就是分别在src/styles下新建三个 .scss 文件，index.scss , reset.scss, variable.scss

image-20230819115930706.png

填充reset.scss 文件，当前文件需要去npm官网查询code reset.scss - npm search (npmjs.com)

image-20230819114918217.png

image-20230819115303334.png

reset.scss

/**
 * ENGINE
 * v0.2 | 20150615
 * License: none (public domain)
 */
​
 *,
 *:after,
 *:before {
     box-sizing: border-box;
 
     outline: none;
 }
 
 html,
 body,
 div,
 span,
 applet,
 object,
 iframe,
 h1,
 h2,
 h3,
 h4,
 h5,
 h6,
 p,
 blockquote,
 pre,
 a,
 abbr,
 acronym,
 address,
 big,
 cite,
 code,
 del,
 dfn,
 em,
 img,
 ins,
 kbd,
 q,
 s,
 samp,
 small,
 strike,
 strong,
 sub,
 sup,
 tt,
 var,
 b,
 u,
 i,
 center,
 dl,
 dt,
 dd,
 ol,
 ul,
 li,
 fieldset,
 form,
 label,
 legend,
 table,
 caption,
 tbody,
 tfoot,
 thead,
 tr,
 th,
 td,
 article,
 aside,
 canvas,
 details,
 embed,
 figure,
 figcaption,
 footer,
 header,
 hgroup,
 menu,
 nav,
 output,
 ruby,
 section,
 summary,
 time,
 mark,
 audio,
 video {
     font: inherit;
     font-size: 100%;
 
     margin: 0;
     padding: 0;
 
     vertical-align: baseline;
 
     border: 0;
 }
 
 article,
 aside,
 details,
 figcaption,
 figure,
 footer,
 header,
 hgroup,
 menu,
 nav,
 section {
     display: block;
 }
 
 body {
     line-height: 1;
 }
 
 ol,
 ul {
     list-style: none;
 }
 
 blockquote,
 q {
     quotes: none;
     &:before,
     &:after {
         content: '';
         content: none;
     }
 }
 
 sub,
 sup {
     font-size: 75%;
     line-height: 0;
 
     position: relative;
 
     vertical-align: baseline;
 }
 sup {
     top: -.5em;
 }
 sub {
     bottom: -.25em;
 }
 
 table {
     border-spacing: 0;
     border-collapse: collapse;
 }
 
 input,
 textarea,
 button {
     font-family: inhert;
     font-size: inherit;
 
     color: inherit;
 }
 
 select {
     text-indent: .01px;
     text-overflow: '';
 
     border: 0;
     border-radius: 0;
 
     -webkit-appearance: none;
        -moz-appearance: none;
 }
 select::-ms-expand {
     display: none;
 }
 
 code,
 pre {
     font-family: monospace, monospace;
     font-size: 1em;
 }

在index.scss中引入reset.scss

// 引入清楚的默认样式
@import './reset.scss'

在入口文件main.ts引入(会把当前包下所有的scss文件都引入)

import { createApp } from 'vue'
import App from './App.vue'
// 引入 element-plus 插件与样式
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css'
//@ts-ignore忽略当前文件ts类型的检测否则有红色提示(打包会失败)
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
// svg 插件需要引入的配置代码
import 'virtual:svg-icons-register'
// 引入自定义插件对象：注册整个项目的全局组件
import gloablComponent from '@/components/index';
// 获取应用实列对象
const app = createApp(App)
// 安装element-plus插件
app.use(ElementPlus, {
    locale: zhCn
});
// 安装自定义插件--> 会调用@/components/index.js中的方法
app.use(gloablComponent);
// +++++ 引入模板的全局样式
import '@/styles/index.scss'
​
// 将应用挂载到挂载点
app.mount('#app')
​

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

在style/variable.scss这个文件就是专门用来编写全局的配置scss文件的

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

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
​
​
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(),
  createSvgIconsPlugin({
    // Specify the icon folder to be cached
    iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
    // Specify symbolId format
    symbolId: 'icon-[dir]-[name]',
  })
  ],
  resolve: {
    alias: {
      "@": path.resolve("./src") // 相对路径别名配置，使用 @ 代替 src
    }
  },
  // +++++++
  css: {
    preprocessorOptions: {
      scss: {
        javascriptEnabled: true,
        additionalData: '@import "./src/styles/variable.scss";',
      },
    },
  },
})
​

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

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

测试一下,

在variable.less配置一个全局的样式颜色

​
$base_color : red;

在App.vue中测试使用

<template>
  <div>
  <h1>测试代码</h1>
  </div>
</template>
<script setup lang="ts">
import {ref,reactive} from "vue"
</script>
<style lang="scss" scoped>
​
div{
  h1{
    color:$base_color
  }
}
​
</style>
​

测试结果

image-20230819121404519.png

3.6mock数据

安装依赖:www.npmjs.com/package/vit…

注意要使用vite-plugin-mock@2.9.6这个版本，如果安装最新的可能在配置 vite.config.js时localEnabled: command === 'serve'报错

pnpm install -D mockjs vite-plugin-mock@2.9.6 mockjs

在 vite.config.js 配置文件启用插件。（需要改造之前的写法，引入箭头函数的写法）

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue' // +++++++++
import path from 'path'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import { viteMockServe } from 'vite-plugin-mock'
​
// https://vitejs.dev/config/
export default defineConfig(({ command }) => {
  return {
    plugins: [vue(),
    createSvgIconsPlugin({
      // Specify the icon folder to be cached
      iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
      // Specify symbolId format
      symbolId: 'icon-[dir]-[name]',
    }),
  // +++++++++
    viteMockServe({
      localEnabled: command === 'serve', //保证开发阶段可以使用mock的数据
    })
    ],
    resolve: {
      alias: {
        "@": path.resolve("./src") // 相对路径别名配置，使用 @ 代替 src
      }
    },
    css: {
      preprocessorOptions: {
        scss: {
          javascriptEnabled: true,
          additionalData: '@import "./src/styles/variable.scss";',
        },
      },
    },
  }
})
​

在根目录创建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测试接口！！！

在main.ts 测试即可 (每次测试完记得清除测试数据)

import { createApp } from 'vue'
import App from './App.vue'
// 引入 element-plus 插件与样式
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css'
//@ts-ignore忽略当前文件ts类型的检测否则有红色提示(打包会失败)
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
// svg 插件需要引入的配置代码
import 'virtual:svg-icons-register'
// 引入自定义插件对象：注册整个项目的全局组件
import gloablComponent from '@/components/index';
// 获取应用实列对象
const app = createApp(App)
// 安装element-plus插件
app.use(ElementPlus, {
    locale: zhCn
});
// 安装自定义插件--> 会调用@/components/index.js中的方法
app.use(gloablComponent);
// 引入模板的全局样式
import '@/styles/index.scss'
​
// 测试axios +++++++
import axios from 'axios';
// 测试  +++++++  
axios({
    url: '/api/user/login',
    method: 'post',
    data: {
        username: 'admin',
        password: '111111'
    }
})
​
​
// 将应用挂载到挂载点
app.mount('#app')
​

image-20230819142414340.png

3.7axios二次封装

在开发项目的时候避免不了与后端进行交互,因此我们需要使用axios插件实现发送网络请求。在开发项目的时候

我们经常会把axios进行二次封装。

目的:

1:使用请求拦截器，可以在请求拦截器中处理一些业务(开始进度条、请求头携带公共参数)

2:使用响应拦截器，可以在响应拦截器中处理一些业务(进度条结束、简化服务器返回的数据、处理http网络错误)

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

image-20230819150249610.png

// 进行 axios 二次封装：使用请求与响应拦截器
import axios from "axios";
import { ElMessage } from "element-plus";
//第一步 创建axios实例（可配置：基础路径，超时时间等）
let request = axios.create({
  // 基础路径
    baseURL: import.meta.env.VITE_APP_BASE_API, // 基础路径上会携带 /api ，因为在我们的mock的数据中是以api开头的，记得去改全局环境变量 VITE_APP_BASE_API 中的数据
    timeout: 5000  // 超时时间
})
//第二步：request实列添加请求拦截器
request.interceptors.request.use(config => {
  // config 配置对象，包含 headers 属性经常给服务端携带公共参数，如token等
  
  // 返回一个配置对象
    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中测试 (每次测试完记得清除)

<template>
  <div>
    <h1>测试axios 二次封装</h1>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import request from '@/utils/request'
​
// 当组件挂载完毕发送一次请求
onMounted(() => {
  request({
    // 注意url中要去除前綴/api
    url: '/user/login',
    method: 'post',
    data: {
      username: 'admin',
      password: '111111',
    },
  }).then((res) => {
    console.log(res)
  })
})
</script>
<style lang="scss" scoped>
div {
  h1 {
    color: $base_color;
  }
}
</style>
​

image-20230819150350462.png

3.8API接口统一管理

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

分别新建，api ,acl,product,user

image-20230819174030779.png

type.ts

type.ts 主要定义一些响应和请求的ts对象

//定义用户相关数据的ts类型
//用户登录接口携带参数的ts类型
export interface loginFormData {
    username: string,
    password: string
}
​
//定义全部接口返回数据都拥有ts类型
export interface ResponseData{
    code:number,
    message:string,
    ok:boolean
}
​
//定义登录接口返回数据类型
export interface loginResponseData extends ResponseData{
       data:string
}
​
//定义获取用户信息返回数据类型
export interface userInfoReponseData extends ResponseData{
    data:{
        routes:string[],
        buttons:string[],
        roles:string[],
        name:string,
        avatar:string
    }
}

index.ts

//统一管理咱们项目用户相关的接口
import request from "@/utils/request";
import type { loginFormData, loginResponseData, userInfoReponseData } from "./type";
//项目用户相关的请求地址
enum API {
    LOGIN_URL = "/user/login",
    USERINFO_URL = "/user/login",
    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)

测试

在App.vue中测试

<template>
  <div>
    <h1>api测试</h1>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import request from '@/utils/request'
import {reqLogin} from '@/api/user'
​
// 当组件挂载完毕发送一次请求
onMounted(() => {
 reqLogin({username:'admin',password:'111111'}).then(res=>{
     console.log(res)
 })
​
})
</script>
<style lang="scss" scoped>
div {
  h1 {
    color: $base_color;
  }
}
</style>
​

结果

image-20230819175936676.png

avatar
文章
阅读
粉丝