前提：1.會vue基礎，以及vue的組件(官網：

比如，我的預期目標是其他vue項目中，npm install本組件后，可以如此使用該組件：

<template> <div class="index">   <div class="demo1">   <Msg :data="myData"></Msg>  </div>  </div></template><script> import Msg from 'npm-study-hamupp'; export default {  components: {   Msg  },  data(){   return {    myData: {     name: '天天',     country: 'china'    }   }  } }</script>

然后網頁上會顯示：

OJBK，現在開搞：

1.新建一個空文件夾,進入到根目錄下。執行

npm init

初始化項目。然后會讓你填一些項目相關的信息，跟著提示填就是了。沒啥說的。注意name不要和現有的其他npm包重名了，不然一會兒發Npm包的時候會失敗，可以先去npmjs.com搜一下有沒有重名的。

這一步完成后，會生成package.json文件。

2.由于本例是一個vue的組件包，而且使用了es6和webpack，所以在devDependencies字段中，應該至少加入以下依賴：

package.json

{	"name": "npm-study-hamupp",	"version": "1.0.3",	"description": "",	"main": "dist/helloMsg.min.js",	"scripts": {		"test": "echo /"Error: no test specified/" && exit 1",		"start": "webpack-dev-server --hot --inline",		"build": "webpack --display-error-details --config webpack.config.js"	},	"repository": {		"type": "git",		"url": "git+https://github.com/hamuPP/npmStudy.git"	},	"author": "",	"license": "ISC",	"bugs": {		"url": "https://github.com/hamuPP/npmStudy/issues"	},	"homepage": "https://github.com/hamuPP/npmStudy#readme",	"devDependencies": {		"babel-core": "^6.26.0",		"babel-loader": "^7.1.2",		"babel-plugin-transform-object-rest-spread": "^6.26.0",		"babel-plugin-transform-runtime": "^6.23.0",		"babel-polyfill": "^6.26.0",		"babel-preset-es2015": "^6.24.1",		"css-loader": "^0.28.7",		"es6-promise": "^4.1.1",		"less": "^2.7.3",		"less-loader": "^4.0.5",		"style-loader": "^0.19.0",		"url-loader": "^0.6.2",		"vue": "^2.5.9",		"vue-hot-reload-api": "^2.2.4",		"vue-html-loader": "^1.2.4",		"vue-loader": "^13.5.0",		"vue-router": "^3.0.1",		"vue-style-loader": "^3.0.3",		"vue-template-compiler": "^2.5.9",		"vuex": "^3.0.1",		"webpack": "^3.9.1",		"webpack-dev-server": "^2.9.5"	}}

這些依賴的用處分別都是啥，自己查。

3.執行npm install，下載這些依賴包。

4.新建2個文件夾：dist和src，名字按照個人習慣吧。我習慣dist代表發布時的目錄，src是開發目錄。dist里面的js是到時候通過webpack打包后的文件。待會只會提交dist目錄到npm官網上，src不提交。

src里：我們比較常規的寫一個vue組件

樣式就不說了，照常寫。

app.vue(寫法上也很常規):

<style scoped lang="less"> @import 'styles/common.less';</style><template> <div class="msg-wrapper">  <span>hello!</span>  <span class="account">{{data.name}}</span> </div></template><script> export default {  name:'Msg',  data () {   return {}  },  props:{   data:{    type:Object   }  },  methods: {   },  created(){   let that = this;  } }</script>

index.js(這里的寫法就與普通vue項目有所不同了，主要要把它export出去)：

import Msg from './app.vue'export default Msg;

5.加入webpack打包配置，并把src中的內容打包進dist目錄內：

根目錄下新增weppack.config.js文件

const path = require("path");const webpack = require("webpack");const uglify = require("uglifyjs-webpack-plugin"); module.exports = { devtool: 'source-map', entry: "./src/index.js",//入口文件，就是上步驟的src目錄下的index.js文件， output: {  path: path.resolve(__dirname, './dist'),//輸出路徑，就是上步驟中新建的dist目錄，  publicPath: '/dist/',  filename: 'helloMsg.min.js',  libraryTarget: 'umd',  umdNamedDefine: true }, module: {  rules: [{    test: //.vue$/,    loader: 'vue-loader'   },   {    test: //.less$/,    use: [     { loader: "style-loader" },     { loader: "css-loader" },     { loader: "less-loader" }    ]   },   {    test: //.js$/,    exclude: /node_modules|vue//dist|vue-router//|vue-loader//|vue-hot-reload-api///,    loader: 'babel-loader'   },   {    test: //.(png|jpg|gif|ttf|svg|woff|eot)$/,    loader: 'url-loader',    query: {     limit: 30000,     name: '[name].[ext]?[hash]'    }   }  ] }, plugins: [  new webpack.DefinePlugin({   "process.env": {    NODE_ENV: JSON.stringify("production")   }  }) ]};

然后執行npm run build，就會在dist目錄下生成helloMsg.min.js。這即是我們這個npm包的主文件。

6.修改package.json中的main字段中指向的主文件信息

package.json

{	...	"main": "dist/helloMsg.min.js",

7.新建一個文件，名為.npmignore，是不需要發布到npm的文件和文件夾，規則和.gitignore一樣。如果你的項目底下有.gitignore但是沒有.npmignore，那么會使用.gitignore里面的配置。

例如我的:

.npmignore

.**.md*.ymlbuild/node_modules/src/test/gulpfile.js

至此，一個npm組件包就做完了，剩下的，只是提交到npm官網去。

(如果要嚴謹點，當然還需要加入單元測試通過后再發包。。。但是。。。)

二、發布到npm上的流程

1.前提，得有個npm賬號，沒有就新注冊一個賬號，

https://www.npmjs.com/signup?utm_source=house&utm_medium=package%20page&utm_campaign=free%20orgs&utm_term=Sign%20up%20for%20npm

2.進入到項目的根目錄下，運行 npm login

它會讓你輸入你的用戶名，密碼和郵箱，若登錄成功，會顯示：

Logged in as 你的名字 on https://registry.npmjs.org/.

3.然后執行npm publish，即可將這個npm包發布到npm官網上拉。

4.更新、發新包。

需要發新包時，需要自己手動修改package.json中的version版本號，慣例是+1啦，比如1.0.0-->1.0.1。然后npm login,npm publish。即可。

三、結語：

1.發包時的常見錯誤：

name名重名、name名還有大寫字母。。。

2.本項目的git地址：

https://github.com/hamuPP/npmStudy，如果你對本文說的不太明白，可以下載這個項目，自己隨便改一下app.vue里面的東西，然后修改package.json中的name和version(一定要改哦)，提交到npm上試試

3.我還按照該項目結構，做了一個基于vue 的同步樹的npm組件包。

https://github.com/hamuPP/t-vue-tree

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。