今天实现了一下自定义Vue组件，并上传至npm仓库，现在简单记录一下流程

1 创建简单的Vue项目

使用

vue init webpack-simple test-publish3

这里的test-publish3是vue项目名称
创建项目完毕后 得到以下目录结构

初始化项目结构

2 开始准备上传前的代码

2.1 修改目录结构

• 将当前目录内的src修改为examples，用来等组件开发完毕本地测试使用
• 新建packages目录，用来编写组件的代码
  此时，即可得到以下目录
  新的目录结构

• 注意哦packages和examples不是必须这个名字的，这个名字主要是为了方便好记所以这样命名，这个路径会在webpack.config.js中指定路径的时候用到。

2.2 新建组件代码

在路径: /packages/components/下创建三个Vue页面，分别命名为Mt1.vue, Mt2.vue, Mt3.vue
如下图：

示例组件代码

2.3 新建自定义指令代码

在路径: /packages/directive/下面新建两个自定义指令，分别命名为Dire1.js, Dire2.js

自定义指令文件

2.4 新建统一导出文件

在路径/packages/下面新建index.js文件，如下图所示

项目结构图

• 内容如下

/**
 * 统一导出文件
 */
// 导入Vue组件
import Mt1 from './components/Mt1'
import Mt2 from './components/Mt1'
import Mt3 from './components/Mt1'

// 导入指令
import Dire1 from './directive/Dire1'
import Dire2 from './directive/Dire2'

// 存储组件列表
const components = [Mt1,Mt2,Mt3]
// 存储指令列表
const directives = {Dire1,Dire2}

// 定义install方法
const install = function (Vue) {
  // 遍历注册所有的组件
  components.map(com=>{
    Vue.component(com.name,com)
  })

  // 遍历所有的指令
  Object.keys(directives).map(key=>{
    Vue.directive(key,directives[key])
  })
}

// 引入
if(typeof window !== 'undefined' && window.Vue){
  install(window.Vue)
}

export default {
  install,
  // 组件列表
  ...components,
  // 指令列表
  ...directives
}

2.5 修改package.json文件

内容如下

{
  "name": "@yangxc/test-publish3", // 在接下来的流程会介绍  为什么填这个
  "description": "A Vue.js project",
  "version": "1.0.2",
  "author": "XXXXX",
  "license": "MIT",
  "private": false, // 需要将私有开放权限设置为false
  // 是一个字符串的数组。它可以帮助人们在使用npm search时找到这个包
  "keywords": [
    "test",
    "test-publish"
  ],
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --env --open --hot",
    "build": "cross-env NODE_ENV=production webpack --env --progress --hide-modules",
    // 加上这个npm run lib
    "lib": "cross-env NODE_ENV=production webpack --env.lib --progress --hide-modules"
  },
  "files": [
    // files字段是一个被项目包含的文件名数组
    "lib/test-publish3.js",
    "package.json",
    "README.md"
  ],
  // main字段用来指定入口文件
  "main": "lib/test-publish3.js",
  "dependencies": {
    "generator-standard-readme": "^1.0.6",
    "global": "^4.4.0",
    "vue": "^2.5.11",
    "yo": "^3.1.1"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ],
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.0",
    "babel-preset-stage-3": "^6.24.1",
    "cross-env": "^5.0.5",
    "css-loader": "^0.28.7",
    "file-loader": "^1.1.4",
    "vue-loader": "^13.0.5",
    "vue-template-compiler": "^2.4.4",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.1"
  }
}

2.6 修改 webpack.config.js

• 主要将原来的导出的对象修改为导出为函数，入参为env，为了方便本地使用npm run dev和npm run lib均可以使用，互不影响。

var path = require('path')
var webpack = require('webpack')

module.exports = env =>{
  let lib = env.lib
  return {
    // 入口文件
    entry: lib? './packages/index.js':'./examples/main.js',
    // 出口文件
    output: {
      // 打包文件生成的路径
      path: path.resolve(__dirname, lib?'./lib':'./dist'),
      publicPath: lib?'/lib/':'/dist/',
      // 打包后的文件名
      filename: lib?'test-publish3.js':'build.js',
      /**
       * library 指的是用户使用时的require的模块名
       * 这里既是require('test-publish3')
       */
      library: lib?'test-publish3':'',
      libraryTarget: lib?'umd':'var',
      umdNamedDefine: !!lib
    },
    module: {
      rules: [
        {
          test: /\.css$/,
          use: [
            'vue-style-loader',
            'css-loader'
          ],
        },      {
          test: /\.vue$/,
          loader: 'vue-loader',
          options: {
            loaders: {
            }
            // other vue-loader options go here
          }
        },
        {
          test: /\.js$/,
          loader: 'babel-loader',
          exclude: /node_modules/
        },
        {
          test: /\.(png|jpg|gif|svg)$/,
          loader: 'file-loader',
          options: {
            name: '[name].[ext]?[hash]'
          }
        }
      ]
    },
    resolve: {
      alias: {
        'vue$': 'vue/dist/vue.esm.js'
      },
      extensions: ['*', '.js', '.vue', '.json']
    },
    devServer: {
      historyApiFallback: true,
      noInfo: true,
      overlay: true
    },
    performance: {
      hints: false
    },
    devtool: '#eval-source-map'
  }

  if (process.env.NODE_ENV === 'production') {
    module.exports.devtool = '#source-map'
    // http://vue-loader.vuejs.org/en/workflow/production.html
    module.exports.plugins = (module.exports.plugins || []).concat([
      new webpack.DefinePlugin({
        'process.env': {
          NODE_ENV: '"production"'
        }
      }),
      new webpack.optimize.UglifyJsPlugin({
        sourceMap: true,
        compress: {
          warnings: false
        }
      }),
      new webpack.LoaderOptionsPlugin({
        minimize: true
      })
    ])
  }
}

2.6 代码编写完毕，本地测试一下

2.6.1 组件测试

• 在目录: /examples/main.js中添加以下代码
  main.js

• 作用: 模仿用户导入我们的组件

  
  使用组件
  效果图

2.6.2 指令测试

指令代码
效果图

OK 本地测试成功 开始发布到npm上

发布至npm

1.登录npm官网https://www.npmjs.com/

注册用户 并且创建一下组织，我建立的组织是yangxc，所以，package.json中的name上就是@yangxc/XXX

新建组织

2. 本地登录

• 新建完毕后，就可以在本地登录了，操作如下：
• 1. 设置npm代理环境，应该使用官方镜像，不能使用淘宝镜像 npm config set registry http://registry.npmjs.org
• 2. 登录：npm login 随后输入必要的信息
• 3. lib打包工程 ： npm run lib 打包完毕
• 4. 发布npm包： npm publish --access public
• 5. 发布成功会返回：@yangxc/test-publish3@1.0.0
     发布成功

至此，npm已经将该包发布成功！

测试远程包是否可用

1. 打开npm 搜索名称 打开详情

npm包详情

2.新建test vue工程，添加该依赖npm i @yangxc/test-publish3,也可以使用yarn：yarn add @yangxc/test-publish3进行添加

测试工程
image.png

效果图如下

image.png

证明发布的组件是可用的！！

至此，从无到有的npm发布vue组件到npm仓库的简单记录就结束了，这只是初次接触npm发布的第一步，相信以后会更加熟练。

本文参考自: https://www.jianshu.com/p/a088d544ee28
多谢这位大佬，点赞！