技术栈

HTML5 + CSS3 + Less + ES6+ + Vue3.x + Composition-API + Vite + Gulp + Rollup + Jest

初始化项目

  • 可以使用 vite 的官方 template,也可以自己搭建。

官方命令

npm init vite@latest ui --template vue

从零搭建

生成 package.json
npm init -y
{
  "name": "ui",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}
安装依赖
  • dependencies
# 简化版本
npm i -S clipboard mockjs vue vue-router
# or 指定版本
npm i -S clipboard@2.0.8 mockjs@1.1.0 vue@3.0.11 vue-router@4.0.6
👀 查看说明
  • devDependencies
# 简化版本
npm i -D @rollup/plugin-node-resolve @types/jest @types/mockjs @types/node @typescript-eslint/eslint-plugin @typescript-eslint/parser @vitejs/plugin-vue @vue/compiler-sfc @vue/test-utils autoprefixer del eslint eslint-config-airbnb-base eslint-config-prettier eslint-plugin-import eslint-plugin-jest eslint-plugin-prettier eslint-plugin-vue gulp gulp-autoprefixer gulp-cssmin gulp-less gulp-postcss jest less markdown-it-container postcss-pxtorem prettier rollup rollup-plugin-terser rollup-plugin-typescript2 rollup-plugin-vue ts-jest typescript vite vite-plugin-vuedoc vue-jest vue-tsc
# or 指定版本
npm i -D @rollup/plugin-node-resolve@13.0.0 @types/jest@26.0.23 @types/mockjs@1.0.4 @types/node@15.0.2 @typescript-eslint/eslint-plugin@4.25.0 @typescript-eslint/parser@4.25.0 @vitejs/plugin-vue@1.2.2 @vue/compiler-sfc@3.0.5 @vue/test-utils@2.0.0-rc.6 autoprefixer@10.2.6 del@6.0.0 eslint@7.27.0 eslint-config-airbnb-base@14.2.1 eslint-config-prettier@8.3.0 eslint-plugin-import@2.23.4 eslint-plugin-jest@24.3.6 eslint-plugin-prettier@3.4.0 eslint-plugin-vue@7.10.0 gulp@4.0.2 gulp-autoprefixer@7.0.1 gulp-cssmin@0.2.0 gulp-less@4.0.1 gulp-postcss@9.0.0 jest@26.6.3 less@3.13.1 markdown-it-container@3.0.0 postcss-pxtorem@6.0.0 prettier@2.3.0 rollup@2.50.5 rollup-plugin-terser@7.0.2 rollup-plugin-typescript2@0.30.0 rollup-plugin-vue@6.0.0 ts-jest@26.5.6 typescript@4.1.3 vite@2.2.3 vite-plugin-vuedoc@3.1.3 vue-jest@5.0.0-alpha.10 vue-tsc@0.0.24
👀 查看说明

创建项目目录

创建演示项目目录
  • 生成 tsconfig.json
# 全局安装
npm i -g typescript
# 初始化
tsc --init
  • 根目录创建 index.html
<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>UI组件库</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/examples/main.ts"></script>
  </body>
</html>
  • 创建 examples 目录,此目录为演示文档主目录,相当于 src
    • 创建 examples/assets:资源目录
    • 创建 examples/components:演示项目的公共组件
    • 创建 examples/router:路由
    • 创建 examples/App.vue:页面入口
    • 创建 examples/main.ts:主入口
import { createApp } from "vue";
import router from "./router";
import App from "./App.vue";

const app = createApp(App);
app.use(router);
app.mount("#app");
  • 配置 Vite
    • 创建 vite.config.ts
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

export default defineConfig({
  plugins: [vue()]
});
  • 配置 Eslint
    • 创建 .eslintrc.js
// 配置信息
const config = {
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  extends: ["plugin:vue/essential", "airbnb-base", "plugin:prettier/recommended", "plugin:jest/recommended"],
  parserOptions: {
    ecmaVersion: 12,
    parser: "@typescript-eslint/parser",
    sourceType: "module"
  },
  plugins: ["vue", "@typescript-eslint"],
  settings: {},
  rules: {
  }
};
module.exports = config;
  • TS 识别 Vue 文件
    • 创建 typings/shims-vue.d.ts
// vue
declare module "*.vue" {
  import { App, defineComponent } from "vue";
  const component: ReturnType<typeof defineComponent> & {
    install(app: App): void;
  };
  export default component;
}
创建单元测试主目录
  • 配置 Jest
    • 创建 jest.config.js
