使用内部npm源
# 使用 .npmrc 文件设置源。根目录新建 .npmrc 文件，并将下面一行代码粘贴进去。
registry=http://nexus-op.vipthink.cn/repository/npm-relax-course-group/
# 下载组件库
npm install klzz-ui
业务组件库初始化
// TODO: 因为业务组件需要接口环境、token等参数，所以需要在项目初始化和登录成功后执行业务组件库初始化方法。
// 初始化方法参数
// env 的值为 'dev' | 'uat' | 'prod'
// token 的值为 https://uat-auth.vipthink.cn/v1/auth/admin/token 接口返回的 data.token
// crmToken 的值为 https://uat-auth.vipthink.cn/v1/auth/admin/token-ugly-crm 此接口返回的data
// elementUi 的值为 element-ui 的参数 { size, zIndex }
// 1. 全量加载组件库
import KlzzUi from "klzz-ui";
KlzzUi.Init({ env, token, crmToken, elementUi });
Vue.use(KlzzUi);
// 2. 按需加载组件库（Init为业务组件库初始化方法）
import { Init, IntentionTime, Login } from "klzz-ui";
Init({ env, token, crmToken, elementUi });
Vue.use(IntentionTime);
Vue.use(Login);
// 因页面载入时，用户可能是未登录状态、登录失效状态，因此必须在用户登录后重新初始化组件库
// 这一步不是必须的，取决于你的项目在用户登录后如何跳转页面：
// 1）使用了 location.href 跳转，页面会刷新重载，会自动执行上面的初始化方法，因此不用手动再次执行初始化
// 2）使用了 vue-router 提供的无刷新跳转方法，如 router.push('/')，则需要手动执行初始化
// 将初始化方法挂载到 vue 的原型上，在用户登录成功后，执行此方法就行
// 全量加载时
Vue.prototype.$klzzUiInIt = KlzzUi.Init;
// 按需加载时
Vue.prototype.$klzzUiInIt = Init;
全量加载
import Vue from "vue";
import KlzzUi from "klzz-ui";
KlzzUi.Init({ env, token, crmToken, elementUi });
Vue.use(KlzzUi);
按需加载
import Vue from "vue";
//按需加载文件会打包进app.js中
import { Init, IntentionTime, Login } from "klzz-ui";
// 组件库初始化方法
Init({ env, token, crmToken, elementUi });
Vue.use(IntentionTime);
Vue.use(Login);
.babelrc
npm install babel-plugin-component -D
{
...
"plugins": [
...,
[
"component",
{
"libraryName": "klzz-ui",
"styleLibrary": {
name: "css",
base: false
}
}
]
]
}