Vue - vue 前端开发技术指南

以 vite + vue3 + ElementPlus + pinia 开发技术栈所遇到的技术难题及解决方案汇总

如何在 vite+vue3 项目中支持 jsx 技术

1. 安装插件 pnpm add -D @vitejs/plugin-vue-jsx
2. 配置 vite.config.js

import vueJsx from '@vitejs/plugin-vue-jsx';
 export default defineConfig({
   plugins: [
     vueJsx(),  // 在vue() 之前
     vue(),
	 ]
 })

3. 在使用 jsx 语法的组件中设置 lang

<script lang='jsx' setup>
 function formatPlateNumber(row) {
 const colorStyle = PLATE_COLOR[row.plateColor];
 return (
   <div style={colorStyle}>{row.plateNumber}</div>
 );
}
</script>

如何在 vue3 项目中支持 echarts

1. 安装 echarts pnpm add echarts
2. 在项目中使用 echarts

// 设置图形挂载点ref
<template>
  <div class="board-item-body" ref="chartRef" v-loading="isLoading"  element-loading-background="rgba(0,0,0,0)">
  </div>
</template>
// 导入echarts
import * as echarts from 'echarts';
const isLoading = ref(false); // 设置图像加载过程指示
const statsData = ref(null); // 统计数据

// 初始化ref
const chartRef = ref();
// 设置图像实例
let chart = null;

// 绘制图表
function renderChart() {
  // 构建图表数据
  const legendData = map(statsData.value, 'overRangeName');
  const seriesData = map(statsData.value, (item) => ({ name: item.overRangeName, value: item.rangeRatio }));
  // 图表参数配置
  const option = {
      legend: {
          orient: 'vertical',
          x: '15%',
          y: 'center',
          textStyle: {
              color: '#E5EFFF',
          },
          data: legendData,
      },
      tooltip: {
          trigger: 'item',
          formatter: (item) => `${item.marker}${item.name}&nbsp;&nbsp;&nbsp;<span style="font-weight: bold;">${item.value}%</span>`,
      },
      series: [
      {
          type: 'pie',
          avoidLabelOverlap: true,
          label: { show: false },
          data: seriesData,
          radius: ['30%', '70%'],
          center: ['70%', '50%'],
      }]
  };

  // 图表容器是否已加载完毕
  if (chartRef) {
      // 首次绘制图表需要进行初始化
      if (!chart) chart = echarts.init(chartRef.value);
      // 设置图表参数更新图表
      chart.setOption(option);
  }
}

// 获取统计数据
function getData(callback) {
  isLoading.value = true;
  overRangeStats({}).then((res) => {
    statsData.value = res.data;
    callback && callback();
  }).finally(() => {
    isLoading.value = false;
  });
}


// 设置图表在页面调整大小时也能够适配调整大小
window.addEventListener('resize', function () {
  chart.resize();
});

// 页面加载后获取图表数据后绘制图表
onMounted(() => {
  getData(renderChart);
});

// 页面卸载后销毁图形实例
onUnmounted(() => {
  chart.dispose();
});

vue3 中引入 dayjs 处理日期时间

1. 安装 dayjs pnpm add dayjs
2. 使用 dayjs

  import dayjs from 'dayjs';

vue3 项目中引入 lodash-es 进行数据处理

1. 安装 lodash-es pnpm add lodash-es
2. 使用 lodash-es

  import {map} from 'lodash-es';

vue3 页面中监听键盘事件的方法

1. @keydown.enter 进行事件绑定到回车键

  <el-form-item prop="username">
    <el-input v-model="form.username" :placeholder="t('form.username')" prefix-icon="user" @keydown.enter="doLogin"></el-input>
  </el-form-item>

在vue3中如何引入样式

1. 在组件的style区域引入

  <style>
    @import "./styles/index.less"
  </style>

2. 在main.js 中引入

  import "@/styles/index.less";

在vue3 style中如何引入js变量

1. 使用v-bind(variable) 的形式

<script setup>
  const paddingStyle = props.isFront ? '0!important' : '15px 20px';
  const marginStyle = props.isFront ? '0!important' : '20px';
</script>

<style scoped lang="scss">
  :deep(.cm-table_top__toolbar){
    padding: v-bind(paddingStyle);
    margin-top: v-bind(marginStyle);
  }
</style>

vue3 中 v-loading, 遮罩层变透明的方法加 （element-loading-background="rgba(0,0,0,0)"）属性即可。

<template>
  <div class="board-item-body" v-loading="isLoading" element-loading-background="rgba(0,0,0,0)"> </div>
</template>
<script>
  const isLoading = ref(false);
</script>

vue3 中引入element-Plus 图标集

1. 将图标注册为全局组件Icon，并通过属性icon进行区分, 其优势是可以做到动态图标，通过传入不同的icon属性值可以渲染不同的图标

• 在main.js 中注册为全局组件, 通过createVNode, h 函数创建vue的虚拟节点

// 导入 element-plus 的图标集
import * as ElIcons from '@element-plus/icons-vue';
// 注册Icon组件
const Icon = (props) => {
  const { icon } = props;
  return createVNode(ElIcons[icon]);
}
app.component('Icon', Icon);

• 在vue组件中使用

<el-icon :size="25">
  <Icon :icon="weatherName"/>
</el-icon>

2. 将图标直接注册为全局组件, 其优势是简单明了，但无法在动态场景下使用。

• 在main.js 进行全局注册

import * as ElIcons from '@element-plus/icons-vue';
// 注册ElIcons为app的子组件
for (const name in ElIcons){
  app.component(name, ElIcons[name]);
}

• 在vue组件中使用

  <el-icon :size="25">
    <WeatherName />
  </el-icon>

vue3 + Element-plus 项目中 el-select 数据无法正常回显，设定了value值，但不能正常回显label问题

问题原因: 在于设定的value值类型与options选项value值类型不匹配造成的。
解决方案：可以转换options里的value值类型或者设定的value值类型，值类型两者匹配后即可正常回显。

<template>
  <el-form-item prop="status" label="状态">
    <el-select clearable v-model="filters.status" placeholder="全部" style="width: 180px">
      <el-option v-for="item in statusOptions" :label="item.label" :value="item.value" />
    </el-select>
  </el-form-item>
</template>
<script setup>
import { SWITCH_STATUS } from '@/const';
const statusOptions = computed(() =>
  // 将options 中的value值转为数字型
  map(SWITCH_STATUS, (value, key) => ({ label: value, value: Number(key) }))
);
</script>