vue3.0 ele-plus 与 antd-design的使用

vue3.0 ele-plus 与 antd-design的使用

01：vue3.0 ele-plus 与 vue3.0 antd-design vite版本

vue3.0 ele-plus

• 下载：
  • yarn add element-plus
• 官网：
  • ele-plus官网

按需引入

• 下载：
  • ·yarn add -D unplugin-vue-components unplugin-auto-import`
  • yarn add unplugin-auto-import -D
    • 自动引入插件链接
• 配置 ( vite.config.ts )

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx';

// 引入 自动化引入插件
import AutoImport from 'unplugin-auto-import/vite'
// 配合上方 实现ele-plus按需引入
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(),vueJsx(),AutoImport({
    imports:['vue'],
    dts:'src/auto-import.d.ts'
  }),Components({
    resolvers: [ElementPlusResolver()],
  }),]
})

• 新增提示tsconfig.json

{
  "compilerOptions": {
    // ...
    "types": ["element-plus/global"]
  }
}

使用组件

  <section class="a">
    <el-button type="primary">Primary</el-button>
  </section>

• 效果
  

vue3.0 antd-design的使用

• 官网
  • antd
• 下载
  • yarn add ant-design-vue@next -S

按需引入

• 下载：
  • ·yarn add -D unplugin-vue-components unplugin-auto-import`
  • yarn add unplugin-auto-import -D
    • 自动引入插件链接
• 配置 ( vite.config.ts )

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx';

// 引入 自动化引入插件
import AutoImport from 'unplugin-auto-import/vite'
// 配合上方 实现ele-plus按需引入
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver,AntDesignVueResolver  } from 'unplugin-vue-components/resolvers'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
    AutoImport({
      imports:['vue'],
      dts:'src/auto-import.d.ts'
    }),
    Components({
      resolvers: [ElementPlusResolver(),AntDesignVueResolver()],
    }),
]
})

使用

    <a-button type="danger">Danger</a-button>
    <a-button type="primary">按钮</a-button>

• 效果
  

02：vue3.0 ele-plus vueCli版本

• yarn add -D unplugin-vue-components unplugin-auto-import

ele-plus 按需引入

const { defineConfig } = require("@vue/cli-service");

const AutoImport = require("unplugin-auto-import/webpack");
const Components = require("unplugin-vue-components/webpack");
const { ElementPlusResolver } = require("unplugin-vue-components/resolvers");

module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    plugins: [
      AutoImport({
        resolvers: [ElementPlusResolver()],
      }),
      Components({
        resolvers: [ElementPlusResolver()],
      }),
    ],
  },
});