精华内容
下载资源
问答
  • vue-ui-framework:我个人的Vue UI框架集合
  • 带打字稿的Vue ui框架 演示页 npm i npm run dev 安装 npm i vue-mb-ui 用法 es6模块 import Vue from 'vue' import MbUi from 'vue-mb-ui' import 'vue-mb-ui/lib/index.css' Vue . use ( MbUi ) 或者 import Vue...
  • vue ui框架 ant-design-vue

    千次阅读 2019-12-31 12:32:00
    ant-design-vue 官方地址:http://vue.ant-design.cn/docs/vue/introduce-cn/
    展开全文
  • vue UI框架比较

    千次阅读 2018-12-26 09:59:55
    最好基于vue2.0 PC端:  因为用过的是饿了么UI,所以比较以饿了么UI为基础 element UI 饿了么UI 支持vue2.x 80分 优点:组件的API方法、属性等封装的较为完善 缺点:样式有些生硬,不够炫酷美观 N3 N3...

    最好基于vue2.0

    PC端:

     因为用过的是饿了么UI,所以比较以饿了么UI为基础

    1. element UI 饿了么UI
      支持vue2.x
      80分
      优点:组件的API方法、属性等封装的较为完善
      缺点:样式有些生硬,不够炫酷美观
    2. N3 N3
      支持vue2.x
      70分
      优点:组件操作几乎都有动画效果,组件较为丰富,比饿了么的操作更为人性化,比如表单部分,相较于elementUI可以直接自定义组件大小
      缺点:封装的方法、属性都是基本需求的,不够丰富
    3. Vue Antd Antd
      支持vue1.x,据说不再有人维护
      70分
      优点:和elementUI很像,像的不像话,方法属性封装度较高
      缺点:不支持vue2.x,不然要比N3分数高点的
    4. iView iView
      支持vue2.x(今天刚刚宣布支持。。。。。)
      90分
      优点:组件丰富(43个),动画效果炫酷,
      缺点:其他UI具有的缺点完美避过,只是。。。现在这个点,2.0版本的文档还没发布。吐槽下分页组件和elementUI一样不够人性化
    5. AliTelecom UI AliTelecom UI
      支持vue2.x,阿里通信技术团队打造
      70分
      优点:相较而言也就是支持vue2.0了,动画效果尚可
      确定:属性、方法太少
    6. vue-beauty vue-beauty
      支持vue1.x
      65分
      综合感觉是几个UI的合成版
      优点:动画效果尚可
      缺点:组件开发不完善,不丰富
    7. Vue-BluVue-Blu
      支持vue2.x
      85分
      优点:和饿了么挺像,相比感觉是青出于蓝而胜于蓝,组件更加丰富了
      缺点:有些死板
    8. 几个链接
      VUE开发常用组件收藏:http://www.07net01.com/2017/03/1824767.html
      vuejs ui库优劣势分析和选择:https://www.zhihu.com/question/53842719
      vue 常用ui组件:https://blog.csdn.net/zgrkaka/article/details/53897202

    综述:既然iview支持vue2.x了,那就用iview吧,其次Vue-Blu和elemenUI不相上下,elmentUI的网站做的不错,文档易懂,上手快。

    转载:https://segmentfault.com/a/1190000008648003

     

     

     

    展开全文
  • 上一篇我们讲解了通过Mint UI提供的infinite-scroll组件结合api接口实现一个上拉分页加载更多的功能,本篇我们来讲解Vue UI的另一个PC端框架ElementUI。 本系列博文使用的Vue版本:2.6.11 Element UI 官方网站:...

    接上篇《22.使用Mint UI的infinite-scroll实现上拉分页加载

    上一篇我们讲解了通过Mint UI提供的infinite-scroll组件结合api接口实现一个上拉分页加载更多的功能,本篇我们来讲解Vue UI的另一个PC端框架ElementUI。
    本系列博文使用的Vue版本:2.6.11
    Element UI 官方网站:https://element.eleme.cn/#/zh-CN


    一、Element UI介绍

    Element UI是由饿了么公司前端团队开源的基于 Vue 2.0 的组件库,提供了一套基于PC端的前端设计资源,能够帮助网站快速成型。

    它有以下特性:
    一致性 Consistency
    ● 与现实生活一致:与现实生活的流程、逻辑保持一致,遵循用户习惯的语言和概念;
    ● 在界面中一致:所有的元素和结构需保持一致,比如:设计样式、图标和文本、元素的位置等。

    反馈 Feedback
    ● 控制反馈:通过界面样式和交互动效让用户可以清晰的感知自己的操作;
    ● 页面反馈:操作后,通过页面元素的变化清晰地展现当前状态。

    效率 Efficiency
    ● 简化流程:设计简洁直观的操作流程;
    ● 清晰明确:语言表达清晰且表意明确,让用户快速理解进而作出决策;
    ● 帮助用户识别:界面简单直白,让用户快速识别而非回忆,减少用户记忆负担。

    可控 Controllability
    ● 用户决策:根据场景可给予用户操作建议或安全提示,但不能代替用户进行决策;
    ● 结果可控:用户可以自由的进行操作,包括撤销、回退和终止当前操作等。

    二、安装Element UI

    1、执行Element UI安装命令

    在编译工具的控制台或使用CMD在需要引入的文件夹位置,执行npm安装指令:
    npm i element-ui -S

    安装成功:

    2、在mian.js中引入Element UI

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

    3、检查webpack.base.conf.js

    在使用之前,因为Element UI有一些字体文件(ttf)是webpack无法解析的,我们需要在webpack.base.conf.js中配置字体的打包规则,让它能够解析这些字体文件。
    有些童鞋可能还不是太了解webpack,这里简单介绍一下。
    webpack是一个模块化的打包管理工具,其官网为https://www.webpackjs.com,在首页有一个示意图:

    上图就表示webpack能把模块之间的相互依赖,转换为浏览器能解析的js和其他静态文件。比如说我们Vue工程中的App.vue是浏览器无法解析的文件,ES6的JavaScript语法浏览器也无法解析,此时借助webpack工具,就可以打包成浏览器能解析的js。
    需要详细了解的同学,请仔细阅读学习webpack的官方文档:https://www.webpackjs.com/concepts/。

    我们打开webpack.base.conf.js文件,发现其rule配置中,是有配置ttf格式文件的加载规则的(会把上述格式文件,打包到fonts文件夹下,作为字体文件):

    注:Vue2.0使用Element UI其实无需配置该处,之前的老版本可能需要在webpack..config.js中进行配置。

    完成上述步骤后Element UI就完成了安装。

    4、测试是引用成功

    我们在原来的工程的UI文件夹新建ElementUI.vue文件:

    然后在路由里加上它:

    import MintUI from '@/components/UI/MintUI'
    import ElementUI from '@/components/UI/ElementUI'
    
    //2、定义路由
    const routes = [
      //前面的配置省略...
      {path:'/mint_ui',component: MintUI},
      {path:'/element_ui',component: ElementUI}
    ]

    同时放在首页的导航上:

    <div class="header-css">
      <router-link to="/helloWorld">首页</router-link>
      <router-link to="/news">新闻</router-link>
      <router-link to="/user">用户</router-link>
      <router-link to="/mint_ui">Mint-UI</router-link>
      <router-link to="/element_ui">Element-UI</router-link>
    </div>


    此时我们随便写个几个ElementUI的按钮在页面上:

    <template>
      <div id="ElementUI">
        <h1>{{msg}}</h1>
        <el-row>
            <el-button>默认按钮</el-button>
            <el-button type="primary">主要按钮</el-button>
            <el-button type="success">成功按钮</el-button>
            <el-button type="info">信息按钮</el-button>
            <el-button type="warning">警告按钮</el-button>
            <el-button type="danger">危险按钮</el-button>
        </el-row>
      </div>
    </template>
     
    <script>
    export default {
      name: 'ElementUI',
      data () {
          return {
            msg: 'Element-UI'
          }
      }
    }
    </script>
     
    <style scoped>
    </style>

    启动工程,看看效果:

    出现相应的按钮样式,证明我们的Element UI引入成功了。

    三、使用Element UI组件

    在官方文档(https://element.eleme.cn/#/zh-CN/component/installation)中,我们可以看到Element UI提供了种类丰富的组件,其中分为基础组件(Basic)、表单组件(From)、数据处理组件(Data)、提示组件(Notice)、导航组件(Navigation)、其他组件(Others):

    这里所有组件在官方文档中都有详细讲解,我们这里挑几个常用的组件来编写一下。

    1、【基础组件(Basic)】Layout 布局实现混合布局

    通过 row 和 col 组件,并通过 col 组件的 span 属性我们就可以自由地组合布局。
    Row 组件 提供 gutter 属性来指定每一栏之间的间隔,默认间隔为 0。
    代码:

    <template>
      <div id="ElementUI">
        <h1>{{msg}}</h1>
        <el-row :gutter="20">
            <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>
            <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
            <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
            <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
            <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
        </el-row>
            <el-row :gutter="20">
            <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
            <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>
            <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
        </el-row>
      </div>
    </template>
     
    <script>
    export default {
      name: 'ElementUI',
      data () {
          return {  msg: 'Element-UI' }
      }
    }
    </script>
     
    <style scoped>
    .el-row {
        margin-bottom: 20px;
        &:last-child {
          margin-bottom: 0;
        }
      }
      .el-col {
        border-radius: 4px;
      }
      .bg-purple-dark {
        background: #99a9bf;
      }
      .bg-purple {
        background: #d3dce6;
      }
      .bg-purple-light {
        background: #e5e9f2;
      }
      .grid-content {
        border-radius: 4px;
        min-height: 36px;
      }
      .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
      }
    </style>

    效果:

    2、【表单组件(From)】Select 选择器

    当选项过多时,使用下拉菜单展示并选择内容。
    这里我们使用Select选择器实现一个基础的单选;
    代码:

    <template>
      <div id="ElementUI">
        <h1>{{ msg }}</h1>
        <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
    </template>
     
    <script>
    export default {
      name: "ElementUI",
      data() {
        return {
          msg: "Element-UI",
          options: [
            {value: "选项1",label: "黄金糕"},
            {value: "选项2",label: "双皮奶"},
            {value: "选项3",label: "蚵仔煎"},
            {value: "选项4",label: "龙须面"},
            {value: "选项5",label: "北京烤鸭"},
          ],
          value: "",
        };
      }
    };
    </script>
     
    <style scoped>
    </style>

    注:v-model的值为当前被选中的el-option的 value 属性值

    效果:

    3、【数据处理组件(Data)】Table 表格

    这里实现一个带斑马纹的表格,可以更容易区分出不同行的数据。
    代码:

    <template>
      <div id="ElementUI">
        <h1>{{ msg }}</h1>
        <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column prop="date" label="日期" width="180"></el-table-column>
            <el-table-column prop="name" label="姓名" width="180"></el-table-column>
            <el-table-column prop="address" label="地址"></el-table-column>
        </el-table>
      </div>
    </template>
     
    <script>
    export default {
      name: "ElementUI",
      data() {
        return {
          msg: "Element-UI",
          tableData: [{
              date: '2016-05-02',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1518 弄'
            }, {
              date: '2016-05-04',
              name: '刘丹丹',
              address: '上海市普陀区金沙江路 1517 弄'
            }, {
              date: '2016-05-01',
              name: '张大强',
              address: '上海市普陀区金沙江路 1519 弄'
            }, {
              date: '2016-05-03',
              name: '李四辈',
              address: '上海市普陀区金沙江路 1516 弄'
            }]
        };
      }
    };
    </script>
     
    <style scoped>
    </style>

    注:stripe属性可以创建带斑马纹的表格。它接受一个Boolean,默认为false,设置为true即为启用。

    效果:

    4、【提示组件(Notice)】Loading 加载

    加载数据时显示动效。Element 提供了两种调用 Loading 的方法:指令和服务。对于自定义指令v-loading,只需要绑定Boolean即可。默认状况下,Loading 遮罩会插入到绑定元素的子节点,通过添加body修饰符,可以使遮罩插入至 DOM 中的 body 上。

    我们为上面的Table表格加一个加载的效果(添加一个 v-loading="loading" 属性):

    <template>
      <div id="ElementUI">
        <h1>{{ msg }}</h1>
        <el-table :data="tableData" stripe style="width: 100%" v-loading="loading">
            <el-table-column prop="date" label="日期" width="180"></el-table-column>
            <el-table-column prop="name" label="姓名" width="180"></el-table-column>
            <el-table-column prop="address" label="地址"></el-table-column>
        </el-table>
      </div>
    </template>
     
    <script>
    export default {
      name: "ElementUI",
      data() {
        return {
          msg: "Element-UI",
          tableData: [{
              date: '2016-05-02',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1518 弄'
            }, {
              date: '2016-05-04',
              name: '刘丹丹',
              address: '上海市普陀区金沙江路 1517 弄'
            }, {
              date: '2016-05-01',
              name: '张大强',
              address: '上海市普陀区金沙江路 1519 弄'
            }, {
              date: '2016-05-03',
              name: '李四辈',
              address: '上海市普陀区金沙江路 1516 弄'
            }],
            loading: true
        };
      }
    };
    </script>
     
    <style scoped>
    body {
        margin: 0;
    }
    </style>

    效果:

    5、【导航组件(Navigation)】NavMenu 导航菜单

    为网站提供导航功能的菜单。

    导航菜单默认为垂直模式,通过mode属性可以使导航菜单变更为水平模式。另外,在菜单中通过submenu组件可以生成二级菜单。Menu 还提供了background-color、text-color和active-text-color,分别用于设置菜单的背景色、菜单的文字颜色和当前激活菜单的文字颜色。

    代码:

    <template>
      <div id="ElementUI">
        <h1>{{ msg }}</h1>
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
        >
          <el-menu-item index="1">处理中心</el-menu-item>
          <el-submenu index="2">
            <template slot="title">我的工作台</template>
            <el-menu-item index="2-1">选项1</el-menu-item>
            <el-menu-item index="2-2">选项2</el-menu-item>
            <el-menu-item index="2-3">选项3</el-menu-item>
            <el-submenu index="2-4">
              <template slot="title">选项4</template>
              <el-menu-item index="2-4-1">选项1</el-menu-item>
              <el-menu-item index="2-4-2">选项2</el-menu-item>
              <el-menu-item index="2-4-3">选项3</el-menu-item>
            </el-submenu>
          </el-submenu>
          <el-menu-item index="3" disabled>消息中心</el-menu-item>
          <el-menu-item index="4"
            ><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item
          >
        </el-menu>
        <div class="line"></div>
        <el-menu
          :default-active="activeIndex2"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
          <el-menu-item index="1">处理中心</el-menu-item>
          <el-submenu index="2">
            <template slot="title">我的工作台</template>
            <el-menu-item index="2-1">选项1</el-menu-item>
            <el-menu-item index="2-2">选项2</el-menu-item>
            <el-menu-item index="2-3">选项3</el-menu-item>
            <el-submenu index="2-4">
              <template slot="title">选项4</template>
              <el-menu-item index="2-4-1">选项1</el-menu-item>
              <el-menu-item index="2-4-2">选项2</el-menu-item>
              <el-menu-item index="2-4-3">选项3</el-menu-item>
            </el-submenu>
          </el-submenu>
          <el-menu-item index="3" disabled>消息中心</el-menu-item>
          <el-menu-item index="4"
            ><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item
          >
        </el-menu>
      </div>
    </template>
     
    <script>
    export default {
      name: "ElementUI",
      data() {
        return {
          msg: "Element-UI",
          activeIndex: "1",
          activeIndex2: "1",
        };
      },
      methods: {
        handleSelect(key, keyPath) {
          console.log(key, keyPath);
        },
      },
    };
    </script>
     
    <style scoped>
    body {
      margin: 0;
    }
    </style>

    效果:

    6、【其他组件(Others)】Carousel 走马灯

    在有限空间内,循环播放同一类型的图片、文字等内容。代码:

    <template>
      <div id="ElementUI">
        <h1>{{ msg }}</h1>
        <div class="block">
            <span class="demonstration">Click 指示器触发</span>
            <el-carousel trigger="click" height="150px">
                <el-carousel-item v-for="item in 4" :key="item">
                    <h3 class="small">{{ item }}</h3>
                </el-carousel-item>
            </el-carousel>
        </div>
      </div>
    </template>
     
    <script>
    export default {
      name: "ElementUI",
      data() {
        return {
          msg: "Element-UI"
        };
      }
    };
    </script>
     
    <style scoped>
    .el-carousel__item h3 {
        color: #475669;
        font-size: 14px;
        opacity: 0.75;
        line-height: 150px;
        margin: 0;
    }
    
    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }
    
    .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
    }
    </style>

    结合使用el-carousel和el-carousel-item标签就得到了一个走马灯。幻灯片的内容是任意的,需要放在el-carousel-item标签中。默认情况下,在鼠标 hover 底部的指示器时就会触发切换。通过设置trigger属性为click,可以达到点击触发的效果。

    效果:


    以上就是Element UI组件的介绍和使用的全部内容。
    在本篇引入Element UI的时候,我们是全量引入的,下一篇我们来讲解如何按需引入Element UI组件。


    参考:
    《IT营:itying.com-2018年Vue2.x 5小时入门视频教程》

    转载请注明出处:https://blog.csdn.net/acmman/article/details/112426303

    展开全文
  • vue-as-400 项目设置 yarn install 编译和热重装以进行开发 yarn serve 编译并最小化生产 yarn build 运行单元测试 yarn test:unit 运行端到端测试 yarn test:e2e 整理和修复文件 yarn lint 自定义配置 请参阅。
  • vue UI 框架 Vuetify 初体验

    千次阅读 2020-08-24 15:18:28
    根据官网介绍,我这里选用了vuecli来创建项目并添加Vuetify 默认配置继续,安装完成之后,打开项目插件就已经配置好了 启动项目的样子 修改App.vue的内容 <template> <v-app> <v-main> <...

    根据官网介绍,我这里选用了vuecli来创建项目并添加Vuetify

    在这里插入图片描述
    默认配置继续,安装完成之后,打开项目插件就已经配置好了
    在这里插入图片描述
    启动项目的样子
    在这里插入图片描述
    修改App.vue的内容

    <template>
      <v-app>
        <v-main>
          <router-view />
        </v-main>
      </v-app>
    </template>
    
    <script>
    export default {
      name: "App",
      data: () => ({
        //
      }),
    };
    </script>
    

    在views文件夹下新增一个Login.vue文件

    <template>
      <v-app id="inspire">
        <v-main>
          <v-container class="fill-height" fluid>
            <v-row align="center" justify="center">
              <v-col cols="12" sm="8" md="4">
                <v-card class="elevation-12">
                  <v-toolbar color="primary" dark flat>
                    <v-toolbar-title>Login form</v-toolbar-title>
                    <v-spacer></v-spacer>
                    <v-tooltip bottom>
                      <template v-slot:activator="{ on }">
                        <v-btn :href="source" icon large target="_blank" v-on="on">
                          <v-icon>mdi-code-tags</v-icon>
                        </v-btn>
                      </template>
                      <span>Source</span>
                    </v-tooltip>
                  </v-toolbar>
                  <v-card-text>
                    <v-form>
                      <v-text-field label="Login" name="login" prepend-icon="mdi-account" type="text"></v-text-field>
    
                      <v-text-field
                        id="password"
                        label="Password"
                        name="password"
                        prepend-icon="mdi-lock"
                        type="password"
                      ></v-text-field>
                    </v-form>
                  </v-card-text>
                  <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn color="primary">Login</v-btn>
                  </v-card-actions>
                </v-card>
              </v-col>
            </v-row>
          </v-container>
        </v-main>
      </v-app>
    </template>
    
    <script>
    export default {
      props: {
        source: String,
      },
    };
    </script>
    

    在router文件夹下面的index.js文件中新增一个login路由

    import Vue from 'vue'
    import VueRouter from 'vue-router'
    import Home from '../views/Home.vue'
    
    Vue.use(VueRouter)
    
      const routes = [
      {
        path: '/',
        name: 'Home',
        component: Home
      },
      {
        path: '/about',
        name: 'About',
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
      },
      {
        path: '/login',
        name: 'Login',
        component: () => import(/* webpackChunkName: "about" */ '../views/Login.vue')
      }
    ]
    
    const router = new VueRouter({
      routes
    })
    
    export default router
    
    

    打开浏览器地址中输入login路由跳转
    在这里插入图片描述
    到这Vuetify 初体验就结束了,后续会继续分享Vuetify的具体使用
    官网地址

    展开全文
  • 排名前十的vue ui框架

    2019-04-11 14:15:48
    排名前十的vue ui框架 https://segmentfault.com/a/1190000015423178
  • 如何评价蚂蚁的ant-design-vue UI框架

    千次阅读 2021-01-19 17:34:05
    做为一名vue 忠实开发者用得最多的后台UI框架莫过于element ui element UI 由 饿了么团队维护 优势 有大厂背景 持续迭代 速度快 生态圈优异,社区活跃 社区的认可 前端程序员的青睐 Ant Design 但是当公司要求...
  • 转载:... Vue UI框架对比:Element UI、Ant Design Vue、iView </h1> <div class="clear"></div> <div class="postBody"> 本篇文章将..
  • 前端采用vue,但是再项目开发过程中遇到一个比较麻烦的问题,项目工期比较紧,页面要美观好看,如果自己封装组件的话用时比较长,使用第三方框架成了不错的选择,在这里我总结了一下常用的vue UI框架,希望对大家...
  • Vue Mobile是一个基于Vue的移动端UI框架,为多端开发而生,支持发布到iOS,Android,H5,以及各种小程序。 依赖框架 Uni App框架。 技术栈 Vue,Vuex,ES6,Sass,PostCSS等。 开发工具 HBuilderX IDE。 示例项目 ...
  • vue-infinite-scroll插件可以无限滚动实现加载更多,其作用是是当滚动条滚动到距离底部的指定高度时触发某个方法。这篇文章主要介绍了用vue-infinite-scroll实现无限滚动效果,需要的朋友可以参考下
  • 基于Vue前端UI框架比较 Vue3相对于vue2的优缺点 优点: 性能提升,主要体现在打包体积(减少了40%左右),渲染速度(快了55%),更新速度(100%)及内存使用(减少了50%)几方面。 由于增加了composition api,...
  • TouchUI是一套高质量移动端UI框架。基于vue.js框架,我们精心打造了上百种的移动端UI组件,几乎囊括了开发移动应用的所有细节,真正实现拿来即用,像搭积木一样开发移动应用。
  • VUE主流UI框架

    2020-11-06 10:10:04
    以下主要介绍三个框架,分别是Element-UI,Bootstrap-Vue,Vuetify。 Element-UI https://element.eleme.io/ https://github.com/ElemeFE/element 国内人用的较多。 但是,近两年迭代频率越来越低了,有图为证。 ...
  • VUE UI框架

    2017-09-13 19:39:08
    1)vue 只是一个js库,不算框架,他不限制你使用使用UI框架,理论上你可以使用任意 UI 框架   2)一些 vue UI框架 vux:https://vux.li/#/ mint:http://mint-ui.github.io/#!/zh-cn vue-carbon:htt
  • VUE UI框架对比 element-ui 与 iView

    千次阅读 2017-06-20 20:18:30
    element VS iview(最近项目UI框架在选型 ,做了个分析, 不带有任何利益相关)主要从以下几个方面来做对比使用率(npm 平均下载频率,组件数量,star, issue…)API风格打包优化与设计师友好性 1,使用率(npm 平均...
  • 推荐几个VUE UI框架

    千次阅读 2018-11-21 16:12:04
    以Github star数排名 Element UI:饿了么前端打造 Vuetify Framework 7 Quasar Vue-Material Onsenui 大致浏览了一下组件,感觉都不错,具体的适用场景请大家自行对比吧!  ...
  • 11个基于vueUI框架

    万次阅读 2020-07-21 18:57:50
    Element UI Element UI 来自中国,由与 Mint UI 相同的开发者所创建。Element UI 是用于 Web 和桌面应用程序的桌面 UI 工具包,如果你需要开发 Electron 应用,这个库会是你的理想之选。 iView iView 是一个 UI ...
  • 排名前10的vue前端UI框架值得你掌握

    千次阅读 2020-06-07 09:33:03
    学习的过程之中发现继最热的 React 组件库和 Angular 组件库之后,这里有很多个流行和实用的 Vue.js 组件库完善你的下一个用 Vue.JS 编写 UI 界面的应用程序。Vue.js是一套构建用户界面的 渐进式框架。与其他重量级...
  • ElementUi的使用 ElementUi的使用 cnpm i element-ui -S 引入以及配置 在main.js中 ...Vue.use(ElementUI); 使用 <el-button type="primary">主要按钮</el-button> <el-butto
  • 11个有关vueUI框架

    2021-02-05 11:38:37
    Element UI Element UI 来自中国,由与 Mint UI 相同的...iView 团队维护非常及时,最近一次的更新在19年3月18日,这次更新带来了一个Vue CLI 3的 iView 插件,你可以使用该插件快速构建基于 iView 的项目。 Vueti
  • 排名前10的vue前端UI框架框架值得你掌握

    万次阅读 多人点赞 2018-09-14 21:54:02
    最近在逛各大网站,论坛,SegmentFault等编程问答社区,...学习的过程之中发现继最热的 React 组件库和 Angular 组件库之后,这里有很多个流行和实用的 Vue.js 组件库完善你的下一个用 Vue.JS 编写 UI 界面的应用...
  • 2020最流行的vueUI框架

    千次阅读 2020-08-13 10:30:19
    随着vue的开发者越来越多,各种框架也渐渐多起来,面对众多的框架,如何选择一款适合自己业务的框架,还是一件比较纠结的事情,今天总结了一下2020年GitHub上面比较受欢迎,star较高的几个UI框架。 1:饿了么...
  • vue2的时代,PC端的ui框架可以说elementUI独步天下,至少我在面试及工作过程中遇到的都是使用elementUI的,但是该开源项目随着核心成员的离职,更新进度似乎越来越缓慢,似乎印证了那句“开源工作一旦功成身退,...
  • 2020年最常用的vueUI框架

    千次阅读 2020-09-07 12:57:09
    随着vue的开发者越来越多,各种框架也渐渐多起来,面对众多的框架,如何选择一款适合自己业务的框架,还是一件比较纠结的事情,今天总结了一下2020年GitHub上面比较受欢迎,star较高的几个UI框架。 1:饿了么...
  • 基于vueUi框架(全+好用)

    千次阅读 2019-08-08 13:41:18
    1、 iView UI组件库 ...有公司团队维护,比较可靠的Vue UI组件框架。iView生态也做得很好,还有开源了一个iView Admin,做后台非常方便。官网上介绍,iView已经应用在TalkingData、阿里巴巴、百度、腾讯、今日头条...
  • 本文推荐几个比较流行的VUE3 UI框架,同时提供出色的开发人员体验,合理利用,又或者学习借鉴都是不错的选择,排名不分先后。Ant Design Vue官方网站:https://2x.an...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 41,560
精华内容 16,624
关键字:

vueui框架

vue 订阅