vue3+ant-design3(2.2.6+)+vite

Posted 2021-09-08 hello，是翠花呀

上次体验了一下vue3+element-plus，总体感觉element-plus比element(vue2)好使且多一些功能。
这次体验一下vue3+ant-design2(vue3)

• 安装好之后按需引入 ant 组件

ant.congig.js:

import "ant-design-vue/dist/antd.css";

import {
  Button,
  Menu,
  SubMenu,
  MenuItemGroup,
  Row,
  Col,
  Radio,
  RadioGroup,
  RadioButton,
  Tabs,
  TabPane
  // ....
} from "ant-design-vue";

const antComponents = [
  Button,
  Menu,
  SubMenu,
  MenuItemGroup,
  Col,
  Row,
  Radio,
  RadioGroup,
  RadioButton,
  Tabs,
  TabPane
  // ....
];

export default antComponents;

main.js:

import antComponents from "./******/ant.config";

antComponents.forEach((component) => {
  app.use(component);
});

• table 宽度超出容器，fixed 滚动失效
  使用了 display:flex;布局，装有 table 的父级容器设置了 flex: 1; 这样 table 没法识别父级容器的宽度就超出父容器显示。解决: 1.不使用 flex
  2.table 父容器设置宽度，不想固定宽度可通过calc(100% - XXX)计算。

• 时间选择器国际化问题
  使用ConfigProvider组件:

<a-config-provider :locale="zhCN">
  <!-- 包裹内容 -->
</a-config-provider>

import zhCN from 'ant-design-vue/es/locale/zh_CN'
import moment from 'moment'
import 'moment/locale/zh-cn'
moment.locale('zh-cn')

setup() {
  return {
    zhCN
  }
}

最新 vue3.2 已将提案内容 setup 更新：<script setup> console.log('hello script setup') </script>，代码不需要包裹在setup函数内，已不需要return变量。

DatePicker时间选择器年份变成中文但日期仍是英文。更改设置：

import zhCN from "ant-design-vue/lib/locale-provider/zh_CN";
import moment from "moment";
import "moment/dist/locale/zh-cn";
moment.locale("zh-cn");

• ant v3 表格列错位问题

将版本升级至 2.2.6+

• 打包

package.json的 scripts："build": "cross-env VITE_APP_ENV=production vite build",

vite.config.js

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

const path = require("path");

export default defineConfig({
  base: "/",
  publicDir: "public",
  build: {
    outDir: "dist",
    assetsDir: "assets",
    cssCodeSplit: true,
    rollupOptions: {
      output: {
        assetFileNames: "css/[name].[hash].css",
        chunkFileNames: "js/[name].[hash].js",
        entryFileNames: "js/[name].[hash].js",
      },
    },
  },
  plugins: [vue()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
  server: {
    proxy: {
      "^/api/.*": {
        target: "https:******",
        changeOrigin: true,
      },
    },
  },
  // ...
});

获取环境变量配置:
const env = import.meta.env.VITE_APP_ENV

其它

• 使用 vue-charts

import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { BarChart } from "echarts/charts";
import {
  GridComponent,
  TooltipComponent,
  AriaComponent,
  LegendComponent,
  DatasetComponent,
} from "echarts/components";
import VChart from "vue-echarts";

use([
  CanvasRenderer,
  DatasetComponent,
  BarChart,
  GridComponent,
  TooltipComponent,
  AriaComponent,
  LegendComponent,
]);

components: {
    VChart
},
setup() {
    const option1 = ref({
      legend: {
        icon: "circle", // 设置图例形状
        itemWidth: 5, // 图例宽高
        itemHeight: 5,
      },
      tooltip: {},
      color: ['#4261F6', '#FFD131', '#4BD8A5'], // 柱子颜色
      dataset: {
        source: [
          ['product', '柱子1', '柱子2', '柱子3'],
          ['2011/5', 543.3, 85.8, 393.7],
          ['2011/6', 583.1, 273.4, 55.1],
          ['2011/7', 586.4, 65.2, 82.5],
          ['2011/8', 572.4, 53.9, 669.1]
        ]
      },
      xAxis: { type: 'category' },
      yAxis: {},
      series: [
        { type: 'bar', barWidth: 15 }, // 柱子宽
        { type: 'bar', barWidth: 15 },
        { type: 'bar', barWidth: 15 }
      ]
    })

    return { option1 }
  }

<!-- 得设置高度 -->
<v-chart class="chart" :option="option1" />

其他：在vue3项目中配置eslint