前端项目集成大全,涵括element-plus，环境变量的配置，以及SVG的封装，sass的集成，mock数据的封装

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

1.安装elment-plus

全部引入：pnpm i element-plus 按需引入：pnpm install element-plus @element-plus/icons-vue 在main.ts中配置引入文件

// 引入element-plus插件与样式
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
// 获取应用实例对象
const app=createApp(App)
app.use(ElementPlus)
// 将应用挂载到挂载点上
app.mount('#app')

elment-plus安装后可以按需引入，减少文件体积

import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from '@element-plus/icons-vue'

2.使用

<div>
    <el-button :icon="Search" circle />
    <el-button type="primary" :icon="Edit" circle />
    <el-button type="success" :icon="Check" circle />
    <el-button type="info" :icon="Message" circle />
    <el-button type="warning" :icon="Star" circle />
    <el-button type="danger" :icon="Delete" circle />
  </div>

在这里遇到一个问题，我这里用:icon时会报错，因此我的小图标是不能正常显示的。

elment-plus安装成功后默认字体为英文因此我们需要将其改为中文仅需以下几步操作

3.在main.ts中配置国际化设置

// 配置element-plus国际化
import zhCn from 'element-plus/es/locale/lang/zh-cn'

app.use(ElementPlus,{
    locale:zhCn//elemnt-plus国际化配置
})

设置成功之后显示为中文

设置中文这里可能会遇到一个问题，即npm run build时，会打包失败。 因此可以在前面加上//@ts-ignore忽略该文件

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

4.遇到复杂的项目时给项目起别名

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

5.环境变量的配置

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

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

5.1 开发环境（development）

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

# 变量必须以 VITE_ 为前缀才能暴露给外部读取
# 开发环境
NODE_ENV = 'development'
VITE_APP_TITLE = '国威甄选运营平台'
VITE_APP_BASE_API = '/dev-api'
VITE_SERVE = 'http://xxx.com'

5.2 测试环境（testing）

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

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

5.3 生产环境（production）

生产环境是指正式提供对外服务的，一般会关掉错误报告，打开错误日志。(正式提供给客户使用的环境。) 注意:一般情况下，一个环境对应一台服务器,也有的公司开发与测试环境是一台服务器！！！

# 生产环境
NODE_ENV = 'production'
VITE_APP_TITLE = '国威甄选运营平台'
VITE_APP_BASE_API = '/prod-api'
VITE_SERVEVITE_SERVE = 'http://yyy.com'

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

5.5SVG图标配置

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

安装SVG依赖插件pnpm install vite-plugin-svg-icons -D在vite.config.ts中配置插件

//这里配置如果出问题的话请重新安装一个插件 
//运行出错下载 pnpm add fast-glob -D
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]',
      }),
    ],
  }
}

配置完成之后需要在main.ts中配置引入import 'virtual:svg-icons-register‘

//页面使用
 <svg name="home" color="pink" width="100px" height="100px">
 	<use :icon='./icons/xxx.svg'></use>
	</svg>

5.6封装SVG

将svg封装到src/components/SvgIcon下创建名为index.vue的文件

<template>
    <svg :style="{width,height}">
      <!-- xlink: href执行用哪一个图标，属性值务必#icon-图标名字 -->
       <!-- use标签fill属性可以设置图标的颜色 -->
      <use :xlink:href="prefix+  name"  :fill="color"></use>
    </svg>
</template>

<script setup lang="ts">
// 接收父组件传递的参数
defineProps({
  // xlink:href属性前缀
  prefix:{
    type:String,
    default:'#icon-'
  },
  // 提供使用的图标名字
  name: String,
  // 接受父组件传递颜色
  color:{
    type:String,
    default:''
  },
  // 接受父组件传递过来的图标的宽度高度
  width:{
    type:String,
    default:'16px'
  },
  height:{
    type:String,
    default:'16px'
  }
})
</script>

<style scoped>

</style>

使用SVG

<template>
  <div>
    <!-- 测试 -->
     <svg-icon name="home" color="pink" width="100px" height="100px"></svg-icon>
  </div>
</template>

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

如图则为成功

5.7自定义插件，注册全局组件

方法一：将文件在main.ts下引入

方法二(推荐)： 运用自定义插件，对外暴露插件 在components文件夹下面创建文件index.ts文件

// 引入项目中全部的全局组件
import SvgIcon from './SvgIcon/index.vue'
import Pagination from './Pagination/index.vue'
const allGlobalComponent ={SvgIcon,Pagination}
console.log(allGlobalComponent);

// 对外暴露插件对象
export default{
  // 务必叫做install方法
  install(app){
    // 注册项目全部的全局组件
    Object.keys(allGlobalComponent).forEach(key=>{
      // 注册为全局组件
      app.component(key,allGlobalComponent[key])
    })
  }
}

app不需要引入可以直接使用

<template>
  <Pagination></Pagination>
  <SvgIcon name="phone"></SvgIcon>
</template>

效果如图（肥肠好用！！！！）

5.8集成sass

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

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

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

// 引入清除默认样式
@import url('./reset.scss');

在入口文件引入main.ts

// 引入模板的全局样式
import '@/styles/index.scss'

这样引入还不能够使用scss全局变量$xxx因此需要在vite.config.ts中进行如下配置

// scss全局变量的配置
export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        javascriptEnabled: true,
        additionalData: '@import "./src/styles/variable.scss";',
      },
    },
  },
  })

这样就能够识别scss中的$全局变量了(非常nice)

5.9 mock数据

安装依赖:https://www.npmjs.com/package/vite-plugin-mockpnpm install -D vite-plugin-mock mockjs在 vite.config.js 配置文件启用插件

import { viteMockServe } from 'vite-plugin-mock'
//这里用到了箭头函数，可能需要更改一下，还有command具体参考官网
export default ({ command })=> {
  return {
    plugins: [
      vue(),
      viteMockServe({
        localEnabled: command === 'serve',
      }),
    ],
  }
}

根目录创建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我在main.ts入口文件测试的也是成功的返回200的数值

// 测试
import axios from 'axios'
// 登录接口
axios({
    url:'/api/user/login',
    method:"POST",
    data:{
        username:'admin',
        password: '111111'
    }
})

5.10-5.12 axios封装，API统一管理，路由配置等

[https://blog.csdn.net/ytpedancerow/article/details/143461686?spm=1001.2014.3001.5501]