关于vue丰富的ui库

最新推荐文章于 2024-07-04 10:58:59 发布

月亮上的小孩儿

最新推荐文章于 2024-07-04 10:58:59 发布

阅读量134

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/moon476607596/article/details/110089522

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文介绍了三个主流Vue前端UI库：ElementUI以其易用性和丰富的组件库；iview专为PC后台设计，适合中后台开发；Vuetify则强调移动优先和Material设计。通过实例展示了如何在项目中引入和使用这些库。

摘要由CSDN通过智能技术生成

简单介绍几个vue的ui库

1.elementUI https://element.eleme.cn/#/zh-CN/component/border

个人认为这个ui库是最容易上手的，并且资源丰富，基本可以满足日常开发的需要，以下简单介绍引入方式，开发方式

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
Vue.use(ElementUI);

dom及事件响应

<el-button type="primary" @click="onSubmit">查询</el-button>
 methods: {
      onSubmit() {
        console.log('submit!');
      }
    }

2.iview design https://www.iviewui.com/docs/introduce

主要服务于 PC 界面的中后台产品,安装引入介绍

$ npm install view-design --save

或使用 <script> 全局引用
<script type="text/javascript" src="iview.min.js"></script>
示例：
<template>
    <Slider v-model="value" range />
</template>
<script>
    export default {
        data () {
            return {
                value: [20, 50]
            }
        }
    }
</script>

引入

import Vue from 'vue';
import VueRouter from 'vue-router';
import App from 'components/app.vue';
import Routers from './router.js';
import ViewUI from 'view-design';
import 'view-design/dist/styles/iview.css';

Vue.use(VueRouter);
Vue.use(ViewUI);

3.vuetifyjs https://vuetifyjs.com/zh-Hans/introduction/why-vuetify/
Vuetify采用移动优先的设计，在每种功能点上都有对应的图形化效果并且使用 Material设计规范