自己寫的組件 有的也挺好的，為了方便以后用自己再用或者給別人用，把組件打包發布到npm是最好不過了，本次打包支持 支持正常的組件調用方式，也支持Vue.use, 也可以直接引用打包好的js文件， 配合vue.js 就不需要webpakc這種構建工具了，可以直接在頁面內使用，下面以 ‘yyl-npm-practice’ 這個包為例
第一步：使用 vue init webpack-simple yyl-npm-practice 初始化項目
提示: 不要用 vue init webpack npm-practice 初始化項目，因為我們就開發個組件，不需要那么多配置，配置多了修改起來也麻煩，webpack-simple足夠了。
初始完項目，按照提示輸入項目信息即可，然后 npm install , npm run dev 讓項目跑起來，如下圖：
第二步：修改文件目錄
1.在src目錄下新建components文件夾，然后在此文件夾下建立Main.vue文件
Main.vue 名字也可以是其他，我們寫的這個組件就是放在該文件里面，之前的App.vue是用於本地開發，測試用的入口文件，也就是用於 npm run dev 的入口文件。
2.在webpack.config.js同級目錄（也是該組件的根目錄）下新建 index.js文件， index.js是把Main.vue文件暴露出去的出口。
修改完之后的文件目錄如下，標紅的就是新增的內容：
第三步：修改文件內容，配置
1.Main.vue內容如下（注意name）：
<template> <div class="container"> <div>{{msg}}</div> <div>{{propData}}</div> </div> </template> <script> export default { name: 'yyl-npm-practice', data () { return { msg: 'Welcome to Your Vue.js App' } }, props: { propData: { type: String, default: '我是默認值' } } } </script> <style lang="scss"> .container{ text-align: center; } </style>
2.App.vue內容如下：
<template> <div> <Main :propData='initData'/> </div> </template> <script> import Main from './components/Main' export default { data(){ return { initData: 'hello 你好' } }, components:{ Main } } </script> <style> </style>
3.index.js內容如下：
------ start 2019-05-06新增
index.js內容改完如下， 因為使用 window.Vue.component('yyl-npm-practice', Main) 的時候 外部引用的時候 有可能會覆蓋該組件，導致組件無法正常使用；
使用下面的的定義方式后， 在.vue 環境下 使用方式不變， 在只引用 ys-expression.js 環境下 需在 new Vue（） 之前加 window['ys-expression'].default.install();
import Main from './src/component/Main'
import _Vue from 'vue'
Main.install = Vue => {
if (!Vue) {
window.Vue = Vue = _Vue
}
Vue.component(Main.name, Main)
}
export default Main;
------ end 2019-05-06新增
4.修改package.json
package.json需要修改private字段(private是true的時候不能發布到npm,需設置成false)； 並增加main字段， main字段是require方法可以通過這個配置找到入口文件，這輸入模塊加載規范，具體可以參考 這里， 主要內內容截圖如下：
修改完package.json如下，標紅的就是新增和改變的屬性。
5.修改 webpack.config.js
其實就是修改entry 和output,截圖如下：
說明：入口會根據開發環境 ，生產環境切換， main.js 是npm run dev 的入口，就是App.vue， 用於調試/測試我們開發的組件; index.js是Main.vue， 就是我們開發的組件，我們打包到生產環境打包就只是單純的 yyl-npm-practice 組件
6.修改index.html的js引用路徑，因為我們修改了output 的 filename，所以引用文件的名字也得變。
到此組件就開發完了，打包下看看， npm run build dist下生成了倆文件，如下：
這個.map文件怎么回事，其實就是這段代碼：
生產環境的時候， 我們就不調試了，也不想要這個.map文件，那就先把這個 devtool刪了，然后放在這里，看下圖，只要在開發環境的時候才啟用這個調試，
把dist目錄下的倆文件刪除，再npm run build 就不會產生.map文件了。
npm run dev 讓項目跑起來，我們在App.vue里面調用該組件，並做測試，調試。
第四步： 發布到npm
1. 去 npm 官網注冊個賬號 https://www.npmjs.com/
2.在該組件根目錄下的終端（就是 平常輸入 npm run dev的地方），運行npm login，會提示輸入個人信息，Email是發布成功后，自動給這個郵箱發送一個郵件，通知發布成功，輸入完，登錄成功。
3.最后就可以發布了， npm publish, 如下，發布成功(每次發布的時候packa.json 里面的 version不能一樣，不然不能發布出去，手動改下版本就行)
去自己的npm上點擊Packages ，就能看到發布的包
包的具體信息如下：
大家最好在readme 里面寫上組件的使用方法， 說明等等，方便你我他。
使用方法 ：
1.組件內部使用
html:
<Main/>
js：
import Main from 'yyl-npm-practice'
2. main.js 全局安裝：
3.直接引用打包后的 yyl-npm-practice.js
這種方式就不需要webpack這類的構建工具，跟jquery的方式差不多，可以直接頁面引用，使用方法示例如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> </head> <body> <div id="app"> <yyl-npm-practice :propData="propData"></yyl-npm-practice> </div> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="./dist/yyl-npm-practice.js"></script> <script> new Vue({ el: '#app', data: function() { return { propData: '11111111111111111111' } }, methods: { } }) </script> </body> </html>
采坑記錄：
1.在webpack.config.js里設置 resolve（比如 設置@做為根目錄 ）， 開發環境沒問題，生產環境就用不了了，所以大家就用平常的相對路徑類吧，雖然麻煩了點。
2.圖片生產環境不能用，解決方法可以把圖片轉成base64, 可以用這個 在線圖片轉base64,或者把圖片放在網上，引用圖片的網上資源路徑。
3.字體圖標在生產環境也用不了，如果用到了字體圖標，就別把字體圖標的資源打包進去了，引用該組件的時候，需要再引用字體圖標的資源。
start ====> 2019-04-17更新
后來發現其實圖片和字體圖標也可一起打包到js里面，需要用到 url-loader 把limit參數設置大點就行，這樣就可以把圖片，字體圖標也都打包到js里面了，這樣使用的時候，就不用單獨引用這些靜態資源了， 代碼如下：
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'url-loader',
options: {
name: '[name].[ext]?[hash]',
limit: 99999
}
},
{
test: /\.(svg|ttf|eot|woff|woff2)$/,
loader: 'url-loader',
options:{
name:'[name].[ext]',
limit: 9999999
}
}
end ====> 2019-04-17更新
想看源碼的話，只要在自己項目里 npm install yyl-npm-practice 就可以在 node_modules 下找到了。