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

瞎说说

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

　　同窗你说什么？二者的差别？给个连接，本身去看哈～ http://www.javashuo.com/article/p-xmstxjpd-kg.html

　　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
// 此处注意，组件须要添加name属性，表明注册的组件名称，也能够修改为其余的
 
　sumFunction.install = Vue => Vue.component(sumFunction.name, sumFunction);//注册组件

　// 标签的方式引入，留到后面再另开新篇讨论

  //const install = function(Vue, opts = {}) {

　//　　Vue.component(sumFunction.name, sumFunction);

　//}

/* 支持使用标签的方式引入 Vue是全局变量时，自动install */
//if (typeof window !== 'undefined' && window.Vue) {
//  install(window.Vue);
//}

export default sumFunction;

　　此处须要注意的是 install。 Vue的插件必须提供一个公开方法 install，该方法会在你使用该插件，也就是 Vue.use(yourPlugin)时被调用。这样也就给 Vue全局注入了你的全部的组件。

2. 修改配置项：　

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

// 执行环境
const NODE_ENV = process.env.NODE_ENV;
console.log("-----NODE_ENV===",NODE_ENV);

module.exports = {
  // 根据不一样的执行环境配置不一样的入口
  entry: NODE_ENV == 'development' ? './src/main.js' : './src/myPlugin/sumFunction/index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'sumFunction.js',
    library: 'sumFunction', // 指定的就是你使用require时的模块名
    libraryTarget: 'umd', // 指定输出格式
    umdNamedDefine: true // 会对 UMD 的构建过程当中的 AMD 模块进行命名。不然就使用匿名的 define
  },

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

　　libraryTarget：为了支持多种使用场景，咱们须要选择合适的打包格式。常见的打包格式有 CMD、AMD、UMD，CMD只能在 Node 环境执行，AMD 只能在浏览器端执行，UMD 同时支持两种执行环境。显而易见，咱们应该选择 UMD 格式。

　　有时咱们想开发一个库，如lodash，underscore这些工具库，这些库既能够用commonjs和amd方式使用也能够用script方式引入。

　　这时候咱们须要借助library和libraryTarget，咱们只须要用ES6来编写代码，编译成通用的UMD就交给webpack了

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

　　

　　（2）修改package.json 文件：

　　

// 发布开源所以须要将这个字段改成 false
"private": false,

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

　　（3）修改git上传代码，能够将.gitignore 去掉忽略dist, 把打包的文件也提交上去；

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

　　（6）每次上到npm上须要更改版本号，package.json 里的 version 字段