ecard-base v1.0.0-lite.102
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
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago