我们的目标是写一个组件上传到npm,然后可以通过 cnpm install --save kyswitch 的方式去依赖这个组件,像element-ui一样的去使用
import kyswitch from "kyswitch"
import "kyswitch/lib/kyui.css"
Vue.use(kyswitch);
//页面
<ky-switch></ky-switch>
OK 开始吧!
1、首先创建一个vue项目,我用的是脚手架vuecli4.0
创建完成之后 我们在根目录建立package文件夹,用来存放我们的组建。
自定义组建大家应该都写过,挂载到全局的组件。
2、创建组建文件夹switch
完整的目录结构
mswitch.vue中的内容就是一个简单的组件如下图:
下面看index.js中的内容,将刚才的组建导入,定义install方法,注册到vue实例上。注意Switch.name,这里是我们使用组件时的标签<ky-switch></ky-switch>。
之后将讲一下为什么要用install方法。
import Switch from "./src/mswitch";
Switch.install = function(Vue) {
Vue.component(Switch.name, Switch);
};
export default Switch;
OK 创建好了之后 我们可以在app.vue中试一下组建好不好用。
main.js中将刚才写好的switch组建引入
import kyswitch from "../package/switch/index.js"
Vue.use(kyswitch);
app.vue中
<ky-switch></ky-switch>
写的没问题的话页面会出现刚才实现的组建。证明组建写的没问题。
下一步我们将自己的组件打包并发布到npm上面
首先我们在之前创建好的package文件夹下创建统一入口 index.js,如果组建多的话,这里是统一入口,内容如下:
// 导入开关选择组件
import kyswitch from './switch'
// 存储组件列表
const components = [
kyswitch
]
// 定义 install 方法,接收 Vue 作为参数。如果使用 use 注册插件,则所有的组件都将被注册
const install = function (Vue) {
// 判断是否安装
if (install.installed) return
// 遍历注册全局组件
components.map(component => Vue.component(component.name, component))
}
// 判断是否是直接引入文件
if (typeof window !== 'undefined' && window.Vue) {
install(window.Vue)
}
export default {
// 导出的对象必须具有 install,才能被 Vue.use() 方法安装
install,
// 以下是具体的组件列表
kyswitch
}
配置完成之后,接下来打包,之前打包时命令为 npm run build,这是对整个项目打包,我们现在要打包一个库,所以用到了vue的 构建目标,官方文档看这里vue构建目标。
下面是官方文档的介绍,好照着撸就行。
打开package.json文件,增加打包命令 lib
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"lib": "vue-cli-service build --target lib --name kyui --dest lib package/index.js"
},
--name 是输出的文件名字 --dest是打包的文件夹名字 入口则是上面提到的 package下面的index.js
在终端输入 npm run lib 得到如下结果
我们可以测试一下打包出来的都东西能不能用,同样在main.js中引入 vue.use( ) ;注意 这里需要引入css,因为打包时 css是抽离出来的。
import kyswitch from "../lib/kyui.common.js"
import "../lib/kyui.css"
Vue.use(kyswitch);
app.vue中
<ky-switch />
正常的话页面会展示咱们的组件。现在是不是有点element-ui的使用样子了。但是element的引入方式是 import kyswitch from "kyswitch " 这个怎么做到呢? 接下来咱们继续配置package.json。
"name": "kyswitch",
"version": "1.0.4",
"private": false,
"author": "Mr.xu",
"repository": "",
"main": "lib/kyui.common.js",
"style": "lib/kyui.css",
"keywords": [
"vue开关",
"switch"
],
"files": [
"lib",
"package"
]
需要有几点注意:
name 是将来npm packages 的包名字,所以尽量取成自己想要的。
version 当前库的版本 每次更新npm库版本的时候需要修改
private 这个是私有还是公有,我们在npm官方注册一个账号,当创建一个仓库的时候 选择免费的也就是开源的,私有的收费7$。所以直接false就行。
repository 这个是源码地址,一般是个git地址。
main 重要的来了,main是库的入口文件。为什么我们能在 main.js中直接 这么引用呢,就是因为有 main这个字段。否则我们得 import kyswitch from "kyswitch/lib/kyui.common.js" 这样引入。
import kyswitch from "kyswitch"
import "kyswitch/lib/kyui.css"
style 样式的入口文件。
keywords 这个是关键字 方便查找我们的组建。
files 上传哪些文件到npm的白名单。
我们发布组建的时候只希望发布lib package 文件夹其他的不需要,这怎么设置呢,有两种方式,一个是package.json配置白名单 只上传哪些(上面有提到),第二种在根目录建立文件夹.npmignore,这个叫黑名单是告诉哪些不要上传。内容如下: 这个叫黑名单
.DS_Store
node_modules/
examples/
packages/
public/
src/
vue.config.js
babel.config.js
*.map
*.html
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw*
再发布之前得需要有npm的账号,去注册一个账号,之后再项目根目录终端:注意如果你是注册了淘宝镜像,请先切回源镜像npm :npm config set registry https://registry.npmjs.org
npm login
username:
password:
email:
输入完成之后 检查一下有没有登录成功。终端输入下面命令 会返回你的账号,说明登录成功。
npm whoami
执行命令,将组件发布到npm
npm publish
出现这个说明发布成功了,等2-3分钟,在npm官网刷新一下看看能不能看到自己的库
上传成功后如何在别的项目中使用呢?
打开终端 输入命令 cnpm install --save kyswitch 依赖库,然后按着咱们最开始的目标来使用就可以了,大家在发布过程中有什么问题可以私聊我。