今天實現(xiàn)了一下自定義Vue組件，并上傳至npm倉庫，現(xiàn)在簡單記錄一下流程

1 創(chuàng)建簡單的Vue項目

使用

vue init webpack-simple test-publish3

這里的test-publish3是vue項目名稱
創(chuàng)建項目完畢后得到以下目錄結(jié)構(gòu)

初始化項目結(jié)構(gòu)

2 開始準(zhǔn)備上傳前的代碼

2.1 修改目錄結(jié)構(gòu)

將當(dāng)前目錄內(nèi)的src修改為examples，用來等組件開發(fā)完畢本地測試使用
新建packages目錄，用來編寫組件的代碼
此時，即可得到以下目錄

新的目錄結(jié)構(gòu)

注意哦packages和examples不是必須這個名字的，這個名字主要是為了方便好記所以這樣命名，這個路徑會在webpack.config.js中指定路徑的時候用到。

2.2 新建組件代碼

在路徑: /packages/components/下創(chuàng)建三個Vue頁面，分別命名為Mt1.vue, Mt2.vue, Mt3.vue
如下圖：

示例組件代碼

2.3 新建自定義指令代碼

在路徑: /packages/directive/下面新建兩個自定義指令，分別命名為Dire1.js, Dire2.js

自定義指令文件

2.4 新建統(tǒng)一導(dǎo)出文件

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

項目結(jié)構(gòu)圖

內(nèi)容如下

/**
 * 統(tǒng)一導(dǎo)出文件
 */
// 導(dǎo)入Vue組件
import Mt1 from './components/Mt1'
import Mt2 from './components/Mt1'
import Mt3 from './components/Mt1'

// 導(dǎo)入指令
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文件

內(nèi)容如下

{
  "name": "@yangxc/test-publish3", // 在接下來的流程會介紹  為什么填這個
  "description": "A Vue.js project",
  "version": "1.0.2",
  "author": "XXXXX",
  "license": "MIT",
  "private": false, // 需要將私有開放權(quán)限設(shè)置為false
  // 是一個字符串的數(shù)組。它可以幫助人們在使用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字段是一個被項目包含的文件名數(shù)組
    "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

主要將原來的導(dǎo)出的對象修改為導(dǎo)出為函數(shù)，入?yún)?code>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
作用: 模仿用戶導(dǎo)入我們的組件

使用組件

效果圖

2.6.2 指令測試

指令代碼

效果圖

OK 本地測試成功開始發(fā)布到npm上

發(fā)布至npm

1.登錄npm官網(wǎng)https://www.npmjs.com/

注冊用戶并且創(chuàng)建一下組織，我建立的組織是yangxc，所以，package.json中的name上就是@yangxc/XXX

新建組織

2. 本地登錄

新建完畢后，就可以在本地登錄了，操作如下：
1. 設(shè)置npm代理環(huán)境，應(yīng)該使用官方鏡像，不能使用淘寶鏡像 npm config set registry http://registry.npmjs.org
1. 登錄：npm login 隨后輸入必要的信息
1. lib打包工程： npm run lib 打包完畢
1. 發(fā)布npm包： npm publish --access public
1. 發(fā)布成功會返回：@yangxc/test-publish3@1.0.0
  
  發(fā)布成功

至此，npm已經(jīng)將該包發(fā)布成功！

測試遠(yuǎn)程包是否可用

1. 打開npm 搜索名稱打開詳情

npm包詳情

2.新建test vue工程，添加該依賴`npm i @yangxc/test-publish3`,也可以使用yarn：`yarn add @yangxc/test-publish3`進(jìn)行添加

測試工程

image.png

效果圖如下

image.png

證明發(fā)布的組件是可用的?。?/h1>

至此，從無到有的npm發(fā)布vue組件到npm倉庫的簡單記錄就結(jié)束了，這只是初次接觸npm發(fā)布的第一步，相信以后會更加熟練。

本文參考自: http://www.itdecent.cn/p/a088d544ee28
多謝這位大佬，點贊！

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

Vue 自定義組件上傳至npm倉庫

Vue 自定義組件上傳至npm倉庫

1 創(chuàng)建簡單的Vue項目

2 開始準(zhǔn)備上傳前的代碼

2.1 修改目錄結(jié)構(gòu)

2.2 新建組件代碼

2.3 新建自定義指令代碼

2.4 新建統(tǒng)一導(dǎo)出文件

2.5 修改package.json文件

2.6 修改 webpack.config.js

2.6 代碼編寫完畢，本地測試一下

2.6.1 組件測試

2.6.2 指令測試

OK 本地測試成功開始發(fā)布到npm上

發(fā)布至npm

1.登錄npm官網(wǎng)https://www.npmjs.com/

2. 本地登錄

至此，npm已經(jīng)將該包發(fā)布成功！

測試遠(yuǎn)程包是否可用

1. 打開npm 搜索名稱打開詳情

2.新建test vue工程，添加該依賴`npm i @yangxc/test-publish3`,也可以使用yarn：`yarn add @yangxc/test-publish3`進(jìn)行添加

效果圖如下

證明發(fā)布的組件是可用的?。?/h1>

至此，從無到有的npm發(fā)布vue組件到npm倉庫的簡單記錄就結(jié)束了，這只是初次接觸npm發(fā)布的第一步，相信以后會更加熟練。

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

Vue 自定義組件 上傳至npm倉庫

1 創(chuàng)建簡單的Vue項目

2 開始準(zhǔn)備上傳前的代碼

2.1 修改目錄結(jié)構(gòu)

2.2 新建組件代碼

2.3 新建自定義指令代碼

2.4 新建統(tǒng)一導(dǎo)出文件

2.5 修改package.json文件

2.6 修改 webpack.config.js

2.6 代碼編寫完畢，本地測試一下

2.6.1 組件測試

2.6.2 指令測試

OK 本地測試成功 開始發(fā)布到npm上

發(fā)布至npm

1.登錄npm官網(wǎng)https://www.npmjs.com/

2. 本地登錄

至此，npm已經(jīng)將該包發(fā)布成功！

測試遠(yuǎn)程包是否可用

1. 打開npm 搜索名稱 打開詳情

2.新建test vue工程，添加該依賴npm i @yangxc/test-publish3,也可以使用yarn：yarn add @yangxc/test-publish3進(jìn)行添加

效果圖如下

證明發(fā)布的組件是可用的?。?/h1>

至此，從無到有的npm發(fā)布vue組件到npm倉庫的簡單記錄就結(jié)束了，這只是初次接觸npm發(fā)布的第一步，相信以后會更加熟練。

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

Vue 自定義組件上傳至npm倉庫

OK 本地測試成功開始發(fā)布到npm上

至此，npm已經(jīng)將該包發(fā)布成功！

1. 打開npm 搜索名稱打開詳情

2.新建test vue工程，添加該依賴`npm i @yangxc/test-publish3`,也可以使用yarn：`yarn add @yangxc/test-publish3`進(jìn)行添加

至此，從無到有的npm發(fā)布vue組件到npm倉庫的簡單記錄就結(jié)束了，這只是初次接觸npm發(fā)布的第一步，相信以后會更加熟練。