記我的第一個npm: vue-datepicker-m

雖然說重新造輪子不是一件必要的事，但造輪子本身卻可以是一件愉快的事。

最近因爲項目需要（日曆中要實現範圍選擇，指定日期高亮，切換到月份和年份選擇），在 npmjs.org 上找了一款vue2的日曆組件，發現在手機上使用時，每次點選日期頁面底部都會出現一個奇怪的 “取消/完成” 彈框。原來組件使用了 input 元素，雖說添加了 only 屬性，但這一體驗並不好。

於是我開始了造輪子之路。

它的名字叫 vue-datepicker-m, 是一個基於vue2的組件，使用起來十分方便。它有三種語言可供選擇 ‘en’代表english, ‘cn’代表chinese, ‘jp’代表’japanese’。它的demo在這裏.

它的寬度是父元素的寬度，對於手機來說，寬度100%更爲合適。如果是pc的話，只需要給父元素設置一個合適的寬度，也是十分好用的。

點擊上圖，你將來到我的github項目, 歡迎給顆小星星。 : - ]

記錄一下

1. npm publish時遇到錯誤

由於我已將npm設置爲taobao的地址，因此需要改回來: npm config set registry=http://registry.npmjs.org

2. You cannot publish over the previously published version 1.0.0

每次publish完後，下此publish時需要將package.json中的版本更新： "version": 1.0.1

3. github pages服務實在是太好了

去pages走這裏
可以給每個項目配置主頁，可以設置自己的個人靜態站點。
由於官網的說明已經很好，也很簡單，就不再記錄了。 感謝github這麼好的公司。

4.package.json說明

{
    "name": "vue-datepicker-m",
    "main": "./dist/index.js", // 當有人 `import DatePicker from 'vue-datepicker-m'`時用的文件
    "repository": {
      "type": "git",
      "url": "git+https://github.com/xtimespace/vue-datepicker-m" // npmjs.org會將這個鏈接放到項目介紹頁
    },
    "bugs": {
      "url": "https://github.com/xtimespace/vue-datepicker-m/issues"
    } // 這這裏查看bug
}

5. 第一次發的包用不了

在發佈第一個包後的愉悅之中被潑了一盆冷水，因爲 import DatePicker from 'vue-datepicker-m' 後，瀏覽器報錯了。但 npm run dev 沒有問題。

網上搜到一種解決方法是將webpack.config.js中的 'vue$': 'vue/dist/vue.esm.js' 改爲 'vue$': 'vue/dist/vue.js'. 不過無效。

可行的方法是設置 library 和 libraryTarget 項如下：

output: {
  path: path.resolve(__dirname, './dist'),
  publicPath: '/dist/',
  filename: '[name].js',
  library: 'DatePicker',
  libraryTarget: 'umd'
}