创建Vue组件npm包实战分析

李广宏

随着前端技术的不断发展，Vue已经成为当下比较流行的开发技术，作为前端工程师，积累下来的前端组件越来越多，通过npm发布组件包来复用这些组件，可以有效地提高工作效率。

创建项目并且开发组件

创建本地代码库

Vue脚手架现已经有2个版本，在这里我们选择Vue cli-3.0版本。创建好文件夹后，输入命令$vue create resources，此处无需安装UI框架，安装一个基本脚手架即可。

组件代码开发

进入项目src文件夹，在该目录下创建packages文件夹，里面用于存放插件包，例如，创建一个叫my-button组件。

首先在src＼packages＼my-button下创建button.vue和index.js button.vue文件内容

index.js文件内容

import MyButton from ./button.vue

MyButton.install = Vue => Vue.component（MyButton. name， MyButton）；

export default MyButton

本地组件调用测试

进入项目src文件夹，在该目录下创建page文件夹，里面用于存放本地浏览页面，然后在创建一个button.vue文件，在到router.js文件将该页面引入。

（a）引入组件

import MyButton from "../../packages/ my-button /button"；

在export default里添加组件components： { MyButton }。

（b）Template调用

按钮

（c）运行访问效果

npm run dev启动本地代码

浏览器里直接访问http：//10.2.2.50：8080/#/button页面。

如果你在浏览器里看到了一个button组件，并且是想要达到的效果，恭喜，你的组件基本创建完成。

npm发包前准备工作

修改本地代码库里package.json文件，这里主要是在scripts对象里添加一条编译命令：

"build-button"： "vue-cli-service build --target lib --name

MyButton ./src/packages/my-button/index.js"

执行打包命令$npm run build-button出现Process finished with exit code 0说明已经打包成功。

在生成的dist文件夹下创建package.json文件，package. json内容如下：

{ "name"： "mybutton"，

"version"： "0.0.1"，

"main"： "MyButton.common.js"，

"private"： false，

"dependencies"： {}，

"author"： "test"，

"description"："這是一个按钮组件"

}

发布npm组件包

注册或登录npm用户

如果已经有了账号，输入命令$npm login登录即可，如果还没账号，可以登录npm官方网站去注册。登录后输入命令$npm whoami来验证当前用户名。

publish发布

进入dist文件夹，$cd dist执行$npm publish如果没有报错，则表示发包成功，可以登录npm官网，查看名下是否有一个叫mybutton组件包。

组件包引用

在其他项目工程下，执行$npm install --save mybutton在main.js文件引入Import Mybutton from mybutton，如果组件有样式文件，则需要再引入样式。

import mybutton/mybutton.css

Vue.use（mybutton）

接下来在vue页面中就可以直接使用了。

到此一个npm组件包就已经成功的从发布到引用了。

npm官网服务可以为个人提供开发的方便，同时还可以允许别人来下载使用你的组件，也正因为可能会有大量用户正在使用你的npm包，所以你若想在npm unpublish并不会那么容易。