Vue 组件开发

在使用 Vue 进行日常开发时, 我们经常会用到一些开源的 UI 库, 如: Element-UI, iview 等，只需一行命令, 即可方便的将这些库引入我们当前的项目:

$ npm install iview --save
// or
yarn add iview -D
 

但是当我们自己开发了一个 UI Component, 需要在多个项目中使用的时候呢? 我们首先想到的可能是直接复制一份过去对吗?

这样做是很方便, 但是有两个问题:

• 当该 component 需要更新时, 我们需要手动维护所有用到该 component 的更新
• 当有多个 component 需要共享时, 手动复制过于繁琐

从零实现一个日历组件

涵盖大部分vue的知识点

• vue指令
• es6 解构赋值
• 计算属性
• v-model

初始化 project

这里我们使用官方的 vue-cli 初始化一个 Vue 项目

 yarn global add @vue/cli
 vue created date-picker

引入组件

<DatePicker />

配置 project

首先我们编辑入口文件 src/components/index.js, 使其被作为 UI 库导入时能自动在Vue中注册我们的 Component:

import Vue from "vue";
import DatePicker from "./date-picker";

const Components={
    DatePicker
};

Object.keys(Components).forEach(name=>{
    Vue.component(name,Components[name]);
});


export default Components;

接下来我们添加 build 项目的脚本到 package.json 的 scripts 中:

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "build-bundle": "vue-cli-service build --target lib --name my-component ./src/components/index.js"
  },

其中 --name libraryName 指定的是要发布的Library的名称, 我们执行上面新加的脚本:

 npm run build-bundle

可以看到 build 生成了各种版本可以用于发布的js文件

这里我们选择默认发布我们的 *_.common.js_ 文件, 所以我们在 package.json中添加main属性.

指定该属性后, 当我们引用该组件库时, 会默认加载 main 中指定的文件.

"main": "./dist/my-component.common.js"

最后, 我们再配置 package.json中的 files属性, 来配置我们想要发布到 npm 上的文件路径.

我们这里将用户引用我们的组件库可能用到的所有文件都放进来:

"files": [
    "dist/*",
    "src/*",
    "public/*",
    "*.json",
    "*.js"
  ]

npm 发布

首先我们注册一个 npm 账号 (如果已有账号, 可以跳过此步骤)

npm add user

这里有一个地方需要注意：

Logged in as 您的Username on https://registry.npmjs.org/.

如果 on 后面不是 https://registry.npmjs.org/ ，而是其他的镜像，比如我们大家常见的淘宝镜像：http://registry.npm.taobao.org/，那么需要把镜像替换回npm的地址：

npm config set registry https://registry.npmjs.org/

再重新执行 npm adduser,然后使用npm login登录注册号的状态，登录后可以使用 npm whoami 查看登录状态

在发布之前, 我们修改一下package.json中项目的名称(注意不要和已有项目名称冲突), 推荐使用 @username/projectName 的命名方式

"name": "@chenwl/my-component"

接下来我们就可以发布我们的 UI 组件库了, 在发布之前我们再编译一次, 让build出的文件为我们最新的修改:

npm run build-bundle

我们使用下面的命令发布我们的项目:

npm publish --access public

需要注意的是 package.json中指定的version属性: 每次要更新我们的组件库都需要更新一下version(毕竟同一个version 的代码不同,很容易让人产生疑惑)

测试使用

这样我们就完成了自己的 UI 组件库的发布. 接下来我们可以在任何需要使用到该组件库的项目中使用:

npm install --save @chenwl/my-component