vue组件篇---封装组件并发布到npm

Posted 2020-12-05 max-tlp

瞎说说

vue小白，要进行应用开发：你们都用什么UI框架，求指教，不想踩坑（想太多，不踩坑？？？不存在的！！！too young too simple～）

　　同学1：pc端我用element UI，感觉组件的API方法、属性比较完善...??

　　同学2：哈？我个人感觉他的样式有些生硬，不够炫酷美观??，用iView吧，组件丰富，动画效果cool~~~??

　　同学3：真的吗？阔是有人说，iView组件虽然完美的把其他UI组件有的缺点完美避过，但是某某组件不够人性化....??

　　同学4：用vue-beauty，够方便...

　　同学5：用N3 ，够人性化...

　　同学6：用Vue Antd，方法属性封装度够高...

　　同学7：用什么组件，我们自己写??，diy，随心配～所以，那我们...

　　　　　 ????

　　　　　 ????

　　　　　 ????　　

　　??????????????

　　　　????????

　　　　    ????

　　　　　  ??

　　还是需要用UI框架的哈??，但是必要的时候我们也需要自己diy一部分，毕竟，代码那么多，写不动了... 

　　废话也辣么多，就先扯到这里吧，我们回归正题【敲黑板】,重点来了～

进入正题　　

1. 项目初始化

　　首先，要创建项目，封装vue的插件，以前我们初始化vue工程都是用 webpack 的完整配置模板，也就是：

vue init webpack my-project

　　但是我们要写的是一个简单的vue组件，不需要依赖那么多而庞大的配置，所以，这里我们用简介版本的webapck配置模板：也就是

vue init webpack-simple my-project

　　同学你说什么？两者的差异？给个链接，自己去看哈～ https://segmentfault.com/a/1190000011402931

　　1.0. 开始之前，说下需求：传入两个数，进行求和输出。本次重点是讲一下整体流程，先拿一个简单的功能做个示范就好，毕竟觉我还想睡的??

　　1.1. 初始化完成后，我们来看下目录：

　　1.2. 既然是封装组件，那我们在src下面创建一个 myPlugin 文件夹规整一点吧，然后，我们在 myPlugin 下面放我们的插件，但是考虑到万一要写很多个的情况，这里我们就区分一下吧（如果个人习惯不想区分也行，只是方便管理），当前组件的相关文件我们给一个 sumFuntion 文件夹名字，下面创建 sum-function.vue 和 index.js 先，结构变成下面这样：

　　

　　1.3. 接下来，老规矩，打开终端，目录切换到当前开发目录（这里是tlp_plugin_sum），安装依赖，启动项目：

npm install
npm run dev

　　然后，我们来写 sum-function.vue ，自然是我们的组件代码：

<template>
  <div class="calculate">
    <p>{{a}}+{{b}}={{sum}}</p>
    <input type="text" v-model="a" style="width:30px;text-align:center" @blur="sumFunc"/>
    <span class="symbol">+</span>
    <input type="text" v-model="b" style="width:30px;text-align:center" @blur="sumFunc"/>
    <span class="symbol" @click="sumFunc"> = </span>
    <span class="item">{{sum}}</span>
  </div>
</template>
<script>
  export default({
    name:‘addFunc‘,
    props:[‘num1‘,‘num2‘],
    data() {
      return{
        a: this.num1 ? this.num1 : 0,
        b: this.num2 ? this.num2 : 0,
        sum: 0,
      }
    },
    mounted() {
      this.sumFunc();
    },
    methods:{
      sumFunc() {
        
        let a = Number(this.a);
        let b = Number(this.b);
        if(isNaN(a) || isNaN(b)) {
          
          return;
        }else{
          this.sum = a + b;
          this.$emit(‘getSumFromChild‘,this.sum);
        }
      }
    }
  })
</script>
<style>
.calculate{
  width: 100%;
  line-height: 26px;
  .item{
    
  }
  .symbol{
    
  }
}
  
</style>

　　1.4.写好了组件，我们本地看下效果先：

　　（1）打开 src/App.vue 文件，将下面代码复制，全部替换掉原来的代码：

<template>
  <div id="app">
    <h2>calculate</h2>
    <sum-function :num1="num1" :num2="num2" v-on:getSumFromChild="receiveChildSum"></sum-function>
    
    <p>从子组件获取到的值：{{sumFromChild}}</p>
  </div>