// 配置
const config = {
  moduleFileExtensions: ["vue", "json", "js", "ts"],
  preset: "ts-jest",
  testEnvironment: "jsdom",
  transform: {
    "^.+\\.vue$": "vue-jest", // vue 文件用 vue-jest 转换
    "^.+\\.ts$": "ts-jest" // ts 文件用 ts-jest 转换
  },
  testMatch: ["**/tests/unit/*.spec.ts"], // 匹配 tests/unit 目录下的 .ts 文件
  verbose: true, // 显示冗余代码,true:显示测试用例,false:显示 console.log
  bail: true, // 经历几次失败后停止运行测试
};
module.exports = config;
  • 创建测试用例 tests/unit/img.spec.ts
import { mount } from "@vue/test-utils";
import MeImg from "~/MeImg/index.vue"; // 引入主要测试的组件

describe("MeImg", () => {
  const src = "http://dummyimage.com/100x100/0079cb/fff"; // 图片地址
  // 测试传参 src
  test("props src", () => {
    // 向组件里传参,获取组件实例
    const wrapper = mount(MeImg, {
      props: { src }
    });
    const viewer = wrapper.find(".me-img"); // 获取 DOM
    expect(viewer.exists()).toBeTruthy(); // 是否存在
    const imgEl = viewer.find("img");
    expect(viewer.exists()).toBeTruthy();
    expect(imgEl.attributes("src")).toBe(src); // 传入的 src 地址是否在组件里正确
  });
});

创建组件库主目录
  • 创建 packages/index.ts
import type { App } from "vue";

/* 基础组件 start */
import MeImg from "./MeImg"; // 图片
/* 基础组件 end */

// 所有组件
const components: any[] = [MeImg];

/**
 * 组件注册
 * @param {App} app Vue 对象
 * @returns {Void}
 */
const install = (app: App) => {
  // 注册组件
  components.forEach(component => app.component(component.name, component));
};
export { MeImg };
// 全部导出
export default {
  install,
  ...components
};

开发组件

  • 创建组件文件 packages/MeImg/index.vue
👀 查看代码
<template>
  <!-- 图片 -->
  <div class="me-img" @click="onClick">
    <img :src="src" width="40px" height="40px" :alt="alt" v-if="!fill" :style="`width:${width};height:${height};border-radius:${radius};`" @load="onLoad" @error="onError" />
    <span :style="`width:${width};height:${height};border-radius:${radius};background:url(${src}) no-repeat center;background-size:${fill};`" v-else></span>
  </div>
</template>
<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "MeImg",
  props: {
    // 图片地址
    src: {
      type: String,
      required: true
    },
    // 宽度
    width: {
      type: String,
      default: ""
    },
    // 高度
    height: {
      type: String,
      default: ""
    },
    // 填充方式
    fill: {
      type: String,
      default: ""
    },
    // 倒角
    radius: {
      type: String,
      default: "0"
    },
    // 错误显示alt
    alt: {
      type: String,
      default: ""
    }
  },
  setup(props, { emit }) {
    // 点击按钮
    const onClick = (e: MouseEvent) => {
      emit("on-click", e);
    };
    // 加载完成
    const onLoad = (e: Event) => {
      emit("on-load", e);
    };
    // 加载失败
    const onError = (e: Event) => {
      emit("on-error", e);
    };
    return { onClick, onLoad, onError };
  }
});
</script>
  • 创建导出文件 packages/MeImg/index.ts
import type { App } from "vue";
import MeImg from "./index.vue";

type SFCWithInstall<T> = T & { install(app: App): void }; // vue 安装

// 安装
MeImg.install = (app: App) => {
  app.component(MeImg.name, MeImg);
};
const InMeImg: SFCWithInstall<typeof MeImg> = MeImg; // 增加类型
export default InMeImg;

  • 样式开发 theme-default/MeImg.less
/**
  * @file 图片
*/
.me-img {
  .inline-block;

  // 相同的样式
  .same-style {
    display: block;
    width: @img-size;
    overflow: hidden;
  }

  img {
    .same-style;
    height: auto;
  }

  span {
    .same-style;
    height: 40px;
  }
}

::: tip 完成
开发完成
:::

打包演示项目

  • package.json 设置命令
