VUE3学习 第七章 了解UI库ElementUI、Vant等、Scoped和样式 穿透、css Style完整新特性、Vue3集成Tailwind CSS、vscode插件、执行机制nextTick

一、了解UI库ElementUI，AntDesigin等

vue作为一款深受广大群众以及尤大崇拜者的喜欢，特此列出在github上开源的vue优秀的UI组件库供大家参考

这几套框架主要用于后台管理系统和移动端的制作，方便开发者快速开发

1. Element UI Plus

Vue 3 UI 框架 | Element Plus

1. 安装方法

# NPM
$ npm install element-plus --save
 
# Yarn
$ yarn add element-plus
 
# pnpm
$ pnpm install element-plus

2. main ts 引入

import {
    createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
 
const app = createApp(App)
 
app.use(ElementPlus)
app.mount('#app')

3. volar 插件支持

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

2. Ant Design Vue

Ant Design Vue

1. 安装

$ npm install ant-design-vue@next --save
$ yarn add ant-design-vue@next

2. 使用

import {
    createApp } from 'vue';
import Antd from 'ant-design-vue';
import App from './App';
import 'ant-design-vue/dist/antd.css';
 
const app = createApp(App);
 
app.use(Antd).mount('#app');

3. Iview

iView / View Design 一套企业级 UI 组件库和前端解决方案

1. 安装

npm install view-ui-plus --save

2. 使用

import {
    createApp } from 'vue'
import ViewUIPlus from 'view-ui-plus'
import App from './App.vue'
import router from './router'
import store from './store'
import 'view-ui-plus/dist/styles/viewuiplus.css'
 
const app = createApp(App)
 
app.use(store)
  .use(router)
  .use(ViewUIPlus)
  .mount('#app')

4. Vant 移动端

Vant 3 - Lightweight Mob