github: [email protected]:Fanli-FE/FVMU.git

文档: https://fanlife.github.io/docs/fvmu/

安装

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"
        })
    */

开发流程

1. 拉取/更新代码
2. 初始化

       npm install     //每次更新代码后都需要执行一遍
       npm link        //执行过一次即可，无需每次执行

3. 开发
   • 维护已有组件
     • 修改对应代码，并添加对应调用示例（如需）
     • 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
4. 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的生成过程）：

1. 开发人员push项目代码到github，触发自动构建（travis-ci）
2. 通过.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文件