vue3项目集成

最新推荐文章于 2024-07-12 19:47:55 发布

杨小杨@1128

最新推荐文章于 2024-07-12 19:47:55 发布

阅读量980

点赞数 18

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_56769104/article/details/140128891

版权

一、集成element-plus

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

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

1）安装命令

pnpm i element-plus

main.ts

import { createApp } from 'vue'
import App from './App.vue'
//引入element-plus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
//获取应用实例对象
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

安装图标组件库命令

pnpm i @element-plus/icons-vue

2）国际化

全局配置，Element Plus 提供了全局配置国际化的配置。

main.ts

//配置element-plus国际化
import zhCn from 'element-plus/es/locale/lang/zh-cn'
//获取应用实例对象
const app = createApp(App)
app.use(ElementPlus,{
    locale: zhCn
})

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
})

二、src别名的配置

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

// vite.config.ts
import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path' // node提供的包
export default defineConfig({
    plugins: [vue()],
    resolve: {
        alias: {
            "@": path.resolve("./src") // 相对路径别名配置，使用 @ 代替 src
        }
    }
})

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

三、环境变量的配置

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

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

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

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

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

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

文件名：

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

文件配置

# 变量必须以 VITE_ 为前缀才能暴露给外部读取
NODE_ENV = 'development'
VITE_APP_TITLE = '硅谷甄选运营平台'
VITE_APP_BASE_API = '/dev-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

四、SVG图标配置

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

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

1）安装SVG依赖插件

pnpm install vite-plugin-svg-icons -D

2）在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]',
      }),
    ],
  }
}

3）入口文件导入

import 'virtual:svg-icons-register'

4）使用icon

<svg style="width:30px;height:30px">
        <!-- xlink:href执行用哪一个图标 -->
        <use xlink:href="#icon-phone" fill="red"></use>
      </svg>

将icon封装为组件

SvgIcon/index.vue

<template>
    <div>
        <svg :style="{width,height}">
        <!-- xlink:href执行用哪一个图标 -->
        <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>

使用时

<template>

  <div>
      <svg-icon name="home" ></svg-icon>
  </div>

</template>

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

<style scoped>

</style>

封装为全局组件

1)在入口文件main.ts注册

import SvgIcon from '@/components/SvgIcon/index.vue'
app.component（‘SvgIcon’，SvgIcon）//vue3
vue.component//vue2

2)利用自定义插件组册全部组件

import SvgIcon from './SvgIcon/index.vue';
import type { App, Component } from 'vue';
const components: { [name: string]: Component } = { SvgIcon };
//对外暴露插件对象
export default {
    install(app: App) {
        Object.keys(components).forEach((key: string) => {
            app.component(key, components[key]);
        })
    }
}

main.ts

//引入自定义插件对象：注册整个项目的全局组件
import gloablComponent from './components/index';
app.use(gloablComponent);//使用use方法后即会触发install方法

五、集成sass

1、安装sass-loader

pnpm add -D sass

pnpm install sass-loader --save-dev

我们再组件内可以使用scss语法！！！需要加上lang="scss"

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

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

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

@import './reset.scss'//在scss中@import是导入样式

2、配置全局变量

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

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

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

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

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

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

使用时记得修改 lang="scss"

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

六、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({
        enable: command === 'serve',
      }),
    ],
  }
}

在根目录创建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

1、安装axios

pnpm install axios

axios使用

import axios from 'axios';
axios({
    url:'/api/user/login',
    method:"post",
    data:{
        username:'admin',
        password:'111111'
    }
})

2、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,//基础路径上会携带/api
    timeout: 5000//发请求超时时间
})
//请求拦截器
request.interceptors.request.use(config => {
    //config配置对象，headers属性请求头，经常给服务器端携带公共参数
    //返回配置对象
    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;

使用request

import request from '@/utils/request';
import {onMounted} from 'vue';
//当组件挂载完毕后测试发一个请求
onMounted(()=>{
  request({
    url:'/user/login',
    method:'post',
    data:{
        username:'admin',
        password:'111111'
    }
  })
})

八、API接口统一管理

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

//统一管理项目用户相关接口
import request from '@/utils/request'

import type {

 loginFormData,

 loginResponseData,

 userInfoReponseData,

} from './type'

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

 LOGIN_URL = '/user/login',

 USERINFO_URL = '/user/info',

}
//暴露请求函数
//登录接口方法
export const reqLogin = (data: loginFormData) =>
 request.post<any, loginResponseData>(API.LOGIN_URL, data)

//获取用户信息
export const reqUserInfo = () =>

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

type.ts

//登录接口需要携带参数ts类型
export interface loginFormData {
    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 userInfoReponseData {
    code: number,
    data: user
}

使用时

import {onMounted} from 'vue';
import {reqLogin} from './api/user'
//当组件挂载完毕后测试发一个请求
onMounted(() => {
  reqLogin({
        username:'admin',
        password:'111111'
  })
})

贾成豪老师代码仓库地址:https://gitee.com/jch1011/vue3_admin_template-bj1.git
项目在线文档:
服务器域名:http://sph-api.atguigu.cn
swagger文档:
http://139.198.104.58:8209/swagger-ui.html
http://139.198.104.58:8212/swagger-ui.html#/
echarts:国内镜像网站
https://www.isqqw.com/echarts-doc/zh/option.html#title
http://datav.aliyun.com/portal/school/atlas/area_selector