Muse-UI

【推荐阅读】微服务还能火多久？>>> 优秀的Vue UI组件库推荐 一、总结 一句话总结： ^、可以注意下Quasar，Quasar功能比较全，下次用的话试下这个，Bootstrap-Vue也同样可以注意下 ^、vue ui库省了我们把组件封装成vue组件的过程（当然也省了我找组件和调组件的过程），所以蛮可以节约开发效率 二、16款优秀的Vue UI组件库推荐 转自或参考：16款优秀的Vue UI组件库推荐 https://www.cnblogs.com/zdz8207/p/vue-ui-framework.html 16款优秀的Vue UI组件库推荐 Vue 是一个轻巧、高性能、可组件化的MVVM库，API简洁明了，上手快。从Vue推出以来，得到众多Web开发者的认可。 在公司的Web前端项目开发中，多个项目采用基于Vue的UI组件框架开发，并投入正式使用。 开发团队在使用Vue.js框架和UI组件库以后，开发效率大大提高，自己写的代码也少了，很多界面效果组件已经封装好了。 在选择Vue UI组件库的过程中，通过GitHub上根据star数量、文档丰富程度、更新的频率以及维护等因素，也收集整理了一些优秀的Vue UI组件库。 PS：国内的UI组件大部分都只有一部分的，常用的头部导航，底部导航，listview，grid表格很多都是没有的。 后面才发现，基于Vue的Quasar

作为一个前端人员来说，总结几款相对来说不错的用于移动端开发的UI框架是非常必要的，以下几种移动端UI框架就能基本满足工作中开发需要，根据项目需求，选用合适的框架搭建项目，更能容易提高开发效率。 一、MUI 最接近原生APP体验的高性能前端框架，追求性能体验，是我们开始启动MUI项目的首要目标，轻量必然是重要特征 MUI不依赖任何第三方JS库，压缩后的JS和CSS文件仅有100+K和60+K，鉴于之前的很多前端框架（特别是响应式布局的框架），UI控件看起来太像网页，没有原生感觉，因此追求原生UI感觉也是我们的重要目标，MUI以iOS平台UI为基础，补充部分Android平台特有的UI控件 官方链接： http://dev.dcloud.net.cn/mui/ 二、Frozen UI 由腾讯团队开发，适用于使用手Q规范设计的Web页面，而针对非手Q规范的页面，可通过修改变量定制界面主题。可以按需选择需要的组件，也可以采用cdn和combo的方式按需加载。使用iconfont展示图标，包含了按钮，列表，表单，提示，弹窗等常用组件，新增文本，布局，1px， rem，文字截断，占位，两端留白，两端对齐等解决方案，同时解决了 移动端屏幕适配 问题。CSS使用模块化的样式命名和组织规范，使用sass编写css代码。 官方链接： http://frozenui.github.io/ 三、Amaze

因为 JavaScript 的限制，Vue.js 不能检测到下面数组变化： 直接用索引设置元素，如 vm.items[0] = {}； 修改数据的长度，如 vm.items.length = 0。 为了解决问题 (1)，Vue.js 扩展了观察数组，为它添加了一个 $set() 方法： this.$set(this.number, 0 , "A"); 说明： 针对html中表单双向绑定修改后的值，数组修改可以同步页面呈现； 针对js代码中直接修改数组对象，页面呈现不同步。 示例： //提交处理 var list = _this.postlist; var isHasItem = false; for (var i = 0; i < list.length; i++) { var item = list[i]; if (item.company == data.company) { isHasItem = true; //修改处理--这种方式不会触发视图更新，针对于非双向绑定的model值，例如startDate,endDate 的文本框没有设置双向绑定 // item.company = data.company; // item.post = data.post; // item.startDate = data.startDate; // item.endDate = data

1.Cube UI star 3k 滴滴 WebApp 团队 实现的 基于 Vue.js 实现的精致移动端组件库 github地址 中文文档 2.Muse-ui 基于 Vue 2.0 和 Material Design 的 UI 组件库 star 4.9k 中文文档 github地址 3.vux 基于 WeUI 和 Vue (2.x)开发的移动端UI组件库 star 10k 基于 webpack + vue-loader + vux 可以快速开发移动端页面，配合 vux-loader 方便你在 WeUI 的基础上定制需要的样式。 官网地址： https://vux.li/ 本框架属于个人维护。 中文文档 在线预览 更多： 基于Vue的手机端UI框架整理 Vue相关UI框架整理 Element UI框架+Vue开发搭建示例 来源： oschina 链接： https://my.oschina.net/u/2332115/blog/3033652

1、安装echarts，npm i echarts -S 2、在main.js里引入echarts主题的js，一般在 node_modules---echarts---theme---macarons.js。 theme里边有各种各样的主题，任意选一种，这里我选的是macarons。引入：import 'echarts/theme/macarons.js' 3、在echarts初始化时，使用主题。let myChart01 = this.$echarts.init(document.getElementById('myChart01'),'macarons'); 代码示例： import echarts from "echarts"; import 'echarts/theme/macarons.js' // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById("School"),'macarons'); // 绘制图表 myChart.setOption({ title: { text: "学校申请人数Top10", subtext: "数据来自Crm系统" }, tooltip: { trigger: "axis", axisPointer: { type: "shadow" } }

一、安装Vue，创建Vue项目 VSCode 搭建Vue开发环境之Vue CLI 二、安装Muse-UI 库 npm install muse-ui 不支持vue add 命令安装。 Muse-UI官方文档： https://muse-ui.org/#/zh-CN/installation 修改main.js，增加框架引入： 此处使用完全引入框架方式。 import MouseUI from 'muse-ui' import 'muse-ui/dist/muse-ui.css'; Vue.use(MouseUI); 启动运行，npm run serve 三、增加字体引用， 修改index.html，增加字体 <link rel="stylesheet" href="https://cdn.bootcss.com/material-design-icons/3.0.1/iconfont/material-icons.css"> 运行结果： 四、使用常用插件 1.totast npm install muse-ui-toast -S 2.message npm install -S muse-ui-message 3.loaing npm install -S muse-ui-loading 使用方式，1.安装插件 ，2.引用插件，以loading为例： import 'muse-ui