ecard-base project is the common code base both for ecard and dui

安装 ecard-base

npm install ecard-base --S

ecard-base 的 peerDependencies

在npm 4.x 版本之前，当你安装完了 ecard-base， ecard-base 的 peerDependencies会自己安装到你的工程目录下，但是4.x以后的npm不会执行下载操作，它会提供一些列的warning告诉你，有哪些包没有安装.

{
    "peerDependencies": {
        "axios": "0.x",
        "element-ui": "2.x",
        "moment": "2.x",
        "vue": "2.x",
        "vue-router": "2 - 3",
        "vuex": "3.x",
        "vue-i18n": "7.x"
    }
}

这些依赖项是外部工程的必需安装项，ecard-base 会和外部工程共用这些依赖项. 在ecard-base中这些依赖项的版本只是给定版本的大致范围，具体使用什么版本，由外部工程自己决定. 但是当依赖项的版本有大版本好更新时，ecard-base的peerDependencies需要做同步修改.

运行以下命令，安装依赖项:

npm install --S axios element-ui moment vue vue-router vuex vue-i18n

ecard-base 提供的接口：

export {
    baApi,
    util,
    CONSTANTS,
    toolkit,
    config,
    EcardDialogs,
    i18nMessages,
    baVuexConfig,
    setDuiEnv,
    setAxios
}

baApi: ba环境下的所有api util：提供的一些util函数 （非必需） CONSTANTS： ba环境下的一些常量 (非必需) toolkit: ecard-base 提供的一些通用UI组件 (非必需) config: ba环境下的一些配置量，比如登录的URL (非必需) i18nMessages: i18n的字典集合，用于实例化 VueI18n (必需) baVuexConfig: ba的vuex config，用于实例化 store (必需)

EcardDialogs： ecard中所有对话框的封装组件, ecard中的所有对话框是通过统一埋点的方式实现. EcardDialogs组件是所有对话框的容器，它统一管理对话框的层级. setDuiEnv: true, 设置当前环境为 DUI (必需) setAxios： 传入一个定制的axios，用作api拦截，如果不传入， 则内部会有一个默认的 axios.create()

如何集成 BA

1 创建 VueI18n 对象

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import moment from 'moment'
import {i18nMessages} from 'ecard-base'

Vue.use(VueI18n)

const defaultLocale = 'zh-cn'
const i18n = new VueI18n({
    locale: defaultLocale,
    messages: i18nMessages
})
moment.locale(defaultLocale)

export default i18n

i18nMessages只是一个字典对象，在集成的过程，将i18nMessages跟自己的字典项进行合并，再创建i18n对象.

2 创建 Vuex 对象

import Vuex from 'vuex'
import Vue from 'vue'
import {baVuexConfig} from 'ecard-base'

Vue.use(Vuex)

export default new Vuex.Store(baVuexConfig)

baVuexConfig只是Ba的vuex配置，在具体的集成过程中，应该将baVuexConfig和自己的配置进行合并后，再创建store.

3 在根部节点中引入对话框组件

<template lang="pug">
    .main
        ...

        ecard-dialogs

</template>

<script>
import {EcardDialogs} from 'ecard-base'

export default {
    components: {
        EcardDialogs
    },
    data () {
        return {

        }
    }
}

</script>

4 引入页面组件，建议采用 lazy load的方式引入页面组件

ecard中的所有页面组件都发布在另外一个npm： 'ecard-pages'.

const KnowledgeCustomizePage = () => import('ecard-pages/lib/KnowledgeCustomizePage')

const routerConfig = [
    {
        path: '/',
        redirect:'/page/card'
    },
    {
        path: '/page',
        name: 'Page',
        component: Layout,
        redirect: '/page/card',
        children : [
            {
                path:'topic',
                name: PAGE_TOPIC,
                component: KnowledgeCustomizePage,
            },
            ...

        ]
    }
]

5 在DUI环境，设置 skill 信息.

router.beforeEach((to, from, next) => {
    // 页面跳到 知识定制页面之前， 先保证把 skill 信息 设置进去
    // 内部会将 skill 转换成 会话精灵.
    if (to.name === target) {
        let duiSkill = {
            skillId: 'xxx',     // dui skill id
            skillName: 'name',  // dui skill 名称
            templateType: 1,    // 1 or 2
        }
        store.commit("SET_DUI_SKILL", duiSkill)               
        return next()
    }
    next()
})

ecard-base 的开发流程说明

当ecard-base模块的代码有持续更新时, 通常是做法是修改package.json 中的version号，version号必须符合semver规范，并且保持递增，同时发布到npm. 在引用ecard-base的工程中修改，package.json中dependencies对应的版本号，并且运行npm update或install. 遇到出错情况下，不得不手动删除node_modules目录，重新安装. (建议在引入ecard-base工程的开发过程中，将dependencies中将ecard-base的版本号设置为lastest，避免频繁修改, 稳定以后再设置具体的版本号.)

当publish和install的事情频繁的发生时，开发过程就会很痛苦.

优化开发模式

npm link

在ecard-base工程目录中，运行 npm link. 它的作用是把当前的ecard-base工程的目录，link到本地全局变量上.

npm link ecard-base

在引用ecard-base的工程中，运行 npm link ecard-base 它的作用是：工程代码中所有import "ecard-base"的位置，链接到之前运行的npm link的全局目录上. 即是，在ecard-base模块工程中的任何修改，可以直接的反应到引用ecard-base的工程中.

撤销 npm link

很遗憾，npm unlink 并不能完成这种撤销操作. unlink 只是 uninstall的别名. 应该运行以下命令来撤销link.

npm remove ecard-base -g

具体开发步骤总结

1.分别在ecard-base,ecard-pages,ecard 执行cnpm install

2.在ecard-base工程目录中 执行 npm link

3.在ecard-pages工程目录中 执行 npm link

4.在ecard-pages工程目录执行 npm link ecard-base

5.在ecard工程目录中分别执行 npm link ecard-base npm link ecard-pages

6.在ecard-base目录执行 npm run watch

7.在ecard-page目录执行 npm run watch

8.在ecard 目录中执行 npm run dev