创建、发布自己的 Vue UI 组件库

初始化 project

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

npm install -g @vue/cli

vue create mste-component

进入我们新建的项目, 让我们看看当前的项目文件:

接下来让我们写一个简单的 Vue component. 这里我写了一个简单的顶栏控件, 用来展示.

配置 project

下面我们来配置当前项目, 以使其可以发布到 npm 上.

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

import Vuefrom 'vue'

import Buttonfrom '../components/Button.vue'

import Iconfrom '../components/Icon.vue'

const Components = {

Button,

    Icon

}

Object.keys(Components).forEach(name=> {

Vue.component(name, Components[name])

})

export default Components

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

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

npm run build-bundle

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

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

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

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

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

npm 发布

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

npm add user// 按照提示输入用户名, 邮箱等即可复制代码

然后使用npm login登录注册号的状态

登录后可以使用npm whoami查看登录状态

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

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

npm run build-bundle

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

npm publish --access public

成功了

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

测试使用

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

npm install --save @ssthouse/mste-component

然后在index文件 (如src/main.js) 中引入该组件库:

import '@ssthouse/mste-component'

接下来我们就可以在 Vue的template中使用组件库中的 Component了:

最后

经过上面这些步骤后, 我们就拥有了一个属于自己的组件库了. 我们可以随时更新, 发布自己新版的组件库.

而依赖了该组件库的项目只需要使用简单的 npm 命令即可更新

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