vue组件上传到npm
vue新建组件并且上传到npmjs并且安装测试全过程
网上搜索到很多都是新建一个简单得vue项目（vue init webpack-simple rlcode）然后修改webpack.config.js但是我项目是通过create创建得没有webpack.config.js文件，咋修改？所以记录一下，毕竟网上这样的例子比较少。
第一步：新建项目：vue create rlcode
这样创建的项目没有那么多的配置文件，主要就一个package.json
第二部：新建组件：RlCanvasCode/ RlCanvasCode.vue+index.js
在src/components下新建一个文件夹RlCanvasCode，在这个文件夹下新建一个组件和js文件
//index.js import RlCanvasCode from "./RlCanvasCode.vue"; // 为组件提供 install 安装方法，供按需引入 RlCanvasCode.install = function(Vue) { Vue.component(RlCanvasCode.name, RlCanvasCode); }; export default RlCanvasCode;
组件代码看链接：https://www.cnblogs.com/rainbowLover/p/13139452.html
第三步：在App.vue同级目录下新建index.js
提供安装方法
import RlCanvasCode from "./components/RlCanvasCode"; const components = { RlCanvasCode }; const install = function(Vue, opts = {}) { // 判断是否安装 if (install.installed) return; install.installed = true; // 遍历注册全局组件 Object.keys(components).forEach(key => { Vue.component(components[key].name, components[key]); }); }; // 判断是否是直接引入文件 if (typeof window !== "undefined" && window.Vue) { install(window.Vue); } export default { // 导出的对象必须具有 install，才能被 Vue.use() 方法安装 install }; export { RlCanvasCode };
第四步：修改package.json文件
和你的文件可能也就三个地方不一样：private设成false；配置build:lib入口;mian配置
"name": "rlcode", "version": "0.1.6", "private": false,//1 "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "build:lib": "vue-cli-service build --dest dist --target lib ./src/index.js",//2 "lint": "vue-cli-service lint" }, "main": "dist/rlcode.umd.min.js",//3
第五步：打包测试
现在你就可以打包测试了
终端运行：npm run build:lib 会在你dis目录下生成一些文件，
打开demo.html修改配置：看看能不能实现你想要的效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./rlcode.css" />
<style>
.canvas {
height: 50px;
width: 120px;
border: 1px solid red;
line-height: 50px;
background-color: #eeeeee;
}
</style>
</head>
<body>
<div id="app">
<rl-canvas-code class="canvas"></rl-canvas-code>
</div>
<script src="./vue.js"></script>
<script src="./rlcode.umd.js"></script>
<script>
new Vue({
el: "#app",
data: function () {
return { visible: false };
},
});
</script>
</body>
</html>
# 注意引入vue.js
如果验证码出现了 就说明八九不离十了，接下来就可以上传了，上传之前得去申请npmjs.com账号
第六步：到npmjs.com注册账号
打开npmjs.com申请账号，拿个小笔头记住自己得用户名和密码，注册成功去所填得邮箱里激活。
第七步：在终端登录
在终端输入npm login 回车，他会提示你输入用户名，点回车，输入密码，你输入密码终端里边是不会动的，密码隐藏了所以你输入的时候没有光标变化，输入完密码回车输入邮箱，不报错的化你就登录成功了。
# 这块注意一个小坑：你如果用的是淘宝镜像，你是登录不上去的，解决办法：https://www.cnblogs.com/rainbowLover/p/13132486.html
第八步：上传到npmjs
上传到npm只需要上传打包后生成的库文件和readme文件和package.json文件就行了，没必要把你整个项目文件都上传上去，也没啥用，所以先建一个类似gitignore的.npmignore在里边标记跳过的文件：
.* *.md node_modules/ public/ src/
然后终端输入：npm publish 不出意外的化就能在npm上搜索到你的包了
第九步：安装测试
在npm上搜索到你的包之后就可以通过安装使用了，这个就和一般的引用是一样的了，先安装，然后引入或者是按需引入
//终端 $ npm i --save rlcode // main.js import RlCode from "rlcode"; import "rlcode/dist/rlcode.css"; Vue.use(RlCode); //test.vue <rl-canvas-code class="canvas"></rl-canvas-code>
按需引入使用：
//终端 $ npm i --save rlcode //test.vue <template> <div class="box"> <input type="text" v-model="myCode" /> <rl-canvas-code class="canvas" :codeLength="codeLength" :fontStyle="fontStyle" :fontX="fontX" :fontY="fontY" :ingoreCase="ingoreCase" @codeChange="codeChange" ></rl-canvas-code> <br /> <button @click="submitData">提交</button> </div> </template> <script> import Vue from "vue"; import RlCanvasCode from "rlcode"; Vue.use(RlCanvasCode); export default { data() { //这里存放数据 return { fontStyle: "bold 20px 微软雅黑", // 字体样式 默认"bold 20px 微软雅黑" codeLength: 4, // 验证码几位 默认4 fontX: 10, // 字间距 默认10 fontY: 20, // 字上边距 默认 20 ingoreCase: true, // 是否忽略大小写 默认 true code: "", myCode: "" }; }, //方法集合 methods: { submitData() { console.log("this.myCode :>> ", this.myCode); console.log("this.code :>> ", this.code); }, codeChange(code) { console.log("code :>> ", code); this.code = code; } } }; </script> <style lang="less" scoped> .box { width: 300px; height: 600px; background-color: #aabbcc; margin: 0 auto; padding: 30px 0; input { height: 50px; line-height: 50px; outline: none; border: none; } .canvas { height: 50px; width: 120px; border: 1px solid red; line-height: 50px; background-color: #eeeeee; } } </style>
第十步：更新优化
---
完整源码地址：https://gitee.com/haipengguo/rlcode and https://github.com/happengguo/rlcode
有用的话记得star一下
over
