奔三路 - 你30岁前的学习路!

奔三路学习网

当前位置: 主页 > vue面试通 > 开源框架 >

N3-components - 强大的Vue组件库

时间:2017-12-15 15:33来源:未知 作者:admin
N3组件库是基于Vue.js构建的,让前端工程师和全栈工程师能快速构建页面和应用。 官方主页 | English Introduction | 文档 相关介绍 N3组件库致力于构建良好的Vue开发者生态圈,提供良好的开

N3组件库是基于Vue.js构建的,让前端工程师和全栈工程师能快速构建页面和应用。

官方主页 | English Introduction | 文档

相关介绍

logo

N3组件库致力于构建良好的Vue开发者生态圈,提供良好的开发体验。下面是其中的一些特色:

  • 超过60个组件 组件列表

  • 自定义样式

  • 支持多种模块化范式(UMD)

  • 使用ES6进行开发

NPM

链接:https://www.npmjs.com/package/N3-components

npm install N3-components --save-dev

CNPM

链接:https://npm.taobao.org/package/N3-components

cnpm install N3-components --save-dev

CDN

快速上手

您可以把N3组件安装到全局的Vue上,示例代码如下:

import Vue from 'vue'
import N3Components from 'N3-components'
import 'N3-components/dist/index.css'

// install N3
Vue.use(N3Components)

// for English  (default chinese)
// version 2.2.0 or later
Vue.use(N3Components, 'en')

也可以在需要的时候引入该组件,示例代码如下:

import Vue from 'vue'
import N3Components from 'N3-components'
import {n3Alert} from N3Components

// set language  
// window.n3Locale = 'en'
//

主题定制

// default 
import 'N3-components/src/style/default.less' 

// theme customization
import 'your-theme.less' 

your-theme.less

@import 'N3-components/src/style/common.less' 

/*base color*/
@whiteColor: #fff;
@blackColor: #000;
@lightBlackColor: #333;
@grayColor: #ccc;
@weightGrayColor: #999;
@lightGrayColor: #eee; 
@lightColor: #f9f9f9; 

/*font color*/
@fontColor: #555;

/*theme color*/
@primaryColor: #41cac0;
@primaryColorhover: #39b2a9;
@hoverColor:rgba(65, 202, 192, 0.05);

/*extend color*/
@successColor: #19d567;
@successColorhover: #30d073;

@infoColor: #2db7f5;
@infoColorhover: #43bcf3;

@dangerColor: #f50;
@dangerColorhover: #f9702b;

@warningColor: #fa0;
@warningColorhover: #f5b73b;


依赖的项目

  • vue
  • vue-focus
  • velocity-animate
(责任编辑:admin)
顶一下
(1)
100%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片
发布者资料
史密斯 查看详细资料 发送留言 加为好友 用户等级:注册会员 注册时间:2017-11-24 11:11 最后登录:2018-09-02 11:09

关注奔三路