开发vue组件首先要做的事就是先创建一个vue项目，通过vue-cli命令创建vue项目。
npm install -g @vue/cli vue create vm-mint-ui
新创建好的项目，目录如下：
下面我们修改一下配置文件，根据个人习惯修改。
package.json（初始配置）
package.json（现修改为）
将“private”:true修改为false，即由私有的改为公共的才能上传到npm上，否则的话会上传失败。
项目启动，在这里需运行npm run serve 来启动项目，一般情况下我们习惯运行npm run dev，所以这里我由serve改为dev，这样就可以使用npm run dev命令来使项目运行起来。
下面，我们来更改一下目录
我们可以把components目录当作我们要封装的组件目录，把views目录当作我们本地项目测试的目录。
在这里我们可以在components目录下创建几个我们想要封装的组件，这里我就以封装button按钮为例。
components/button/index.vue
<template> <button class="v-button" @click="clickFn"> <i class="iconfont icon-jiahao"></i> <span><slot></slot></span> </button> </template> <script> export default { name: 'vm-button', methods: { // 事件支持 clickFn() { this.$emit('click'); } } }; </script> <style scoped> .v-button { display: inline-block; line-height: 1; white-space: nowrap; cursor: pointer; background: #f5f6f8; border: 1px solid #dcdfe6; color: #333; -webkit-appearance: none; text-align: center; -webkit-box-sizing: border-box; box-sizing: border-box; outline: 0; margin: 0; -webkit-transition: 0.1s; transition: 0.1s; font-weight: 500; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; padding: 5px; font-size: 12px; border-radius: 4px; overflow: hidden; } .v-button { margin: 0 10px 10px 0; } .v-button i { display: inline-block; float: left; font-size: 14px; color: #3b43fe; } .v-button span { display: inline-block; float: right; margin-left: 2px; } .v-button::-moz-focus-inner { border: 0; } .v-button:focus, .v-button:hover, .v-button:active { color: #fff; border-color: #456af6; background-color: #456af6; } .v-button:focus i, .v-button:hover i, .v-button:active i { color: #fff; } </style>我们把想要封装的button按钮相关代码写完之后，下面我们就去注册我们的这个组件，我们在components目录下新建一个index.js文件来进行注册并暴露出方法。
components/index.js
import VmButton from './Button/index.vue'; import VmEditIcon from './EditIcon/index.vue'; import VmTree from './Tree/index.vue'; import '../assets/css/global.css'; import '../assets/iconfont/iconfont.css'; const components = [ VmButton, VmEditIcon, VmTree ] const install = function(Vue) { components.forEach(component => { Vue.component(component.name, component) }) if (typeof window !== 'undefined' && window.Vue) { install(window.Vue) } } export default install;这里我们只看button按钮，至于其他封装的组件像VmEditIcon、VmTree可以忽略，其实都一样，哪个都行，这里我只需简单介绍一个就行。
注册也注册好了，下面我们改怎么测试一下效果如何，具体怎么使用，这里我们需要在全局配置文件main.js文件中配置一下。
从这里我们可以看出，其实很简单，我这里是全局配置，局部配置也行，具体看个人习惯，其实跟其他组件库用法一样，下面我们测试一下效果吧。
views/packages/button.vue
<template> <div><vm-button>新增</vm-button></div> </template> <script></script> <style></style>
下面讲我们如何上传到npm上，然后像大家所熟知的element-ui一样在项目中使用。
想要当作一个npm包，然后上传到npm上，首先我们得有一个npm账号，才能搞定。
大家先去npm官网上去注册一个npm账号，然后绑定邮箱，下面我们会用到。
当我们有了npm账号，接下来改怎么做呢？下面我们继续往下讲。
下面我们还得需要修改一下package.json配置文件
package.json（修改为）
- --dest : 输出目录，默认 dist 。这里我们改成 lib 打包后的文件夹的名称
--target：lib关键字 指定打包的目录--name：打包后的文件名字
添加
.npmignore文件，设置忽略发布文件我们发布到 npm 中，只有编译后的 lib 目录、package.json、README.md才是需要被发布的。所以我们需要设置忽略目录和文件。
和.gitignore的语法一样，具体需要提交什么文件，看各自的实际情况。在这里我，没有创建
.npmignore文件来忽略所不需要的文件，我在package.json文件中设置了files也是一样的，配置files的意思就是表示要显示的文件，其他的文件就相当于忽略了，和创建.npmignore文件进行忽略，效果是一样的。
一切配置完毕，现在我们开始上传代码，我们利用编辑器或其他工具切换到该项目目录下，
下面我们查看一下镜像源是不是在npm镜像源下，查看命令如下：
npm config get registry
如果不是请输入下面命令进行切换到npm镜像源下：
npm config set registry https://registry.npmjs.org然后我们在该项目中添加npm账号：
命令：
npm addUser
这个过程中会让你输入账号、密码、邮箱以及发送该邮箱中的一次性动态密码，输完之后，然后回车。
接着执行命令登录npm账号：
npm login
同样输入账号、密码、邮箱以及发送该邮箱中的一次性动态密码，输完之后，然后回车。
下面，我们再继续执行命令进行打npm包：
打开我们的项目查看，我们就会发现会多出来一个lib文件夹，里面存放的是我们打包的文件
在这里我要重点讲一下几个点：
1.如果我们有额外的样式,如像css、scss、less等文件，一定要引入到之前我们注册组件配置的文件中，像我这里要引入到components/index.js文件中，
2.把相关的样式文件引入好之后，我们打包完之后，才会在lib文件夹中看到生成的css样式文件，这样我们就可以像element-ui一样单独引入样式，否则的话，我们在别的项目中使用时，你会发现我们引入的组件没有样式，非常的难看，很丑。
打包好之后，我们如何上传呢，下面我们继续执行命令：
npm publish
上传成功，到这里基本完事了，我们可以登录npm账号，去官网上查看一下，看看有没有我们上传的npm包。
上传成功，需要注意的是，每次上传都要修改版本号，与之前上传成功过的版本号不能重复，否则上传失败，最好以递增的方式修改版本号上传。
在别的项目中具体如何使用，我在这里就不过多介绍了，和其他的组件库，如element-ui、iview等用法一样。