# Primeton-UI-基于VUE2.0 + Element-UI的UI框架

Primeton-UI ，一套诞生于实际开发业务的组件库，致力于降低开发人员学习成本，减轻编码负担，提升工作效率。从日常产品的开发业务中总结组件的常见用法，整合封装成一个更便捷更实用的UI组件库

表单
选择器select	选择器扩展select-ext
富文本selectrich	单选框radio
下拉树treeselect	上传upload
复选框checkbox	下拉菜单dropmenu
联级选择cascader	url批量校验multiurl
日期范围datetimerange	动态绑定属性field
步骤表单stepform	工具条toolbar
高级搜索search	...

数据
表格table	分页器pagination
相对时间time	动态列表list
弹框dialog	表单弹窗formdialog
树形tree	多列排序sort
弹出菜单contextmenu	...

导航
面包屑navigation	文档大纲outline

布局
图钉affix	次级菜单secondary-menu
折叠面板fold	展开卡片expand-card
面板分割split	展开面板floating-pane

其他
翻转flip	骨架屏skeleton
下载download-pane	收缩侧边栏hamburger
空状态empty	滑动验证slide-verify
点击复制clip-button	SQLsql

# 安装

# 切换npm registry

使用如下仓库地址

npm config set registry=https://packages.aliyun.com/623d836256f85235f7dd713b/npm/npm-registry/
第一次配置需要做一次登录
npm login
用户名: 623db7e13c6b5273a0764cb4
密码: UP1dH-IITR[I

# npm 安装

推荐使用 npm 的方式安装，它能更好地和 webpack (opens new window) 打包工具配合使用。

npm i primeton-ui -S

# 快速上手

本节将介绍如何在项目中使用 Primeton-ui。

# 引入 Primeton-ui

你可以引入整个 Primeton-ui，或是根据需要仅引入部分组件。我们先介绍如何引入完整的 Primeton-ui。

# 完整引入

在 main.js 中写入以下内容：

import Vue from "vue";
import "primeton-ui/lib/style/main.css";
import PrimetonUI from "primeton-ui";
import App from "./App.vue";

Vue.use(PrimetonUI);

new Vue({
	el: "#app",
	render: (h) => h(App),
});

# 按需引入

import Vue from "vue";
import { PmRadio } from "primeton-ui";
import App from "./App.vue";

Vue.component("PmRadio", PmRadio);
/* 或写为
 * Vue.use(PmRadio)
 */

new Vue({
	el: "#app",
	render: (h) => h(App),
});

import Vue from 'vue';
import {
  "PmBind",
  "PmCascader",
  "PmChange",
  "PmCheckbox",
  "PmContextMenu",
  "PmDialog",
  "PmDropMenu",
  "PmDropMenuItem",
  "PmField",
  "PmFold",
  "PmFoldGroup",
  "PmFormDialog",
  "PmList",
  "PmMain",
  "PmPagination",
  "PmRadio",
  "PmSelect",
  "PmSelectRich",
  "PmStepForm",
  "PmUpload"
} from 'primeton-ui';

Vue.use(PmBind);
Vue.use(PmCascader);
Vue.use(PmChange);
Vue.use(PmCheckbox);
Vue.use(PmContextMenu);
Vue.use(PmDialog);
Vue.use(PmDropMenu);
Vue.use(PmDropMenuItem);
Vue.use(PmFold);
Vue.use(PmFoldGroup);
Vue.use(PmFormDialog);
Vue.use(PmList);
Vue.use(PmMain);
Vue.use(PmRadio);
Vue.use(PmSelect);
Vue.use(PmSelectRich);
Vue.use(PmStepForm);
Vue.use(PmUpload);

# 使用 plop 生成vue2微应用项目

// 在根目录下输入 plop
plop
// 输入 应用名:  端口:
application:  demo1
port:  9000

输入的项目名称最好是小驼峰命名

# 项目启动

先cd进入每一个子项目，需先安装依赖执行 npm install，若已安装可跳过该步骤，npm run dev 启动起来，有使用到的都需要启动。

也可以选择在根目录的 package.json 中配置批量启动, 运行 npm run run:all 即可全部启动。

  "run:all": "npm-run-all --parallel dev:*",
  "init:all": "npm-run-all --parallel install:*",

  "dev:base":"cd base && npm run dev",
  "install:base":"cd base && npm i",

  "dev:demo1":"cd demo1 && npm run dev",
  "install:demo1":"cd demo1 &&  npm i",
    
  "dev:app-process":"cd base && npm run dev",
  "install:app-process":"cd base &&  npm i"

# 微应用调用 base 模块

# 1. base 中暴露出模块给微应用共享：

./build/mfp.config.js

module.exports = {
  name: 'base',
  filename: 'remoteEntry.js',
  exposes: {
    './controller': './src/actions/controller',
    './lib': './src/libs/index.js',
    // ElementUI和 PrimetonUI等全局注册的组件无需暴露，子应用可以直接使用
  },
}

# 2. 在微应用中引用 mfp.config.js中添加 base 配置

  {
    ...
    remotes: {
      base: 'base@/remoteEntry.js'
    },
  }

# 3. 在微应用中引用 base 的模块

import { List } from 'base/lib'
import { DictManager } from 'base/controller'

# 如何扩展微应用的图标?

# 1. 在 https://www.iconfont.cn/ (opens new window) 网站上制作好字体文件, 将其copy 到微应用的 static 目录下

└── static
    └── font_3201028_ggmgh148pbh
        ├── iconfont.css
        ├── iconfont.js
        ├── iconfont.json
        ├── iconfont.ttf
        ├── iconfont.woff
        └── iconfont.woff2

# 2. 在store/index.js 文件中编写加载字体文件的代码


import {HtmlUtil} from 'base/lib'
HtmlUtil.dynamicLoadCss('./demo/static/font_3201028_ggmgh148pbh/iconfont.css')

# 3. 在微应用中就可以调用图标样式了

<span class="iconfont icon-wode"></span>

# 如何访问微应用页面?

http://localhost:8000/app/{appCode}/module/{moduleCode}