vue组件的开发与发布至npm平台

monkey , 刚刚开始写文章，有不足之处，还大家随意指出，进行交流与学习~~~~

源码示例地址：所有仓库的源码地址：可见github地址： https://github.com/monkey01127/sunmonkey-ui/tree/develop

第一步：初始化vue的基础项目

vue init webpack projectname

例如：我的命令如下：

vue init webpack SunMonkey-ui

按照命令进行初始化项目的一些配置，主要是设置一些包的标题， 描述等等。

命令执行完毕的项目目录图如下

启动项目 - 为了说明这个模块可以使用哈

项目启动后好像就是那个vue的欢迎页就不做介绍了

npm install 
npm run dev

第二步：新增组件目录、导出文件

从此处开始，可以整体参考element-ui的源码, 说难听点，有点抄袭的意思，在里面哈，
地址如：https://gitee.com/mirrors/element-ui

① 新增组件的存放目录packages

核心就是每个组件对应这个install的方法，没有install，将会无法安装与使用包，这条十分重要

import CitySelect from './src/main.vue'

CitySelect.install = Vue => {
  Vue.component(CitySelect.name, CitySelect)
}

export default CitySelect

② 导出组件的文件index.js, 这个文件地址后面会在webpack 打包的时候用到

③ 新增webapck的配置文档

此处的index.js就是第二步的index的文件，核心关注的属性如上图中的红色框。

至此执行webapck webpack.config.js ,就能够打包出build.js 用于后面的使用了。，这个是2个组件的js打包成1个build.js的文件了

修改package.json

• package.json需要修改private字段(private是true的时候不能发布到npm,需设置成false)；
• 并增加main字段， main字段是require方法可以通过这个配置找到入口文件
• 目录加载规则说明：
  我们会把相关的文件放在一个目录里面便于组织，最好为该目录设置一个入口文件，让require方法可以通过这个入口文件，加载整个目录。
  在目录中的package.json文件中，写入main字段，如下：

{
 "name": "sunmonkey-ui",
 "main": './dist/build.js'
}

核心点，很关键。

require 发现参数字符串指向一个目录以后，会自动查看该目录的package.json文件，然后加载main字段指定的入口文件。
如果package.json文件中没有main字段，或者根本没有package.json文件，则会加载改目录下的index.js 文件和index.node文件。

简要说明一下包发布的几条

• 在npm上注册自己的账号，邮箱很重要必须填，因为组件发布成功等信息都会向这个邮箱发送。
• 后面的发包都是通过这个邮箱验证权限的（也包括修改秘密啥的）

更新版本

npm采用语义化版本，共三位，以’.’隔开，从左至右依次代表：主版本（major）、次要版本（minor）、补丁版本（patch）。

例如：
1.0.0
major.minor.patch

变更版本号的命令：npm version <major | minor | patch>

# 假如我们本次是次要发布，我们执行命令：
npm version minor
# package.json中的version也已变为1.1.0

发布与查看

# 发布
npm publish
# 查看版本
npm view sunmonkey-ui versions

如果报错如下图：

上传npm报错 “is not in the npm registrYou should bug the author to publish it (or use the name yourself”

执行：npm adduser (需要有npm的账号)

至此，名为==sunmonkey-ui 的可以【全局引入】==的包已经可以通过npm来安装了哈。

按需引入

在index.js目录的位置新增 导出的配置如下：

export {
  citySelect,
  datePicker
}

新增打包多文件的配置，新增组件配置文件components.json

{
  "citySelect": "./packages/citySelect/index.js",
  "datePicker": "./packages/datePicker/index.js"
}

在build目录下新增webpack.components.js， 用来打包js进行分模块打包， 配置如下（关注一下entry、output2个属性即可，是在不行复制过去也行啊，哈哈哈！！）：

var path = require('path');
var webpack = require('webpack');
const Components = require('../components.json');

module.exports = {
  // entry: './src/index.js',
  entry: Components,
  output: {
    path: path.resolve(__dirname, '../dist'),
    publicPath: '/dist/',
    filename: '[name].js',
    chunkFilename: '[id].js',
    libraryTarget: 'umd',
    umdNamedDefine: true,
    libraryTarget: 'commonjs2'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {}
          // other vue-loader options go here
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.sass$/,
        use: [{
          loader: "style-loader"
        }, {
          loader: "css-loader"
        }, {
          loader: "sass-loader", options: {
            paths: [
              path.resolve(__dirname, "node_modules")
            ]
          }
        }]
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue'
    }
  }
};

执行打包命令（具体打包内容查看build内面的配置）

webpack --config build/webpack.prod.conf.js && webpack --config build/webpack.components.js

编译后，你会发现dist文件下多了很多内容，其中有build.js，citySelect.js, dataPicker.js这些用于模块化引入的js

== 再次执行一次发版操作，2条命令如下==

npm version patch
npm publish

我的组件发布完了的示例：https://www.npmjs.com/package/sunmonkey-ui

查看包

如何引用

# 同大部分包一样
npm install sunmonkey-ui --save

// 全局使用方式
import monkeyUI from 'sunmonkey-ui'
Vue.use(monkeyUI)

// 按需使用方式
import {
  citySelect,
  datePicker
} from 'sunmonkey-ui'
Vue.use(citySelect);
Vue.use(datePicker);

预览图：

持续更新哦~~~