- 全量引入
import XiaoUI from 'xiao-ui'
import 'xiao-ui/lib/index.css'
Vue.use(XiaoUI)
- 按需引入,首先安装 babel 插件
npm install -D babel-plugin-import
,配置 babel
"plugins": [
[
"import",
{
"libraryName": "xiao-ui",
"libraryDirectory": "lib",
"style": "css"
}
]
]
import { Button } from 'xiao-ui'
Vue.use(Button)
// 或者
// Vue.component(Button.name, Button)
注意:不能同时使用全局引入和按需引入
npm run create
创建组件目录,如npm run create button
- 组件目录使用中划线命名方式如
npm run create date-time-picker
- 组件名不需要自动加前缀
- 创建组件目录后需在
components.config.js
中配置组件路径,否则将不会生成 site 的路由 - 注册的组件名不需要加前缀,编译的时候会自动补全前缀,但是必须以大写字母开头,如 name: "Button"
- 文档为组件目录下 README.md 文件
- demo 为组件目录下 demo 文件夹 — 文档和 demo 均支持使用项目中的组件,引用时可直接用组件注册的 name(必须以大写字母开头)
npm run create [component]
: 创建组件,生成模板npm run dev
: 启动开发环境服务npm run build
: 打包npm run build:site
: 打包文档网站npm test
: 运行测试用例,此时 NODE_ENV 为 test
tree -I 'node_modules' -L 1
.
├── README.md
├── guide.md
├── webpack.site.config.js (网站webpack配置)
├── components.config.js (组件配置文件)
├── jest.config.js (jest配置文件)
├── site-dist (文档网站打包目录)
├── site (文档网站)
├── mobile (移动端展示)
├── src (开发目录)
├── lib (打包commonJs目录)
├── es (打包esModule目录)
└── packages (编译脚本等)
源目录
.
├── index.{vue,js,ts,jsx,tsx}
├── index.scss
├── README.md (组件文档)
├── demo (组件demo)
├── __test__ (测试目录)
打包目录
.
├── index.js
├── index.css
├── index.scss
└── style (管理css依赖)
├── css.js
└── scss.js