kit-ui

custom element with vue2.x

参考： ant-design, elm, iview, youzan, redx-vue

安装

npm i kit-ui -S

引入组件

方式一：在代码中直接按需引入kit-ui组件。推荐

import { Button } from 'kit-ui';

方式二：引入全部组件

import Vue from 'vue';
import KitUI from 'kit-ui';

Vue.use(KitUI);

vue-cli 模板

可以使用vue-cli来初始化kit-ui的通用模板：

vue init jskit/kit-tpl projectName

功能划分

.
├── kit-ui  组件
├── kit-api 接口
└── demo

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

# run unit tests
npm run unit

# run e2e tests
npm run e2e

# run all tests
npm test

For detailed explanation on how things work, checkout the guide and docs for vue-loader.

目录结构

构建时，服务应该以 dist 为根建立服务，并把启动服务的脚本设置到此目录

.
├── build/                 # 构建本目录
├── config/                # 项目构建配置
├── src/                   # 项目 demo 示例
├── lib/                   # npm 发布出口
├── dist/                  # build 生成的生产环境下的项目
├── packages/          # 组件
│   ├── xxx                # 组件包
│   │   ├── demo/              # 使用示例
│   │   ├── src/               # 源码
│   │   ├── test/              # 测试用例
│   │   ├── index.js           # 出口
│   │   └── readme.md          # 文档
│   ├── ...
│   ├── index.js
│   └── README.md
│
├── src/               # 源码目录（开发都在这里进行）
│   ├── assets/            # 放置需要经由 Webpack 处理的静态文件
│   ├── mixins/            # 混入
│   ├── util/             # 工具函数
│   ├── style/            # 样式
│   └── index.js           # 组件汇总输出
│
├── static/              # 放置无需经由 Webpack 处理的静态文件
|                        # 静态文件合并，不要放置令人混淆的多个目录结构
├── test/                # 主要的测试文件目录
├── .babelrc             # Babel 转码配置
├── .eslintrc            # ES 语法检查配置
├── .eslintignore        # （配置）ESLint 检查中需忽略的文件（夹）
├── .gitignore           # （配置）需被 Git 忽略的文件（夹）
├── .postcssrc.js        # postcss 处理器配置
├── package.json         # 项目描述文件
└── README.md