fvmu-develop v0.1.19
github: git@github.com:Fanli-FE/FVMU.git
安装
npm install fvmu --save
引入
仅支持按需引入,需借助babel-plugin-component
首先,安装 babel-plugin-component
npm install babel-plugin-component -D
然后,在 .babelrc
的 plugins
中添加:
"plugins": [
[
"component",
{
"libraryName": "fvmu",
"styleLibraryName": "styles"
}
]
]
接着,在你自己的文件中引入,以Toast
(plugins)或者Button
(components)为例
import Vue from 'vue'
import { Toast, Button } from 'fvmu'
Vue.component(Button)
/**********************
* plugins用法,无需使用Vue.use
Toast.open("fvmu)
* 或者
Toast.open({
content: "fvmu"
})
*/
开发流程
- 拉取/更新代码
- 初始化
npm install //每次更新代码后都需要执行一遍 npm link //执行过一次即可,无需每次执行
- 开发
- 维护已有组件
- 修改对应代码,并添加对应调用示例(如需)
npm run dev
,测试以保证代码良好运行npm run build
- 切换到
fvmu/npm
目录下,修改package.json
中的版本号后执行npm publish
- 提交全部代码到github
- 新增组件
fvmu create 组件名
- 开发相应代码,在
examples/pages/组件名.vue
中添加对应调用示例,并测试以保证代码良好运行 npm run build
- 切换到
fvmu/npm
目录下,修改package.json
中的版本号后执行npm publish
- 提交全部代码到github
- 维护已有组件
- fvmu命令
fvmu
命令:fvmu create 组件名
,可选参数:-E
:不创建组件对应demo,默认创建,如传入则不创建demo-t
:组件类型,默认components
,若为全局方法,可传入-t plugins
-S
:不启动开发服务器,默认启动并打开demo页(如不创建demo则此项无效),如传入则不启动开发服务器,可通过npm run dev
手动启动-v
:版本信息-h
:帮助信息
附:element-ui
开发及部署流程
开发基本流程
- 开发新组件/维护已有组件,并完成代码逻辑及测试
- 如果是开发新组件 例:
Toast
- 如果是挂载在
Vue.prototype
的全局方法,在根目录下的components.json
中添加方法名及路径,如:"toast": "./packages/toast/index.js"
,在build/bin/build-entry.js
中MAIN_TEMPLATE
模板中添加手动挂载:Vue.prototype.$toast = Toast;
亦或是Vue.prototype.$open = Toast.open;
,调用时:this.$toast.open()
或this.$open()
;同时在全局方法列表中添加Toast
以排除,防止添加到全局export
中 - 如果是组件,只需在根目录下的
components.json
中添加组件名及路径,如:"toast": "./packages/toast/index.js"
,开发过程中需注意,在"./packages/toast/index.js"
中将Toast
注册为vue
组件(vue.component
)
- 如果是挂载在
- 提交到github
部署基本流程
开发人员只需关心提交代码及相应两处(组件只需一处,方法需两处)配置即可。部署流程会在提交代码后自动构建集成。部署流程简单如下(略去了test和example的生成过程):
- 开发人员push项目代码到github,触发自动构建(travis-ci)
- 通过
.travis.yml
指定在成功后执行build/deploy-ci.sh
脚本,脚本先指定github账号,接着运行npm run dist
、npm run deploy:build
等命令,生成组件/入口相关文件,然后clone
guthub上ElementUI/lib
远程分支到本地,接着清空lib下文件(保留README.md
)再将生成的(编译后浏览器可直接引用或通过按需引入)组件拷贝到lib下提交并推送到远端- 生成组件/入口相关文件
npm run dist
:和平常的打包编译流程一样,编译组件代码(config按下不表),生成可供浏览器直接引用的js文件,每个组件生成一个js文件npm run deploy:build
:主要关心其中的node build/bin/build-entry.js
命令,读取根目录的components.json
,遍历当中的组件及对应路径,import后通过export暴露出去,最终生成src/index.js
- 生成组件/入口相关文件
完整引入
完整引入的情况简单,element和iview都是一样,在业务中使用了import iview form 'element-ui'
时,会查找node_modules/element-ui/package.json
中main
字段的值,即lib/element-ui.common.js
(iveiw中为dist/iview.js
)。而样式文件亦需要通过手动引入的方式引入:import 'element-ui/lib/theme-chalk/index.css';
按需引入
element支持借助
babel-plugin-component
实现按需引入,需在.babelrc
的plugins
中配置指定组件的的js及css存放的文件夹名(默认地址是在node_modules/element-ui/lib/
下),也就是部署基本流程中讲到的生成的lib
文件夹[ "component", { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" } ]
这里配置的意思是,按需引入模块时,比如使用到
import { Checkbox } from 'iview'
,此时会引入node_modules/element-ui/lib/checkbox.js
和node_modules/element-ui/lib/theme-chalk/checkbox.css
iview中,支持的按需仅支持组件模板/逻辑部分的按需引入,不支持使用
babel-plugin-component
实现。比如期望只引入Checkbox
组件,做法为import Checkbox from 'iview/src/components/checkbox';
,然后再引入完整的css:import 'iview/dist/styles/iview.css';
fvmu 开发及部署流程
初步计划fvmu组件分两类,一类为可挂载在vue.prototype
下的全局方法,一类为独立的vue
功能/UI组件。同时尝试支持 全局/部分组件/script标签 按需 引入,例:
import { fvmu } from 'fvmu'
// 或
import { Button } from 'fvmu'
// 或
<script src="https://xxxx.com/fvmu/lib/index.js"></script>
目录结构
- bin: 存放编译/构建/测试/部署相关命令
- build: 存放bin下的命令的配置
- packages: 各个独立组件包,styles在theme-chalk下
src: utils/commonfunc
开发及部署
开发
- 在packages中编写组件模板/逻辑/样式
- 提交代码
持续集成
单元测试
部署
- 本地执行
npm run dist
- 打包编译
- 生成lib目录,含编译好的组件的js及样式
本地执行
npm publish
.gitignore和.npmignore
除了常规的忽略文件外,
.gitignore
另外忽略了lib
文件夹,.npmignore
单独忽略了.yml
、examples
文件
6 years ago