vue项目中main.js配置相关

main.js配置相关

1、vue

import Vue from 'vue'

2、vue-ls :用于从Vue上下文中使用本地Storage,会话Storage和内存Storage

import Storage from 'vue-ls'
options = {
  namespace: 'vuejs__', // key键前缀
  name: 'ls', // 命名Vue变量.[ls]或this.[$ls],
  storage: 'local', // 存储名称: session, local, memory
};
Vue.use(Storage, options)

API说明

Global(全局) :Vue.ls

Context(上下文):this.$ls

1、Vue.ls.get(name, def)
返回storage中 name值。在返回之前,内部解析JSON中的值
def: 默认null, 如果为设置则返回 name .
2、Vue.ls.set(name, value, expire)
在storage设置 name 的 value .并将 value 转化为JSON
expire: 默认为 null , name 有效时间以毫秒为单位
3、Vue.ls.remove(name)
从storage中移除 name . 成功移除 true, 否则返回false.
4、Vue.ls.clear()
清除storage.
5、Vue.ls.on(name, callback)
持续监听 name 在其他标签上的更改,更改时触发 callback , 传递以下参数:
let callback = (val, oldVal, uri) => {
       console.log('localStorage change', val);
} 
newValue: 当前storage中 name , 从持久化的JSON中解析
oldValue: 旧的storage中 name , 从持久化的JSON中解析
url: 修改来自选项卡的URL
6、Vue.ls.off(name, callback)
删除以前的侦听器 Vue.ls.on(name, callback)

3、前端可视化图表

1、Echarts:**百度出品的一个开源 Javascript 数据可视化库,主要基于 canvas 和 WebGL,可以高度定制图表类型和动态效果。也包含了 3D 图表展示和地图,日历等效果,官方提供了微信小程序版本。
import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts; // 在原型注入echarts
2、**AntV:**蚂蚁金服全新一代数据可视化解决方案,主要包含 G2、G6、F2 以及一套完整的图表使用和设计规范,致力于提供一套简单方便、专业可靠、不限可能的数据可视化最佳实践(来自官网描述)。其同样包含了多种图表类型,包含地图,仪表盘,词云等,使用较为简单快捷,符合比较清新的视觉风格,其提供了支付宝小程序和微信小程序的相关组件。下图是其小程序组件的 GitHub 示例。
3、**HighCharts:**一款来自国外的前端数据可视化库,非商用免费,被许多国外大公司所使用,其定位与 Echarts 更加类似,提供强大和多样的图表类型和交互体验。下图是一个官方的教学示意图。
4、Viserjs:
基于 G2 的适合数据可视化工程师的工具包。Viser 支持 React、Vue 和 AngularJS。

该库的主要目的是帮助您轻松地在 Web 应用程序中编写图表。Viser的主要原则是:

1. 简单地使用带有图表的语义组件进行部署,包括但不限于 React、Vue 和 AugularJS。
2. 轻量级仅依赖于 G2,它是基于图形语法的 Javascript 绘图系统。

#### https://viserjs.gitee.io/

4、前端UI组件库

1、 iView UI组件库

iView 是一套基于 Vue.js 的开源 UI 组件库,主要服务于 PC 界面的中后台产品。iView的组件还是比较齐全的,更新也很快,文档写得很详细。有公司团队维护,比较可靠的Vue UI组件框架。iView生态也做得很好,还有开源了一个iView Admin,做后台非常方便。官网上介绍,iView已经应用在TalkingData、阿里巴巴、百度、腾讯、今日头条、京东、滴滴出行、美团、新浪、联想等大型公司的产品中。

iView官网:https://www.iviewui.com/

2、Element UI组件库

Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。Element是饿了么前端开源维护的Vue UI组件库,更新频率还是很高的,基本一周到半个月都会发布一个新版本。组件齐全,基本涵盖后台所需的所有组件,文档讲解详细,例子也很丰富。没有实际使用过,网上的Element教程和文章比较多。Element应该是一个质量比较高的Vue UI组件库。

Element官网:http://element.eleme.io/#/zh-CN

4、Mint UI组件库

Mint UI基于 Vue.js 的移动端组件库,同样出自饿了么前端的项目。Mint UI是真正意义上的按需加载组件。可以只加载声明过的组件及其样式文件。Mint UI 采用 CSS3 处理各种动效,避免浏览器进行不必要的重绘和重排,从而使用户获得流畅顺滑的体验。网上的视频教程很多都是基于Mint UI来讲的,开发移动端web项目还是很方便,文档也很简介明了。很多页面Mint UI组件都已经封装好,基本可以照着例子写,简单的调整一下就可以实现。不过,在GitHub上看最后一次代码提交在2018年1月16日,截止到目前已经过去半年了。不知道是项目比较稳定没有更新,还是项目有被废弃的可能。我们会持续关注Mint UI的动态。

Mint UI官网:http://mint-ui.github.io/#!/zh-cn

6、Ant Design Vue UI组件库

Ant Design Vue是 Ant Design 3.X 的 Vue 实现,开发和服务于企业级后台产品。在GitHub上可以找到几个Ant Design的Vue组件。不过相比较而言,Ant Design Vue更胜一筹。Ant Design Vue共享Ant Design of React设计工具体系,实现了所有Ant Design of React的组件,支持现代浏览器和 IE9 及以上(需要 polyfills)。可以让熟悉Ant Design的在使用Vue时,很容易的上手。

Ant Design Vue官网:https://vuecomponent.github.io/ant-design-vue/docs/vue/introduce-cn/

8、Vant UI组件库

