标签：npm 文件 vue button Element components 我们
开发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等用法一样。
标签：npm,文件,vue,button,Element,components,我们 来源： https://blog.csdn.net/qq_36995521/article/details/122739411
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。