vue add cube-ui是什么意思？

这行命令的意思是把cube-ui脚手架安装到当前项目

1、cube-ui 是基于 Vue.js 实现的精致移动端组件库，由滴滴内部组件库精简提炼而来，经历了业务一年多的考验，并且每个组件都有充分单元测试，为后续集成提供保障。

2、在vuecli创建的项目中使用的方法是：

cd vue-cube

vue add cube-ui

1.基础用法

        <cube-upload

            ref="upload1"

            v-model="files1"

            :action="action"

            :multiple="false"

            :simultaneous-uploads="1"

            :process-file="processFile"

             @files-added="addedHandler1"

             @file-error="errHandler"

             @file-success="uploadSuccess1"

             @file-click="fileClick"     //缩略图

          >

2.自定义样式  

        <cube-upload

            ref="upload1"

            v-model="files1"

            :action="action"

            :multiple="false"

            :simultaneous-uploads="1"

            :process-file="processFile"

             @files-added="addedHandler1"

             @file-error="errHandler"

             @file-success="uploadSuccess1"

          >

              <cube-upload-file

                    v-for="(file, i) in files1"

                   :file="file"

                    :key="i"

                     @click="fileClick"        //缩略图

              ></cube-upload-file>

              <cube-upload-btn :multiple="false">

                  <img src="~@/icons/camera.svg" />

                    <span>证件正面</span>

              </cube-upload-btn>

         </cube-upload>

自定义样式实现缩略图关键为该css样式，提交图片后会自动显示该样式

 /deep/ .cube-upload-file-status.cubeic-right::after {

        width: 165px

        height: 110px

        border-radius: 0

        background-color: #fff0  

    }

以下为公用方法

        uploadSuccess1(res) {  

            this.imgs = []

            this.imgs.push(res.url)

        } 

         fileClick() {

                    this.$createImagePreview({   //cube-ui  自带图片预览

                        imgs: this.imgs

                    }).show(）

        },

在前端项目开发过程中，现在很少有人会使用原生的CSS来搭建页面，总归都会引入一些前端UI框架以减少代码的书写。一般为了方便自己的使用，很多大公司都有自己的一套UI框架，同时也会把其开源出来。下面就是最近经常使用并且很流行的一些前端UI框架，总有一款适合你：

Mint UI

Mint UI

Mint UI是饿了么团队开发的基于Vue .js的移动端UI框架，它包含丰富的 CSS 和 JS 组件，能够满足日常的移动端开发需要。

WeUI

WeUI是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。包含button、cell、dialog、toast、article、icon等各式元素。

Cube-ui

Cube-ui

Cube-ui 是滴滴团队开发的基于 Vue.js 实现的精致移动端组件库。支持按需引入和后编译，轻量灵活；扩展性强，可以方便地基于现有组件实现二次开发。

iView UI

iView UI

iView UI是一个强大的UI库，基于vue，有很多实用的基础组件比elementui的组件更丰富，主要服务于 PC 界面的中后台产品。使用单文件的 Vue 组件化开发模式 基于 npm + webpack + babel 开发，支持 ES2015 高质量、功能丰富 友好的 API ，自由灵活地使用空间。

LayUI

LayUI

LayUI是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。

ElementUI

ElementUI

Element是饿了么前端开源维护的Vue UI组件库,组件齐全，基本涵盖后台所需的所有组件，文档讲解详细，例子也很丰富。 主要用于开发PC端的页面，是一个质量比较高的Vue UI组件库。

at-ui

at-ui

at-ui 是一款阿里团队创建的基于 Vue 2.x 的前端 UI 组件库，主要用于快速开发 PC 网站产品。 它提供了一套 npm + webpack + babel 前端开发工作流程，CSS 样式独立，即使采用不同的框架实现都能保持统一的 UI 风格。

amaze UI

amaze UI

Amaze UI 是一个移动优先的跨屏前端框架。提供基础样式，网格，表格、表单、按钮及常用组件样式。是一个轻量级（所有 CSS 和 JS gzip 后 100 kB 左右）、 Mobile first 的前端框架

Vant UI

Vant UI

Vant UI是有赞前端团队基于有赞统一的规范实现的 Vue 组件库，提供了一整套 UI 基础组件和业务组件。通过 Vant，可以快速搭建出风格统一的页面，提升开发效率。

Flutter

Flutter

Flutter 是谷歌的移动端 UI 框架，可在极短的时间内构建 Android 和 iOS 上高质量的原生级应用。 Flutter 可与现有代码一起工作, 它被世界各地的开发者和组织使用, 并且 Flutter 是免费和开源的.

ionic

Ionic既是一个CSS框架也是一个Javascript UI库,Ionic 是目前最有潜力的一款 HTML5 手机应用开发框架。通过 SASS 构建应用程序，它 提供了很多 UI 组件来帮助开发者开发强大的应用。 它使用 JavaScript MVVM 框架和 AngularJS 来增强应用。提供数据的双向绑定，使用它成为 Web 和移动开发者的共同选择。

---