"scripts": {
  "start": "npm run dev",
  "dev": "vite -m development",
  "build": "npm run build:theme && npm run build:package && npm run build:package:dts",
  "build:docs": "vite build",
  "build:theme": "gulp build -f build/gulpfile.prod.js",
  "build:package": "rollup -c build/rollup.config.js",
  "build:package:dts": "rollup -c build/rollup.config.dts.js",
  "test:unit": "jest -c=jest.config.js --detectOpenHandles"
}
配置组件库打包
组件 JS 打包
  • 创建 Rollup 配置文件 build/rollup.config.jsbuild/rollup.config.dts.js
👀 rollup.config.js
import nodeResolve from "@rollup/plugin-node-resolve"; // 告诉 Rollup 如何查找外部模块
import typescript from "rollup-plugin-typescript2";
import vue from "rollup-plugin-vue"; // 处理vue文件
import { readdirSync } from "fs"; // 写文件
import { resolve } from "path";
const input = resolve(__dirname, "../packages"); // 入口文件
const output = resolve(__dirname, "../lib"); // 输出文件
const config = readdirSync(input)
  .filter(name => !["theme-default", "index.ts", "types.ts"].includes(name))
  .map(name => ({
    input: `${input}/${name}/index.ts`,
    external: ["vue"],
    plugins: [
      nodeResolve(),
      vue(),
      typescript({
        tsconfigOverride: {
          compilerOptions: {
            declaration: false
          },
          exclude: ["node_modules", "examples", "tests"]
        },
        abortOnError: false,
        clean: true
      })
    ],
    output: {
      name: "index",
      file: `${output}/${name}/index.js`,
      format: "es"
    }
  }));
config.push({
  input: `${input}/index.ts`,
  external: ["vue"],
  plugins: [
    nodeResolve(),
    vue(),
    typescript({
      tsconfigOverride: {
        compilerOptions: {
          declaration: false
        },
        exclude: ["node_modules", "examples", "tests"]
      },
      abortOnError: false,
      clean: true
    })
  ],
  output: {
    name: "index",
    file: `${output}/index.js`,
    format: "es"
  }
});
export default config;
👀 rollup.config.dts.js
import nodeResolve from "@rollup/plugin-node-resolve"; // 告诉 Rollup 如何查找外部模块
import { terser } from "rollup-plugin-terser";
import typescript from "rollup-plugin-typescript2";
import vue from "rollup-plugin-vue"; // 处理vue文件
import { resolve } from "path";
const input = resolve(__dirname, "../packages"); // 入口文件
const output = resolve(__dirname, "../lib"); // 输出文件
const config = [
  {
    input: `${input}/index.ts`,
    output: {
      format: "es",
      file: `${output}/index.esm.js`
    },
    plugins: [
      terser(),
      nodeResolve(),
      vue({
        target: "browser",
        css: false,
        exposeFilename: false
      }),
      typescript({
        useTsconfigDeclarationDir: false,
        tsconfigOverride: {
          include: ["packages/**/*"],
          exclude: ["node_modules", "examples", "tests"]
        },
        abortOnError: false
      })
    ],
    external: ["vue"]
  }
];
export default config;
组件样式打包
  • 创建 Gulp 配置文件 build/gulpfile.base.js
👀 rollup.config.dts.js
const { src, dest, series, parallel } = require("gulp");
const less = require("gulp-less");
const autoprefixer = require("gulp-autoprefixer");
const cssmin = require("gulp-cssmin");
const del = require("del");
// 打包配置
const config = {
  input: "../packages/theme-default/",
  output: "../lib/theme-default"
};
// 导出配置项
exports.config = config;
// 复制字体
exports.copyfont = () => src([`${config.input}fonts/*`, `!${config.input}fonts/*.css`]).pipe(dest(`${config.output}/fonts`));
// 压缩font 里的 CSS
exports.minifontCss = () =>
  src(`${config.input}fonts/*.css`)
    .pipe(cssmin())
    .pipe(dest(`${config.output}/fonts`));
// 删除之前css打包文件
exports.clean = done => {
  del(
    ["*.css", "fonts"].map(name => `${config.output}/${name}`),
    { force: true }
  );
  done();
};

// 编译 LESS
const compile = () =>
  src([`${input}*.less`, ...["base", "variable"].map(name => `!${input}${name}.less`)])
    .pipe(less())
    .pipe(
      autoprefixer({
        overrideBrowserslist: ["last 2 versions"]
      })
    )
    .pipe(cssmin())
    .pipe(dest(output));
exports.build = series(clean, parallel(compile, copyfont, minifontCss));

上传 npm 官网

  • 登录
npm login
  • 发布
npm publish
Logo

前往低代码交流专区

更多推荐