一、了解UI库ElementUI,AntDesigin等
vue作为一款深受广大群众以及尤大崇拜者的喜欢,特此列出在github上开源的vue优秀的UI组件库供大家参考
这几套框架主要用于后台管理系统和移动端的制作,方便开发者快速开发
1. Element UI Plus
- 安装方法
# NPM
$ npm install element-plus --save
# Yarn
$ yarn add element-plus
# pnpm
$ pnpm install element-plus
- 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')
- volar 插件支持
{
"compilerOptions": {
// ...
"types": ["element-plus/global"]
}
}
2. Ant Design Vue
- 安装
$ npm install ant-design-vue@next --save
$ yarn add ant-design-vue@next
- 使用
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 组件库和前端解决方案
- 安装
npm install view-ui-plus --save
- 使用
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')