npm上传自定义vue组件入门

Posted 2020-10-28 笑笑~上善若水

webpack版本是1.13.1

自己写的VUE组件，上传到npm，然后通过npm install xxx -S 安装到

package.json里面的 “dependencies”位置

然后在main.js引用，就可以直接使用我们的自定义组件了。

import lccomponents from \'lc-components\'
Vue.use(lccomponents)

首先：先用vue-cli脚手架搭建一个项目（这样的好处可以本地调试组件）
vue init webpack lc-components

如下图：红色框是组件源代码，绿色框是脚手架自动生成的。

在components里面(也就是红色框)，命令行执行npm init，创建package.json，
自定义webpack.config.js来最终把组件打包成JS。

如下图：是package.json设置

为了节省空间，webpack.config.js就到github上找，最后上传地址

自定义组件，写好的组件全部到放到Index.js上面
下图的.babelrc里面的配置，是ES6转换ES5，不然会报错

本地调试没问题，就直接npm run build打包（因为我们引用的是打包后的代码），webpack.config.js已经配置好了（目前的配置是CSS,JS没有分开）
打包到dist文件夹。

上传到npm
先注册https://www.npmjs.com
在components文件夹（红色框的package.json目录下），打开命令行，
执行：
1、npm adduser
2、然后要求输入用户名、密码、注册时填的邮箱。
3、然后输入npm publish即可（发布成功有邮件通知，每次更改package.json的version版本号）

最后引用我们的组件了
1、npm install lc-components -S 
（lc-components 这个名字，是来自package.json里面的“name”值）

2、在main.js里面引入
import lccomponents from \'lc-components\'
Vue.use(lccomponents)

3、在要使用的地方，直接使用组件

<lc-round :bgColor="bgColor" :top="topDistance"></lc-round>

传送门：看不懂的有以下链接参考

https://www.uis.cc/2017/10/13/How-to-publish-your-Vue-component-on-NPM/
https://blog.csdn.net/u012857153/article/details/73649022


https://github.com/Summer-Lin/vue-components（本人的组件模板，模板改进的地方很多，比如JS和CSS分离，我里面用的是LESS）

偷懒的话，可以把代码下载下来，然后在components里面写上自己的组件，最后引入到index.js就好
别忘记npm run build 打包了再上传。