vue3 + ant-design3(2.2.6+) + vite

Posted 2022-12-01 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