VVT项目第三步:引入UI库(Element Plus)

Element Plus

市场上有很多支持Vue3和vite的UI,用什么UI可以根据自己兴趣选择。

接入方式

  • 官网有很多教程,我就不说各种方式,只说一种。

第一步:

  • 保证npm版本大于10.2.1,node版本大于18.17.0,如果低于就想办法升级上来。

第二步:

  • 安装插件:unplugin-vue-components unplugin-auto-import

npm install -D unplugin-vue-components unplugin-auto-import

第三步:

  • 安装成功后,修改vite.config.ts
......

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'


// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        AutoImport({
            resolvers: [ElementPlusResolver()],
        }),
        Components({
            resolvers: [ElementPlusResolver()],
        }),
        ……
    ],
})

然后安装Element-Plus库
npm i element-plus

使用

  • 安装成功后就可以使用了。参考官网手册和组件使用方式。

  • Element Plus地址

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。