Vant是一个轻量、可靠的移动端 Vue 组件库。Vant是有赞团队开源的,主要维护也是有赞团队。Vant Weapp 是有赞移动端组件库 Vant 的小程序版本,两者基于相同的视觉规范,提供一致的 API 接口,助力开发者快速搭建小程序应用。截止到目前,Vant已经开源了50+ 个经过有赞线上业务检验的组件。比如:、AddressEdit 地址编辑、AddressList 地址列表、Area 省市区选择、Card 卡片、Contact 联系人、Coupon 优惠券、GoodsAction 商品页行动点、SubmitBar 提交订单栏、Sku 商品规格弹层。如果做商城的,不太在意界面,实现业务逻辑的话,用Vant组件库开发还是很快的。

Vant官网:https://youzan.github.io/vant/#/zh-CN/intro

9、cube-ui UI组件库

cube-ui 是基于 Vue.js 实现的精致移动端组件库。由滴滴内部组件库精简提炼而来,经历了业务一年多的考验,并且每个组件都有充分单元测试,为后续集成提供保障。在交互体验方面追求极致。遵循统一的设计交互标准,高度还原设计效果;接口标准化,统一规范使用方式,开发更加简单高效。支持按需引入和后编译,轻量灵活;扩展性强,可以方便地基于现有组件实现二次开发。

cube-ui官网:https://didi.github.io/cube-ui/#/zh-CN

10、Muse-UI UI组件库

Muse-UI基于 Vue 2.0 优雅的 Material Design UI 组件库。Muse UI 拥有40多个UI 组件,用于适应不同业务环境。Muse UI 仅需少量代码即可完成主题样式替换。Muse UI 可用于开发的复杂单页应用

Muse-UI官网:https://muse-ui.org/#/zh-CN

11、N3-components UI组件库

N3组件库是基于Vue.js构建的,让前端工程师和全栈工程师能快速构建页面和应用。N3-components超过60个组件 组件列表、自定义样式、支持多种模化范式(UMD)、使用ES6进行开发。

N3官网:https://n3-components.github.io/N3-components/component.html

12、Mand Mobile

Mand Mobile是面向金融场景的Vue移动端UI组件库,丰富、灵活、实用,快速搭建优质的金融类产品,让复杂的金融场景变简单。Mand Mobile含有丰富的组件30+的基础组件,覆盖金融场景,极高的易用性组件均有详细说明文档、案例演示,汲取最前沿技术,组件化轻量化实现,兼顾稳定和品质,努力实现金融场景的全覆盖。

Mand Mobile官网:https://didi.github.io/mand-mobile/#/zh-CN/home

13、we-vue UI组件库

we-vue 是一套基于 Vue.js 的移动关组件库,结合 weui.css 样式库,封装了一系列组件,非常适于微信公众号等移动端开发。we-vue 包含35+ 个组件,单元测试覆盖率超 98%,支持 babel-plugin-import,完善的在线文档,详细的在线示例。

we-vue官网:https://wevue.org/

14、veui UI组件库

veui是一个由百度EFE team开发的Vue企业级UI组件库。目前文档还没有,只有demo。GitHub上说是正在进行的一项工作。那我们就耐心等待吧。

veui官网:https://ecomfe.github.io/veui/components/#/

15、Semantic-UI-Vue UI组件库

Semantic-UI-Vue是基于 Vue.js对Semantic-UI 框架的实现。Semantic作为一款开发框架,帮助开发者使用对人类友好的HTML语言构建优雅的响应式布局。Semantic-UI-Vue提供了一个类似于 Semantic-UI 的 API 以及一组可定制的主题。

Semantic-UI-Vue官网:https://semantic-ui-vue.github.io/#/

16、NutUI组件库

NutUI是一套京东风格的移动端Vue组件库,开发和服务于移动Web界面的企业级前中后台产品。NutUI组件库支持跨平台,自动转微信小程序组件(稍后上线,敬请期待),30+ 京东移动端项目正在使用,基于京东APP 7.0 视觉规范,支持按需加载,详尽的文档和示例,支持定制主题,支持多语言(国际化),支持 TypeScript,支持服务端渲染(Vue SSR),单元测试加持,配套有基于Webpack的构建工具,可快速创建已内置本组件库的Vue工程。

5、Vue2.0过滤器

import '@/utils/filter' // base filter
只能使用在v-bind,{{}}...

filter.js:

import Vue from "vue";
import * as dayjs from "dayjs";
//数字格式化
Vue.filter('NumberFormat', function (value) {
  if (!value) {
    return '0'
  }
  let intPartFormat = value.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') //将整数部分逢三一断
  return intPartFormat
})
//日期格式化
Vue.filter('dayjs', function(dataStr, pattern = 'YYYY-MM-DD HH:mm:ss') {
  return dayjs(dataStr).format(pattern)
})

Vue.filter('moment', function(dataStr, pattern = 'YYYY-MM-DD HH:mm:ss') {
  return dayjs(dataStr).format(pattern)
})

/** 字符串超长截取省略号显示 */
Vue.filter('ellipsis', function (value, vlength = 25) {
  if(!value){
    return "";
  }
  console.log('vlength: '+ vlength);
  if (value.length > vlength) {
    return value.slice(0, vlength) + '...'
  }
  return value
})

6、异步请求Axios

import axios from 'axios'
Vue.prototype.$axios = axios //把axios挂载到vue的原型中,在vue中每个组件都可以使用axios发送请求

7、Vue事件车

import vueBus from '@/utils/vueBus';

vueBus.js

import Bus from 'vue';
let install = function (Vue) {
  Vue.prototype.$bus = new Bus()
}
export default { install };

8、Vue.config.productionTip = false

阻止启动生产消息,常用作指令

设置为 `false` 以阻止 vue 在启动时生成生产提示。
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值