VUE3 项目开发实战入门系列 （5.-UI组件库）

赤兔Team
878 阅读3分钟

UI组件库

​ 关于Vue的第三方UI组件库目前市面上有很多选择，很难说孰好孰坏，找到适合项目的就行，如果是国内的话目前被广大开发者熟知就数element-ui 和 ant-design-vue 了，对于我个人而言两者的设计和使用体验差别并不大，在本项目中将会选择 ant-design-vue 作为UI组件库，至于原因纯属偏好，可能是因为他的兄弟ant-design-react珠玉在前。

注意无论是element-ui还是ant-design-vue组件库，使用时候一定要注意版本的区分，我们要使用的是支持Vue3的版本。

Element: 官网

Ant-Desigin-Vue: 官网

移动端vant: 官网

章节内容：

  1. 安装组件库
  2. JSX组件
  3. CSS Module

安装组件库

npm i --save ant-design-vue@next

使用

​ 通常情况下组件库都提供了至少两种导入方式，完整导入和按需导入，区别就是完整引入会一次引入所有的组件，不管将来要使用的或者不使用的，造成项目体积变大，但是往往项目中是不需要使用到全部组件，所以就有了按需导入，只导入需要使用的组件，这样就可以优化项目体积了，但是又有了新的问题，组件要单个导入的话开发时候编码会变得很繁琐，所以这里推荐在企业项目中必须要按需导入，如果仅仅是个人学习，可以暂时使用完整导入。

​ 下面来介绍如何使用完整导入和按需导入。

完整导入

打开src/main.js

import { createApp } from 'vue'
import App from './App.vue'

// 导入路由对象
import router from "@/router/index"

// 导入Antd组件库
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';

// 创建app
const app = createApp(App);
app.use(router);
app.use(Antd);
app.mount("#app");

在首页测试组件效果src/views/index.vue

<template>
    <div>
	<h2>首页 - by ctcode</h2>
	<!-- 加载中状态组件 -->
	<a-spin/>
    </div>
</template>

<script>
export default {};
</script>

查看首页效果是否如文档所示。

按需导入

​ 由于我们使用的是vite脚手架，vite默认不支持babel，所以官网提供的 babel-plugin-import 插件无法在这里使用了，不过不用担心，虽然官方没有给出vite的解决方案，但是民间有很多插件可以供我们使用，比如vite-plugin-style-import，当然类似的插件还有很多，其原理无非就是在我们导入组件时同时导入对应的组件样式。

安装vite-plugin-style-import

npm i vite-plugin-style-import -D

修改vite配置文件vite.config.js

import { resolve } from 'path';
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 导入jsx插件
import vueJsx from '@vitejs/plugin-vue-jsx'
// 按需加载样式插件
import styleImport from 'vite-plugin-style-import';

export default defineConfig({
	plugins: [
		vue(),
		vueJsx({}),
		styleImport({
			libs: [{
				libraryName: 'ant-design-vue',
				esModule: true,
				resolveStyle: (name) => {
					return `ant-design-vue/es/${name}/style/css`;
				},
			}]
		})
	],
	resolve: {
		alias: {
			'@': resolve(__dirname, 'src'),
		}
	}
})

修改src/main.js，单独导入Spin加载状态组件

import { createApp } from 'vue'
import App from './App.vue'

// 导入路由对象
import router from "@/router/index"

// 导入Antd组件库
import { Spin } from 'ant-design-vue';
//import 'ant-design-vue/dist/antd.css';

// 创建app
const app = createApp(App);
app.use(router);
// app.use(Antd);
app.use(Spin);
app.mount("#app");

查看首页效果是否如文档所示，可以多测试几个组件试试哦~！

// main.js
import { Spin, Input } from 'ant-design-vue';

app.use(Spin);
app.use(Input);

// 组件调用
<a-spin/>
<a-input/>

查看代码：

git clone https://github.com/chitucode/ctcode-vue3.git (已下载可直接checkout)
git checkout v5.0

好友微信号

添加大佬微信 和上千同伴一起提升技术交流生活

hsian_

最后

码字不容易 你的点击关注点赞留言就是我最好的驱动力

avatar
文章
阅读
粉丝