vue作为一款深受广大群众以及尤大崇拜者的喜欢,特此列出在github上开源的vue优秀的UI组件库供大家参考
这几套框架主要用于后台管理系统和移动端的制作,方便开发者快速开发
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');
https://next.antdv.com/docs/vue/introduce-cn
3.Iview
安装
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')
iView / View Design 一套企业级 UI 组件库和前端解决方案
4. Vant 移动端
安装
npm i vant -S
使用
import Vant from 'vant' import 'vant/lib/index.css'; createApp(App).use(vant).$mount('#app)