</template>

<script>
import sumFunction from ‘../src/myPlugin/sumFuntion/sum-function‘; // 引入
export default {
  name: ‘app‘,
  data () {
    return {
      num1: 4,
      num2: 5,
      sumFromChild:0,
    }
  },
  components:{ //注册插件
    sumFunction
  },
  methods:{
    receiveChildSum(sum){ //自定义事件，接收子组件的和
      this.sumFromChild = sum;
    }
  }
}
</script>

<style>
#app {
  font-family: ‘Avenir‘, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

　　（2）执行 npm run dev 后页面效果如下：

这样我们的组件就写好了，完美！接下来，要怎么把它处理好，让我们可以发布到npm上面去，可以向别人家的npm包一样，散布到世界的每一个应用中??

　　1.5. 继续我们sumFuntion／index.js 文件，目的：将该组件作为 Vue 插件

// sumFunction 插件对应组件的名字
import sumFunction from ‘./sum-function‘;

// Vue.js 的插件应当有一个公开方法 install 。第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象
// 参考：https://cn.vuejs.org/v2/guide/plugins.html#%E5%BC%80%E5%8F%91%E6%8F%92%E4%BB%B6
// 
sumFunction.install = Vue => Vue.component(sumFunction.name, sumFunction);//注册组件

/* 支持使用标签的方式引入 */
if (typeof window !== ‘undefined‘ && window.Vue) {
  install(window.Vue);
}


export default sumFunction;

2. 修改配置项：　

　　（1）修改 webpack.config.js ，修改完成后执行npm run build 看下是否生效

　　library：指定的就是你使用require时的模块名

　　libraryTarget：为了支持多种使用场景，我们需要选择合适的打包格式。常见的打包格式有 CMD、AMD、UMD，CMD只能在 Node 环境执行，AMD 只能在浏览器端执行，UMD 同时支持两种执行环境。显而易见，我们应该选择 UMD 格式。Webpack 中指定输出格式的设置项为 output.libraryTarget，其支持的格式有：

• “var” - 以一个变量形式输出： var Library = xxx (default)；
• “this” - 以 this 的一个属性输出： this[“Library”] = xxx；
• “commonjs” - 以 exports 的一个属性输出：exports[“Library”] = xxx；
• “commonjs2” - 以 module.exports 形式输出：module.exports = xxx；
• “amd” - 以 AMD 格式输出；
• “umd” - 同时以 AMD、CommonJS2 和全局属性形式输出

　　umdNamedDefine：会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define

　　

　　（2）修改package.json 文件：

　　

// 发布开源因此需要将这个字段改为 false
"private": false,

// 这个指 import tlp_plugin_sum 的时候它会去检索的路径
"main": "dist/sumFunction.js",

3. 提交发布：

　　（1）在npm官网注册账号，地址：https://www.npmjs.com/，注册好之后：

　　　　注意邮箱要验证，会发送验证链接到你的注册邮箱，没有验证的话是不能发布代码的

　　　　看一下package.json 中 author 尽量与 npm 账户一致

　　（2）切换到需要发包的项目根目录下，登录npm账号，输入用户名、密码、邮箱

npm login

　　（3）npm publish 执行发布：

npm publish

4. 下载安装，应用：

　　（1）确认是否发布成功：官网你的账号下面看一下有没有已经发布的插件，或者：

npm install tlp_plugin_sum --save

//main.js中引入
import myPlugin from ‘tlp_plugin_sum‘
Vue.use(myPlugin);

5. 最后说一下注意事项，以及一些常见的错误：　

　　（1）no_perms Private mode enable, only admin can publish this module
　　　　这是因为镜像设置成淘宝镜像了，设置回来即可

npm config set registry http://registry.npmjs.org　

　　（2）npm publish failed put 500 unexpected status code 401
　　　　一般是没有登录，重新登录一下 npm login 即可

　　（3）npm ERR! you do not have permission to publish “your module name”. Are you logged in as the correct user?
　　　　包名被占用，改个包名即可。最好在官网查一下是否有包名被占用，之后再重命名

　　（4）you must verify your email before publishing a new package
　　　　邮箱未验证，去官网验证一下邮箱

　　（5）查看npm是否安装成功：

npm who am i