易安联enlinkui组件库

install

如果项目中没有安装过element-ui 需要先

npm install [email protected] -S

然后安装enlinkui

npm install enlinkui@latest -S --registry=http://192.168.100.216:8081/repository/npm-local/

usage

如果项目中没有引入过element-ui 需要先

import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
Vue.use(ElementUI);

然后全量 或者 按需引入组件库

// 全量导入组件库
//npm run lib 构建方式
import enlinkui from 'enlinkui'
import 'enlinkui/lib/enlinkui.css'
import 'enlinkui/theme/index.css'

//npm run build 构建方式

import enlinkui from 'enlinkui'
import 'enlinkui/lib/index/style.css'
import 'enlinkui/theme/index.css'

// 注册组件库
Vue.use(enlinkui);

or

//按需引入
import {EnButton} from 'enlinkui' 

or 

import EnButton from 'enlinkui/lib/en-button'
import 'enlinkui/lib/en-button/style.css'


// 注册单个组件
Vue.use(EnButton);

//按需引入需要在测试项目中使用babel-plugin-import，babel.config.js增加如下配置：
module.exports = {
  presets: [
	"@vue/app", 
	["@babel/preset-env", { "modules": false }]
  ],
  plugins: [
    [
      "import",
      {
        "libraryName": "enlinkui",
        "style": (name) => {
			return `${name}/style.css`;
        }
      }
    ]
  ]
}

如果使用主题切换功能，配套的组件

//引入即可使用
<enucp-themePicker></enucp-themePicker>

如果使用国际化，按照vue-i18n文档配置好你的文件，然后再将enlink组件库语言文件合并，如下：

import ElementLocale from 'element-ui/lib/locale';
import enLocale from 'element-ui/lib/locale/lang/en';
import zhLocale from 'element-ui/lib/locale/lang/zh-CN';

import EnLocale from 'enlinkui';
import enEnLocale from 'enlinkui/language/lang/en-us';
import enZhLocale from 'enlinkui/language/lang/zh-cn';

import en from "你自己的中文翻译文件";
import zh from "你自己的英语翻译文件";

const messages = {
    en: Object.assign(en, enLocale, enEnLocale),
    zh: Object.assign(zh, zhLocale, enZhLocale)
};

const i18n = new VueI18n({
    locale: 'zh', // set locale
    messages // set locale messages
});
ElementLocale.i18n((key, value) => i18n.t(key, value));
EnLocale.i18n((key, value) => i18n.t(key, value));

组件开发（改造）流程 ：

首先 git clone http://192.168.100.70/dragon/enlinkui

1.为组件增加install方法

// 导入组件，组件必须声明 name
import EnButton from './src'

// 为组件提供 install 安装方法，供按需引入
EnButton.install = function (Vue) {
  Vue.component(EnButton.name, EnButton)
}

// 导出组件
export default EnButton

2.packages入口文件index.js增加install方法并导出

// 导入需要改造的组件
import EnButton from './Button'

// 组件列表中加入需要改造的组件
const components = [
  EnButton
]

//导出列表中加入需要改造的组件，用于全局导入
export default {
        EnButton,
        install
}
//用于按需导入
export {
  EnButton,
  install
}

export暴露出来可以在使用时按需引入，export default暴露出来的组件只能在使用时全局引入。

//本地导入测试

//examples/main.js中导入
// 导入组件库
import enlinkui from '../packages'
// 注册组件库
Vue.use(enlinkui)

//根目录下执行

npm run serve

3.配置package.json，编译、发布组件库（已配置，不需要修改）

我们需要编写package.json文件的description,keywords等

• description 组件库的描述文本
• keywords 组件库的关键词
• license 许可协议
• repository 组件库关联的git仓库地址
• homepage 组件库展示的首页地址
• main 组件库的主入口地址(在使用组件时引入的地址)
• private 声明组件库的私有性,如果要发布到npm公网上,需删除该属性或者设置为false
• publishConfig 用来设置npm发布的地址,这个配置作为团队内部的npm服务器来说非常关键,可以设置为私有的npm仓库

1）增加lib编译命令

"scripts": {
    "serve": "vue-cli-service serve --open --public=http://localhost:8080/home",
    "serve:prod": "vue-cli-service serve --public=http://168.168.168.47:8080/home",
    "dev": "vue-cli-service serve --open",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
    "lint": "vue-cli-service lint",
    "build:entry": "node build/build-entry.js",
    "lib": "vue-cli-service build --target lib --name enlinkui --dest lib packages/index.js",
    "build_doc": "npx vuese gen && npx vuese serve --open"
}

其中，enlinkui是打包后的库名文件前缀。

• npm run serve 快速启动并打开example
• node build/new.js componentname 自动生成组件目录、组件的install代码、入口文件的install代码及组件的模板代码、测试模板、文档模板
• npm run lib 这条命令会生成一个 lib 文件夹，将所有的组件打包。然后 npm publish 发布到 npm仓库。lib命令和build命令，分别是整体打包和单组件独立打包（含整体打包）
• build:entry 命令用来自动生成packages下的入口文件（前提是：组件文件夹名首字母大写，组件name以'en-'+组件文件夹形式命名）。
• npm run build_doc 使用vuese自动生成组件文档，指定生成的文档类型docute，会把vue文件构建出的所有markdown，整合为一个单页应用
• npm run test:unit 执行组件单元测试

2）指定打包文件范围及入口文件

你只需将所有你想添加到项目中的文件和目录添加到 packge.json 的 files 属性上。设置了files后，只有在 files 中指定的文件才会被打包到项目中。

{  
    "name": "enlinkui",  //组件库名
    "main":"lib/enlinkui.umd.js",//这样才能直接import enlinkui from 'enlinkui' 否则  只能 import enlinkui from 'enlinkui/lib/enlinkui.umd'
    "files": ["/lib"]//只有在 files 中指定的文件才会被打包到项目中
}

4.本地编译组件库代码

npm run lib //整体打包
or
npm run build //单组件独立打包 + 整体打包

5.更新版本号

手动修改package.json里面的version或者自动更新。

npm提供了脚本帮我们实现自动更新版本号，如下：

npm version patch
npm version minor
npm version major

脚本里面以及增加了运行npm run build 或者 npm run lib后 version自动更新功能。

6.登录

npm login --registry=http://192.168.100.216:8081/repository/npm-local/

按照提示输入用户名、密码及邮箱：

• 账号：npm_upload

• 密码：enlink

• 邮箱：[email protected]

7. 发布

npm publish

8.安装、使用(新建测试项目)

//测试项目根目录下安装
npm i enlinkui --registry=http://192.168.100.216:8081/repository/npm-local/

//测试项目入口文件中导入
import enlinkui from 'enlinkui'
import 'enlinkui/lib/enlinkui.css'
import 'enlinkui/theme/index.css'

//测试项目入口文件 注册组件库
Vue.use(enlinkui)

//使用 通过组件定义时指定的name引用 定义的时候注意统一按照en-开头
<enucp-button type="primary">custom button</enucp-button>

9.文档说明

如果需要查看说明文档或示例代码可以运行npm run serve 启动运行本地服务器查看

或者通过公司组件库文档服务器访问：http://168.168.168.47:8080/home#/

其他

涉及element-ui的二次封装的组件，开发测试环境都需要安装

npm install [email protected] -D
npm install [email protected] -D
npm install [email protected] -D

导出的组件对象中没有添加name属性的，需要设置name属性

国际化的地方需要改成字面量或者新增个属性