N3组件库是基于Vue.js构建的,让前端工程师和全栈工程师能快速构建页面和应用。
官方主页 | English Introduction | 文档
N3组件库致力于构建良好的Vue开发者生态圈,提供良好的开发体验。下面是其中的一些特色:
-
超过60个组件 组件列表
-
自定义样式
-
支持多种模块化范式(UMD)
-
使用ES6进行开发
链接:https://www.npmjs.com/package/N3-components
npm install N3-components --save-dev
链接:https://npm.taobao.org/package/N3-components
cnpm install N3-components --save-dev
- js链接:https://unpkg.com/N3-components@version/dist/index.min.js (注意填写版本号)
- css链接 https://unpkg.com/N3-components@version/dist/index.min.css (注意填写版本号)
您可以把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
- 提交ISSUE : bug反馈,建议提交等
- email: zhangking520@gmail.com
- gitter:
- QQ群: 556286036
- QQ群二维码:
MIT