杨信鹏的博客

# Vue

提示

本节为可选内容。

警告

不建议在库中使用 .vue 单文件来开发组件，这会缺少类型推断。除非有很特殊的需求。

如果要搭建一个基于 Vue (opens new window)、React (opens new window) 等的组件库，需要注意框架的依赖需要写在 peerDependencies 宿主依赖 字段中，而 非 devDependencies 开发依赖、dependencies 生产依赖。用户使用的框架版本是用户根据自身的业务逻辑决定的。




 
 
 
 




























// package.json
{
  // ...
  // 该库依赖于 vue，且版本需大于等于 3
  "peerDependencies": {
    "vue": ">=3.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.15.5",
    "@babel/plugin-transform-runtime": "^7.15.0",
    "@babel/preset-env": "^7.15.6",
    "@babel/preset-typescript": "^7.15.0",
    "autoprefixer": "^10.3.7",
    "babel-loader": "^8.2.2",
    "clean-webpack-plugin": "^4.0.0",
    "css-loader": "^6.3.0",
    "express": "^4.17.1",
    "gulp": "^4.0.2",
    "html-webpack-plugin": "^5.3.2",
    "mini-css-extract-plugin": "^2.4.1",
    "postcss": "^8.3.9",
    "postcss-loader": "^6.1.1",
    "sass": "^1.42.1",
    "sass-loader": "^12.1.0",
    "style-loader": "^3.3.0",
    "typescript": "^4.4.3",
    "webpack": "^5.57.1",
    "webpack-dev-middleware": "^5.2.1"
  },
  "dependencies": {
    "@babel/runtime-corejs3": "^7.15.4",
    "core-js": "^3.18.2"
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

思考： Vue 做为 宿主依赖，那本地如何使用 Vue 进行组件开发呢？

要本地使用就可以将 Vue 额外添加为 开发依赖，这样 example 后续也可以对 Vue 的组件进行测试。注意 一定不是 生产依赖。

思考： 如果不作为 生产依赖，该组件库在生产环境如何运行呢？又如何引用到用户安装的 Vue 呢？

用户在使用该组件库时会进行 Vue 的安装，我们可以通过 外部扩展 (opens new window) 对用户安装的 Vue 进行引用。

思考： 为什么 Vue 就不能作为 生产依赖 呢？

如果作为 生产依赖，也就是组件库打包时会包含 Vue。这样用户即使不额外安装 Vue 也可以使用了，但是这样用户就 无法 根据自身需求去 指定 Vue 的版本了。如果用户依旧安装了 Vue，这样生产环境就会存在 两份 Vue 源码，一份来自组件库，一份来自用户的安装。还有如果将 Vue 直接和组件库打包成一个文件，那每次更新组件库都需要 重新打包，浏览器就需要 重新加载 一整个文件，即使 Vue 版本并没改变。如果是将 Vue 单独提取出一个文件，单独引入，那这样又和直接 CDN 引入 Vue 有什么 区别 呢？

# 编写插件

基于 Vue 写个小组件，再写个 Vue 插件安装函数将这小组件添加进 Vue 中。

# 安装开发依赖 Vue3
npm install vue@next --save-dev
1
2
// src/vue-button.ts
import "./style/vue-button.scss";
import { defineComponent, PropType, h } from "vue";

const Button = defineComponent({
  emits: ["click"],
  name: "ui-button",
  props: {
    size: {
      type: String as PropType<"small" | "large" | "default">,
      default: "default",
    },
    color: String,
  },
  methods: {
    onClick(e: Event) {
      this.$emit("click");
    },
  },
  render() {
    return h(
      "button",
      {
        class: ["ui-button", `size-${this.size}`],
        onClick: this.onClick,
      },
      this.$slots.default?.()
    );
  },
});

export default Button;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
// src/style/vue-button.scss
.ui-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: inherit;
  font-weight: 500;
  letter-spacing: 1.25px;
  border-radius: 4px;
  border: none;
  outline: none;
  overflow: hidden;
  cursor: pointer;

  &.size-default {
    height: 36px;
    min-width: 64px;
    padding: 0 16px;
    font-size: 14px;
  }

  &.size-large {
    height: 44px;
    min-width: 80px;
    padding: 0 20px;
    font-size: 16px;
  }

  &.size-mini {
    height: 28px;
    min-width: 50px;
    padding: 0 12;
    font-size: 12px;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

还需要一个 Vue 插件安装函数，不了解的建议查看 官方文档-插件 (opens new window)。

// src/vue-install.ts
import { App } from "vue";
import Button from "./vue-button";

// 需要全局注册的组件
const components = [Button];

// 安装函数: vue.use() 使用
const install = function(app: App) {
  components.forEach((component) => {
    // 遍历注册
    app.component(component.name, component);
  });
};

export { install, Button };
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

由于我们打包入口是 src/index.ts，所以可以把 src/vue-install.ts 里的 install 函数拿到这里进行打包。





 


 






// src/index.ts
import { browser } from "./browser";
import { getRandomInt } from "./util";
import { createBackgroudImg, createRandomTextElement } from "./element";
import { install } from "./vue-install";

export {
  install,
  browser,
  getRandomInt,
  createBackgroudImg,
  createRandomTextElement,
};
1
2
3
4
5
6
7
8
9
10
11
12
13

还需要通过 外部扩展 (opens new window) 将组件库中引用的 Vue 指向用户安装 Vue：

// build.js
// ...
webpack(
  {
    // ...
    externals: {
      vue: {
        commonjs: "vue",
        commonjs2: "vue",
        amd: "vue",
        root: "Vue",
      },
    },
    // ...
  }
  // ...
);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

运行 node build.js，执行成功后。 dist 目录下就会得到一个含有部分辅助函数和 Vue 插件安装函数的 library.js 文件、还有一个 main.css 样式文件。接下来就可以在传统项目或 Webpack 项目中使用了，分 CDN 和 NPM 引入。

# CDN 引入

就拿传统项目的 index.html 文件进行 Vue、组件库的使用：












 
 
 
 
 
 
 
 
 
 


















 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 



<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./dist/main.css" />
  </head>
  <body>
    <div id="app">
      <ui-button :size="btnSize" @click="sizeTrigger"
        >点击改变大小的VueButton</ui-button
      >
    </div>

    <!-- CDN 引入 Vue3 （用户可指定版本） -->
    <script src="https://unpkg.com/vue@next"></script>
    <!-- CDN 引入组件库 （虽然是本地，后续可以将该文件提交至 CDN） -->
    <script src="./dist/library.js"></script>
    <!-- 原有逻辑 -->
    <script>
      // 随机数文本节点
      var randomText = window.library.createRandomTextElement();
      document.body.appendChild(randomText);

      // 显示浏览器类型
      var browserText = document.createElement("div");
      browserText.innerHTML = window.library.browser();
      document.body.appendChild(browserText);

      // 添加图片 callback -> Promise
      window.library
        .createBackgroudImg("https://hxin.link/images/avatar.jpg")
        .then(function(el) {
          document.body.appendChild(el);
        });
    </script>
    <!-- 使用 Vue、组件库 -->
    <script>
      // Vue
      var option = {
        data() {
          return {
            btnSize: "mini",
          };
        },
        methods: {
          sizeTrigger: function() {
            this.btnSize = this.btnSize === "mini" ? "large" : "mini";
          },
        },
      };

      Vue.createApp(option)
        .use(library.install) // 安装组件库
        .mount("#app");
    </script>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

打开 index.html，点击按钮来回切换，功能正常。

运行图效果

注意

注意 Vue 不支持 IE11，之前目标浏览器就没必要兼容 IE 了，可以自己调整。

# NPM 引入

提示

确保在这之前执行了 node compile.js 单独编译文件 和 node declare.js 输出声明文件。

接下来将 example （Webpack 项目） 改造成 Vue 项目。使用 @vue/compiler-sfc (opens new window) 将 .js 改造成 .vue 单文件组件 (opens new window)，并且安装使用该组件库。和之前的逻辑几乎相同：

# 安装 Vue 单文件编译器
npm install @vue/compiler-sfc --save-dev
# 如果搭配 Webpack 使用，还需要安装以下
npm install vue-loader@next --save-dev
1
2
3
4

注意

加上 @next 才为 Vue3，否则时 Vue2。

使用 .vue 单文件可以参考 vue-loader (opens new window) 和 Vue3 + Webpack 的 官方示例 (opens new window) 改造，这里不进行赘述。

注意

注意 VueLoaderPlugin 的引入路径！vue-loader 文档的引入路径并不正确。issue (opens new window)

// 错误
const VueLoaderPlugin = require("vue-loader/lib/plugin");
// 正确
const { VueLoaderPlugin } = require("vue-loader");
1
2
3
4

在 example 目录下新增 App.vue:

<!-- example/App.vue -->
<template>
  <ui-button :size="btnSize" @click="sizeTrigger"
    >点击改变大小的VueButton</ui-button
  >
</template>

<script>
export default {
  data() {
    return {
      btnSize: "mini",
    };
  },
  methods: {
    sizeTrigger: function() {
      this.btnSize = this.btnSize === "mini" ? "large" : "mini";
    },
  },
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

创建一个新的入口 example/main.js，将之前的 example/index.js 逻辑迁移至这里，并使用 Vue：


 

 




 















 
 
 

// example/main.js
import { createApp } from "vue";
import {
  install,
  createBackgroudImg,
  browser,
  createRandomTextElement,
} from "../lib"; // 也可以使用 "library"
import App from "./App.vue";

// 随机数文本节点
var randomText = createRandomTextElement();
document.body.appendChild(randomText);

// 显示浏览器类型
var browserText = document.createElement("div");
browserText.innerHTML = browser();
document.body.appendChild(browserText);

// 添加图片
createBackgroudImg("https://hxin.link/images/avatar.jpg").then(function(el) {
  document.body.appendChild(el);
});

createApp(App)
  .use(install)
  .mount("#app");
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

Webpack 使用的 html 模板也要调整，因为 Vue 实例需要挂载到了 id 为 app 的元素节点：











 



<!-- example/index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13

调整 example/serve.js，使其 example 项目支持 .vue 单文件组件。








 
 
 




 
 
 
 
 




























 
 











// example/serve.js
var path = require("path");
var express = require("express");
var webpack = require("webpack");
var HtmlWebpackPlugin = require("html-webpack-plugin");
var { CleanWebpackPlugin } = require("clean-webpack-plugin");
var webpackDevMiddleware = require("webpack-dev-middleware");
// https://github.com/vuejs/vue-loader/issues/1755
// https://github.com/vuejs/vue-next-webpack-preview
var { VueLoaderPlugin } = require("vue-loader");

var app = express();

var compiler = webpack({
  // 此时不能为 none，因为 vue 需要读取 process.env.NODE_ENV 环境变量
  // 除非使用 webpack.DefinePlugin 重新注入这个环境变量，就可以使用 none 模式
  // mode: "none",
  mode: "development",
  entry: "./example/main.js", // 已从 ./example/index.js 迁移至该文件
  output: {
    path: path.resolve(__dirname, "../example/dist"),
    filename: "[name].[contenthash].js",
    // 无法作用于开发服务器
    clean: true, // https://github.com/webpack/webpack-dev-middleware/issues/861
  },
  target: ["web", "es5"],
  resolve: {
    // 设置 library 别名，指向 ../lib
    alias: {
      library: path.resolve(__dirname, "../lib"),
    },
  },
  module: {
    // 模拟用户的项目也需要对 css 进行处理
    rules: [
      {
        test: /\.vue$/,
        loader: "vue-loader",
      },
      {
        test: /\.css$/,
        // 顺序不能错，loader 从右往左执行
        use: ["style-loader", "css-loader"],
      },
    ],
  },
  plugins: [
    // 请确保引入这个插件！
    new VueLoaderPlugin(),
    // 代替 output.clean
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      title: "example",
      template: "./example/index.html",
    }),
  ],
});

// ...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

运行 node example/serve.js， 打开 http://localhost:3000/，点击按钮来回切换，功能正常。但控制台会有 Feature flags __VUE_OPTIONS_API__, __VUE_PROD_DEVTOOLS__ are not explicitly defined. You are running the esm-bundler build of Vue, which expects these compile-time feature flags to be globally injected via the bundler config in order to get better tree-shaking in the production bundle. For more details, see http://link.vuejs.org/feature-flags. 警告。

根据警告中的网站进行修改：

// ...
var compiler = webpack({
  // ...
  mode: "none", // 可以设置
  plugins: [
    // ...
    new webpack.DefinePlugin({
      "process.env.NODE_ENV": JSON.stringify("development"),
      // https://github.com/vuejs/vue-next/tree/master/packages/vue#bundler-build-feature-flags
      __VUE_OPTIONS_API__: JSON.stringify(true),
      __VUE_PROD_DEVTOOLS__: JSON.stringify(false),
    }),
  ],
});

// ...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

重新运行 node example/serve.js，打开 http://localhost:3000/，警告消失。

← JSX →