lerna init步骤

• lerna init (生成le rna配置文件)

• "npmClient": "yarn" (配置npm源)

• "useWorkspaces": true (作用域)

• package.json 配置 工作的作用域在哪个地方

  "workspaces": [
    "packages/*"
  ],

  • yarn install

  • lerna create button (创建库)

  • 4. 解析ts vue文件类型

  • yarn add typescript -W (安装ts,根目录下安装加 -W)

  • npx tsc --init ( 生成ts配置文件)

  • yarn add vue@latest -W (项目根目录安装vue)

  • 5. ui组件有很多 全局引入 那就需要一个整合全部组件的文件(zd-ui)遍历全部组件,直接回车 (lerna create zd-ui)
  • 7. 运行组件 vue 通过webpack

  # 安装webpack/vue相关资源
  yarn add webpack webpack-cli webpack-dev-server vue-loader@next @vue/compiler-sfc -D -W
  
  yarn add babel-loader @babel/core @babel/preset-env @babel/preset-typescript babel-plugin-module-resolver url-loader file-loader html-webpack-plugin css-loader sass-loader style-loader sass -D -W
  

  • 8. babel.config.js 将代码转es5

BEM命名规范

http://www.divcss5.com/css3-style/c56988.shtml

样式

config.scss

/* 修饰命名空间 */
$namespace: 'X';
/* 修饰状态 */
$state-prefix: 'is-'; 
/* 修饰类型的 */
$modifier-separator: '--';
/* 划分空间分隔符 */
$element-separator: '__'; 

var.scss

@import "../mixins/config.scss";

$--color-primary: #409EFF;
$--color-white: #FFFFFF;
$--color-black: #000000;
$--color-success: #67C23A;
$--color-warning: #E6A23C;
$--color-danger: #F56C6C;
$--color-info: #909399;

mixin.scss

@import "../common/var.scss";

// .x-button{}
@mixin b($block) {
  $B: $namespace + '-' + $block;
  .#{$B} {
    @content;
  }
}

// .x-button.is-xxx 
@mixin when($state) {
  @at-root {
    &.#{$state-prefix + $state} {
      @content;
    }
  }
}

// &--primary => .x-button--primary
@mixin m($modifier) {
  @at-root {
    #{&+$modifier-separator+$modifier} {
      @content;
    }
  }
}

// &__header => .x-button__header
@mixin e($element) {
  @at-root {
    #{&+$element-separator+$element} {
      @content;
    }
  }
}

预览环境中使用scss

import {createApp} from 'vue'
import ZdDesign from  'zd-ui'
import App from './App.vue'

import "theme-chalk/src/index.scss"

createApp(App).use(ZdDesign).mount('#app')

最终使用打包后的css引入即可，这里为了方便调试，不需要每次重新进行打包

ICON组件的编写

使用字体图标iconfont实现字体图标

theme-chalk/icon.scss

@import "common/var.scss"

@font-face {
  font-family: 'z-ui-icons';
  src: url('./fonts/iconfont.woff') format('woff'),
  url('./fonts/iconfont.ttf') format('truetype'),
}

[class^="#{$namespace}-icon-"] {
  font-family: "z-ui-icons" !important;
  font-size: 14px;
  display: inline-block;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: grayscale;
}

@keyframes rotating {
  0% {
    transform: rotateZ(0deg);
  }

  100% {
    transform: rotateZ(360deg);
  }
}

.#{$namespace}-icon-loading {
  animation: rotating 1.5s linear infinite
}

template

<template>
  <i :class="x-icon-${name}"></i>
</template>

<script lang="ts">
  import {defineComponent} from 'vue'
</script>

website App.vue

<template>
  <div>
    <z-button type="primary" loading icon="z-icon-pengyouquan"></z-button>
    <z-button type="primary" disabled></z-button>
    <z-button type="primary" icon="z-icon-pengyouquan">按钮111</z-button>
    <z-button type="success" round></z-button>
    <z-icon name="dizhi"></z-icon>

    <div>
      <z-button-group>
        <z-button type="primary">Previous Page</z-button>
        <z-button type="primary">
          Next Page<z-icon class="z-icon--right"><ArrowRight /></z-icon>
        </z-button>
      </z-button-group>
    </div>

    <!-- bem 规范 -->
    <div class="x-button">
      <!-- -- 表修饰 -->
      <button class="x-button--primary"></button>
      <!-- 部分  __ 表内容 -->
      <div class="x-button__header"></div>
      <div class="x-button__content"></div>
      <div class="x-button__footer"></div>
    </div>

    <!-- 
      1. 全部:  x-xx
      2. 局部: __名称
      3. 修饰: --success
      4. 状态: is-
     -->
  </div>
</template>

theme-chalk 组件

• 不是通过lerna 创建的包，需要手动配置package.json
• yarn install (该步骤必须执行，不然找不到包)

button/icon组件知识点回顾

1. 样式的处理 bem: (1)全局 (2)局部 (3)修饰 (4)状态 sass@mixin 创建方法
2. icon ---> iconfont 配置项目 以及sass 自动添加前缀 [class^='#{$namespace}-icon-'] --->创建package.json ---> 在服务中引入(yarn install)
3. button (1)v3组件间的传值 ---> v3动态绑定样式里面可以放数组并且可以嵌套对象

router

• yarn add vue-router@4 -W (v3路由)
• website 下新建 components文件夹

gutter

• gutter : provide inject col
• 优化gutter 通过row
• justify

checkbox

• 处理复杂属性 通过接口
• 双向数据绑定 v-model => modelValue update:modelValue 解决方法： 计算属性 set emit

打包

• umd格式 支持commonjs规范/浏览器规范，但是不支持es6， 使用webpack打包成umd格式

# 通过组件库入口进行打包  package.json
"build": "webpack --config ./build/webpack.config.js"

• esModule格式 支持es6规范,使用rollup 进行打包

yarn add rollup rollup-plugin-typescript2 @rollup/plugin-node-resolve rollup-plugin-vue -D -W

# 打包命令
"build:esm-bundle": "rollup -c ./build/rollup.config.bundle.js"

全量打包

import typescript from 'rollup-plugin-typescript2'
import {nodeResolve} from '@rollup/plugin-node-resolve';
import path from 'path'
import {getPackagesSync} from '@lerna/project'
import vue from 'rollup-plugin-vue'

// 获取当前package目录下的所有package.json
const inputs = getPackagesSync().map((pck) => pck.name).filter(name => name.includes('@z-ui'))

export default {
  input: path.resolve(__dirname, '../packages/zd-ui/index.ts'),
  output: {
    format: 'es',
    file: `lib/index.esm.js`
  },
  plugins: [
    nodeResolve(),
    vue({
      target: 'browser'
    }),
    typescript({
      exclude: [ // 默认调用 tsconfig.json 自动生成声明文件
        'node_modules',
        'website'
      ]
    })
  ],
  external(id) { // 删除vue本身
    return /^vue/.test(id)
  }
}

• 按需打包