+
+
+
+ 
+
Vue Mobile UI at YouZan
+ +## 一、安装 + +```shell +ynpm install @youzan/zanui-vue +``` + +## 二、使用 + + +### 1. 导入所有组件 + +```javascript +import Vue from 'vue'; +import ZanUI from '@youzan/zanui-vue'; +// 你也可以使用自己的主题 +import '@youzan/zanui-vue/lib/zanui-css/index.css'; + +Vue.use(ZanUI); +``` + +### 2. 按需导入组件 + +```javascript +import Vue from 'vue'; +import { Button, Cell } from '@youzan/zanui-vue'; +import '@youzan/zanui-vue/lib/zanui-css/button.css'; +import '@youzan/zanui-vue/lib/zanui-css/cell.css'; + +Vue.component(Button.name, Button); +Vue.component(Cell.name, Cell); ``` -## 安装组件依赖库 -```bash -ynpm i +## 三、开发 + +### 1. 新建一个组件 + +```shell +make init componentName ``` -## 新建组件（以waterfall为例） -新建一个Vue组件，比如 waterfall -```bash -make init waterfall -``` -就可以在 packages目录 里面看到waterfall初始化的组件代码了。记得更新package.json和README.md里的组件描述信息 +### 2. 示例预览 -## 示例预览（以waterfall为例） -在 docs/nav.config.json 文件里合适的地方写入组件声明，根据组件类型（JS组件，CSS组件，Form等）进行区分 -在 docs/examples 目录里新建 同名的md文件，如 waterfall.md -在项目的根目录下执行以下命令，启动server -``` +在`docs/nav.config.json`文件里合适的地方写入组件声明，根据组件类型（JS组件，CSS组件，Form等）进行区分 在`docs/examples-docs`目录里新建同名的md文件，如`waterfall.md`，在项目的根目录下执行以下命令，启动server： + +```shell make dev ``` -浏览器访问 http://localhost:8080/#/ 就可以看到所有组件的示例了 - - - - - - - +浏览器访问[http://localhost:8080](http://localhost:8080)就可以看到所有组件的示例了。 + +## 四、开源协议 +本项目基于 [MIT](https://zh.wikipedia.org/wiki/MIT%E8%A8%B1%E5%8F%AF%E8%AD%89) 协议，请自由地享受和参与开源。