jbview-ui v1.0.0

1.安装依赖包

  yarn i / npm install

2.启动官网示例项目

  npm run dev

3.打包官网示例项目

1. 打包目录在 example/jbview-ui

npm run deploy:build

4.创建新的组件流程

1. make new 组件中文名 如:

   make new list

   或 node build/bin/new.js 组件名称 如:

   node build/bin/new.js list

2. 第一步语句将创建以下地址:

 -> packages/[componentName] 组件基本机构地址
 -> packages/theme-chalk/src/[componentName].scss 组件样式文件
 -> types/[componentName].ts 组件类型描述文件,用于规定传参类型
 -> example/docs/[lang]/[componentName].md 组件文档说明(如:参数说明,使用示例等)
 -> test/unit/spece/[componentName].spec.js 单元测试文件
 -> examples/nav.config.json 对应组件侧边栏路由

3. 组件编写完毕之后测试方式
   • 执行以下语句：

   npm run dev:play

   • 修改example/paly/index.vue 文件,引入当前组件
   • 浏览器打开 localhost:8085/paly 可以查看组件效果
   • 或者直接在文档中编写,也能看到组件效果

5.创建新的语言

1. make new-lang language 如:

make new-lang jap 日语

6.打包组件库,并上传到 npm 包管理工具

// 打包组件库：
npm run dist

// 上传到npm包管理工具:
npm config set registry=https://registry.npmjs.org
npm adduser 
  username: 【npm用户名】
  password: 【密码】
  email: 【注册邮箱】
npm publish

7.组件 CDN 引入

1. npm run dist
2. 获取 lib/index.js、lib/theme-chalk/index.css

如:
<!--组件库样式文件-->
<link rel="stylesheet" href="<%= BASE_URL %>jbview-ui/index.css"> 

<!--组件库依赖vue2,为了避免重复引入,组件库采用外部引入方式,可按照实际项目判断-->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>

<!--组件库核心js-->
<script src="<%= BASE_URL %>jbview-ui/index.js"></script>

8.上传图标

1. 打开 iconfonthttps://www.iconfont.cn/
2. 登陆->资源管理->我的项目->新建项目 【注: FontClass/Symbol前缀为: jbv-icon- 】
3. 上传需要的图标 -> 上传完毕 -> 下载至本地
4. 复制其中的 iconfont.ttf、iconfont.woff、iconfont.woff2、iconfont.svg 到 /packages/theme-chalk/src/fonts 目录下
5. 复制iconfont.css中适配 /.jbv-icon-(^:+):before/ 样式的代码至 /packages/theme-chalk/src/icon.scss
6. 执行 node build/bin/iconinit.js
7. 打开组件官网至图标页面,图标即可显示你上传的图标

7.目录结构

<!-- 源码架构: https://www.processon.com/view/link/60372ab3f346fb2a7e38c0e8#map -->
build // 工程化相关配置和脚本
  ├── bin
     ├── build-entry.js   // 生成 /src/index.js
     ├── build-locale.js  // 通过 babel 将 ES Module 风格的翻译文件转译成 UMD 风格
     ├── gen-cssfile.js  // 自动在 /packages/theme-chalk/src/index.scss|css 中引入各个组件包的样式
     ├── gen-indices.js // 用algoliasearch进行多语言全文检索
     ├── i18n.js  // 根据模版（/examples/pages/template）生成对应语言的官网页面的 .vue 文件。
     ├── iconInit.js // 根据 icon.scss 样式文件中的选择器，通过正则匹配的方式，匹配出所有的 icon 名称，然后将这些 icon 名组成数组，将数组写入到 /examples/icon.json 文件中
     ├── new-lang.js // 为组件库添加新语言
     ├── new.js // 添加新组件
     ├── template.js // 监听 /examples/pages/template 目录下的所有模版文件，当模版文件发生改变时自动执行 npm run i18n; 即执行 i18n.js 脚本，重新生成四种语言的 .vue 文件
     ├── version.js // 根据 /package.json 文件，自动生成 /examples/version.json，用于记录组件库的版本信息
  ├── md-loader // webpack loader 用于编译 markdown 文件 在/build/webpack.demo.js 中有引用 编写可参考:【https://webpack.docschina.org/contribute/writing-a-loader/】
  ├── config.js // webpack 的公共配置，比如 externals、alias 等
examples // 官网相关目录
  ├── assets  官网项目的静态资源目录      
  ├── components 官网项目存放一些全局组件的目录。
  ├── demo-styles 组件页面中显示的 组件 demo 的排版样式，和组件自身的样式无关，就像你业务代码中给组件定义排版样式一样
  ├── doc 组件文档（不同语言）
  ├── dom 定义了 dom 样式操作方法，包括判断是否存在指定的样式、添加样式、移除样式、切换样式。
  ├── extension 主题编辑器相关 (webpack.extension.js 编译)
  ├── i18n 官网页面的翻译配置文件都在这里。
  ├── pages 文档文件模板
  ├── play  比如你想看一个 element 中某个组件的效果，特别是组件按需加载时的显示效果，可以在 play/index.vue 中引入使用，使用 npm run dev:play 命令启动项目
  ├── play.js 比如你想看一个 element 中某个组件的效果，特别是组件按需加载时的显示效果，可以在 play/index.vue 中引入使用，使用 npm run dev:play 命令启动项目
  ├── entry.js 官网的入口文件,在这里全量引入组件库，及其样式。
  ├── icon.json 引入的图标列表,  node iconInit.js 会自动构建
  ├── index.tpl 官网 index.html的模板文件
  ├── nav.config.json 官网组件页面的侧边导航栏配置 -- 创建新组件时会自动生成(即执行 make new componentName 组件名称)
  ├── route.config.js 根据路由配置自动生成官网项目的路由配置
  ├── icon.json  // icon组件列表, 由 build/bin/iconInit.js 通过 package/theme-chalk/icon.scss 遍历生成 
  ├── versions.json // 组件版本信息 由  build/bin/version.js 生成
src
  ├── directives  指令
  ├── locale 国际化功能以及各种语言的 部分组件 的翻译文件
  ├── mixins 全局混入的一些方法
  ├── transitions  动画    
  ├── utils 定义了一些工具方法
  ├── index.js // 打包入口文件 通过脚本 /build/bin/build-entry.js 脚本自动生成
packages  // 组件相关 每个组件以目录为单位 目录结构以及其中的基本代码是通过脚本 /build/bin/new.js 自动生成的
  ├── theme-chalk // 组件样式  
      ├── src 组件样式的源码目录
        ├── index.scss，引入目录下所有的样式文件
        ├── comp.scss，组件样式文件，比如：button.scss
        ├── other，比如：字体、公共样式、变量、方法等
  ├── package-name // 组件目录结构如下: 1.连字符形式的包名
     ├── index.js，组件的 install 方法，表示组件是以 Vue 插件的形式存在
     ├── src，组件的源码目录
        ├── main.vue 组件的基本结构已经就绪
test // 测试
types // 对应类型描述文件
components.json // 组件对照表
CHANGELOG.{lang}.md // 各语言日志文件

8.打包生成的文件目录

 -> example/jbview-ui 官网打包的文件目录
 -> lib 组件库打包的文件目录  --> 可通过执行 npm run clean 清除组件库打包的文件
 -> package/theme-chalk/lib 组件库样式打包的文件目录   --> 可通过执行 npm run clean 清除组件库打包的文件