proudsmart-ui
v0.2.1
Published
Vue.js Components Library
Downloads
4
Readme
proudsmartUI
目录结构
build
: 存放构建相关的文件config
: 构建相关配置doc
: 组件介绍、使用文档examples
:存放组件库的展示demo
和文档的所有相关文件。也是运行npm run dev
之后打开的页面。理论上,应该是一个组件对应一个界面,现在缺少挺多的,待完善。lib
: 打包后的文件,包括js
和css
packages
: 所有的组件packages/styles
: 所有的样式文件publish
: 发布到npm是需要的相关文件,一般不用修改src
: 管理组件的注册的主入口,工具,mixins
等static
:vue-cli
生成的,暂时没有什么用处test
: 测试相关,暂时没有用到.babelrc
:babel
的配置文件editorconfig
: 编辑器的配置文件eslintignore
、.eslint.js
:eslint
相关配置.gitignore
:git
相关配置.postcssrc.js
:postcss
配置
如何新增组件
以新增表格组件Grid为例
- 在
packages
下,新建grid/Grid.vue
文件。文件中包括Grid
组件的html
结构和js
逻辑。 - 在
packages/styles
下,新建grid.scss
文件,该文件是Grid
组件的样式 - 在
packages/styles/index.scss
中,引入grid.scss
。
@import "grid";
- 在
src/index.js
中注册Grid
组件。
...
import Grid from './../packages/grid/Grid';
...
const install = function (Vue) {
...
Vue.component(Grid.name, Grid);
...
};
...
export {..., Grid};
...
为什么不在组件中写样式,而要把样式单独写?
考虑到按需引入。这样,如果单独引入某一个组件,可以只引入对应的样式,而不用引入全部的样式。
packages/styles
下居然还有package.json
这些东西,为什么?
同上个问题。考虑到按需引入,这里,对样式文件用gulp
进行了单独打包,单独发布。所以,从git
把代码down
下来之后,不仅需要在根目录下执行npm i
,还需要在packages/styles
下执行npm i
。
样式中是什么鬼?@b,@e,@m,@when等等这是什么玩意?
样式使用的是BEM
风格的命名,写了mixin(packages/styles/src/mixins/bem-mixin.scss)
做了一些封装。这个mixin
是参照 这篇文章 做的。
当然,开发组件时,不一定非要按照这一套规矩来,但是,一定要把你用的规范、风格找地方记录好。
package.json
中那么多scripts
,都干啥的?
dev
、start
: 运行examples
的。examples
中,一方面作为demo
和文档存在,同时,开发组件时,也可以作为开发页面,在这里查看开发的组件。unit
、test
: 单元测试相关的,现在还没用到lint
: 检测代码格式的build:proudsmart-ui
、build:proudsmart-ui-css
、build:examples
、build
、build:all
: 打包用的。第一个是打包js
的。第二个打包css
样式。 第三个打包demo
文档的。第四个打包js
和css
的,是第一个和第二个命令的组合。最后一个命令,是第一个、第二个、第三个命令的组合。changeJsVersion
、changeCssVersion
: 改变package.json
和packages/styles/packages.json
中的版本。因为往npm
发布包的时候,版本号必要要比前一个版本号大。publish:all
: 打包js
和css
,并发布到npm
上。prepublish:all
:发布前钩子,验证当前分支是否在develop
分支,验证当前分支是否落后于develop
分支,验证当前版本是否是最新版本。若三者有一个未通过,则拒绝发布。docBuild
、docServer
:查看组件库的文档。文档用gitbook
管理。docBuild
输出打包后的文件,docServer
则可在浏览器中实时查看markdown
文件编译的结果。
发布到npm
后,如何使用?
- 安装
npm install proudsmart-ui --save
- 全包引入
import ProudsmartUI from 'proudsmart-ui';
// 引入样式
import 'proudsmart-ui/lib/proudsmart-ui-css/index.min.css';
// 或者
import 'proudsmart-ui/lib/proudsmart-ui-css/themes/default/index.min.css';
Vue.use(ProudsmartUI); //显式调用Vue.use
- 按需引入
/*
* 只引入Button组件
*/
import { Button } from 'proudsmart-ui';
import 'proudsmart-ui/lib/proudsmart-ui-css/button.css'; // 引入样式
Vue.component(Button.name, Button); //显式调用Vue.use