Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://n3-components.github.io/N3-components/
N3-components , Powerful Vue UI Library.
https://n3-components.github.io/N3-components/
components css html javascript vue
Last synced: about 1 month ago
JSON representation
N3-components , Powerful Vue UI Library.
- Host: GitHub
- URL: https://n3-components.github.io/N3-components/
- Owner: N3-components
- License: mit
- Created: 2016-08-17T11:41:52.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-12-15T06:58:59.000Z (about 6 years ago)
- Last Synced: 2024-11-01T10:34:56.849Z (about 2 months ago)
- Topics: components, css, html, javascript, vue
- Language: Vue
- Homepage: https://n3-components.github.io/N3-components/
- Size: 34.3 MB
- Stars: 1,012
- Watchers: 46
- Forks: 124
- Open Issues: 7
-
Metadata Files:
- Readme: README-zh.md
- License: LICENSE
Awesome Lists containing this project
README
N3-components - 强大的Vue组件库。
=========================
[]()
[](https://codeclimate.com/github/N3-components/N3-components/coverage)
[](https://gitter.im/N3-components/chinese?utm_source=share-link&utm_medium=link&utm_campaign=share-link)
[](https://codeclimate.com/github/N3-components/N3-components)
[]()
N3组件库是基于Vue.js构建的，让前端工程师和全栈工程师能快速构建页面和应用。
[官方主页](https://n3-components.github.io/N3-components/) | [English Introduction](https://github.com/N3-components/N3-components/blob/master/README.md) | [文档](https://n3-components.github.io/N3-components/)
相关介绍
------------
N3组件库致力于构建良好的Vue开发者生态圈，提供良好的开发体验。下面是其中的一些特色：
* 超过60个组件 [组件列表](https://github.com/N3-components/N3-components/tree/master/src)
* 自定义样式
* 支持多种模块化范式（UMD）
* 使用ES6进行开发
NPM
------------
链接：[https://www.npmjs.com/package/N3-components](https://www.npmjs.com/package/N3-components)
```bash
npm install N3-components --save-dev
```
CNPM
------------
链接：[https://npm.taobao.org/package/N3-components](https://npm.taobao.org/package/N3-components)
```bash
cnpm install N3-components --save-dev
```
CDN
------------
* js链接：https://unpkg.com/N3-components@version/dist/index.min.js (注意填写版本号)
* css链接 https://unpkg.com/N3-components@version/dist/index.min.css (注意填写版本号)
快速上手
------------
您可以把N3组件安装到全局的Vue上，示例代码如下：
```javascript
import Vue from 'vue'
import N3Components from 'N3-components'
import 'N3-components/dist/index.min.css'
// install N3
Vue.use(N3Components)
// for English (default chinese)
// version 2.2.0 or later
Vue.use(N3Components, 'en')
```
也可以在需要的时候引入该组件，示例代码如下：
```javascript
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](https://github.com/N3-components/N3-components/issues/new) : bug反馈，建议提交等
- email: [email protected]
- gitter: [](https://gitter.im/N3-components/chinese?utm_source=share-link&utm_medium=link&utm_campaign=share-link)
- QQ群: 556286036 
- QQ群二维码:
提交贡献
---------
[Contribute](https://github.com/N3-components/N3-components/blob/master/contribute.md)
更新日志
---------
[Change Log](https://github.com/N3-components/N3-components/blob/master/log.md)
License
------------
MIT