├── Readme.md // help
├── package.json // 应用依赖源
├── static // 静态文件
├── demos // feui栗子
├── packages // 组件目录
│ ├── button // 组件
│ │ └── index.vue // 此组件主体/入口
│ └── ……
│ ├── feui-css // 样式文件
│ ├── utils // 工具类文件夹
│ └── index.js // 组件入口文件
├── node_modules // 依赖文件
├── lib // 组件生成的可用npm文件夹
│ ├── index.js // npm 入口文件
│ ├── ……
│ └── feui-css // npm 样式文件
├── doc // 文档目录
├── build // 配置
│ ├── bin
│ │ ├── build-components.js // 编译组件配置
│ │ ├── build-entry.js // 生成组件模板
│ │ ├── build-lib.js // 生成组件文件
│ │ ├── build-style-entry.js// 生成组件样式文件
│ │ └── get-components.js // 获取组件配置
│ ├── build.js // 构建文件
│ ├── webpack.build.js // 通用配置
│ ├── webpack.config.dev.js // 组件开发配置
│ ├── webpack.config.prod.js // 组件发布配置
│ └── release.sh // 执行文件
└── .babelrc // babel配置
在
packages/
文件夹下面新建组件目录
在文件夹下面新建index.vue
文件
注意:每个组件必须要有一个name
值,且为必填,为了方便管理和调用,请尽量以fe-
开头
切记:这个名字就是组件调用时使用的名字
生成 npm 文件和组件文件 直接运行npm run dist
第一步:安装组件
npm install feui@latest --save-dev
第二步:在项目中引入组件
使用 babel-plugin-import (推荐)
在 .babelrc
"plugins": [["import", { "libraryName": "feui", "style": true }]]
Vue.use(Feui)
在代码中直接使用feui
组件
import { Badge } from 'feui';
重启一下就可以使用了 so easy!