@chenwl/my-component v0.1.1
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