安装依赖

提示

推荐使用yarn

yarn install

启动本地开发

在examples目录

npm run dev

http://localhost:8181 (opens new window)

测试组件

本地调试与打包测试切换。修改 examples\main.js

// 本地开发
import FddUI from "../src/index.js";
import "../src/styles/index.scss";

// 测试打包的库
// import FddUI from "../lib/fdd-ui.min.js";
// import "../lib/styles/fdd-ui.css";

文档编写

在docs目录

预览文档

npm run docs:dev

http://localhost:1024 (opens new window)

发布文档

打包生成静态文件

npm run docs:build

提示

将打包出来的docs/.vuepress/dist目录的文件上传服务器即可

新建组件

自动创建对应文件和配置，有部分文件需要手动维护

npm run new [组件名字] [组件中文名字]

如：

npm run new input 输入框

自动创建和修改

自动创建以下文件

docs/component/basic/input.md // 组件文档
src/packages/input/index.js // 组件文件1
src/packages/input/src/input.vue  // 组件文件2
src/styles/input.scss // 组件样式

自动修改以下文件

build/components.json // 引入组件路径
src/styles/index.scss // 引入组件样式

需手动修改

组件库打包入口文件src/index.js 手动维护

导入组件，并注册组件
import FddInput from './packages/input'
....省略

本地预览路由examples/routes.js

  {
    path: "/input",
    component: (resolve) => require(["./routers/input.vue"], resolve),
  }

本地预览导航examples/App.vue

 <li><router-link to="/input">input</router-link></li>

配置文档侧边菜单 docs/vuepress/config.js

{
  title: "基础组件",
  collapsable: false,
  children: [
    "basic/button",
    "basic/input"
  ],
}