vue-cli 發佈一個npm 包

此項目中我們將element-ui 自定義主題，並且覆蓋更改了一些樣式

作用：

1.避免在每個項目中重新生成主題文件

2.避免每個項目不一致性

3.增加可維護性

開始

 在src目錄下建了一個index.js文件用於導出重新的less文件和element-ui編譯出的font和css文件

這裏要注意先後順序，相同樣式的情況下後面的會覆蓋前面的

index爲編譯出的主題樣式文件

segma-ui爲在編譯的基礎上再覆蓋的樣式文件（主題編譯更改有限，比如hover active的效果不好更改）

 

package.js 中新增一條編譯爲庫的命令，vuecli3提供了一個構建目標庫的命令，

可以查看官方文檔詳細瞭解：https://cli.vuejs.org/zh/guide/build-targets.html#%E5%BA%93

vue-cli-service build --target lib --name myLib [entry]

• --target : 構建目標，默認爲應用模式。這裏修改爲 lib 啓用庫模式。
• --dest : 輸出目錄，默認 dist 。這裏我們改成 lib
• [entry] : 最後一個參數爲入口文件，默認爲 src/App.vue 。這裏我們指定編譯 packages/ 組件庫目錄。

這裏我添加的是 src/index.js   我在index.js中導出了我需要的組件或者文件

...
"scripts": {
    ...
    "lib": "vue-cli-service build --target lib --name vue-svgicon-coms --dest lib src/index.js",
   ...
  },
...

並在package.json中添加npm包的一些詳細信息,僅供參考： 

{
    "name": "segma-ui",
    "version": "0.1.1",
    "private": false,
    "scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "lib": "vue-cli-service build --target lib --name segma-ui --dest lib src/index.js",
    },
 
    "description": "```\r npm install\r ```",
    "main": "dist/index.html",
    "repository": {
        "type": "git",
        "url": "git+https://github.com/Embrace924/segma-ui.git"
    },
    "keywords": [
        "node",
        "element-ui",
        "vue",
        "javascript",
        "scss",
        "less"
    ],
    "author": "cld",
    "license": "MIT",
    "bugs": {
        "url": "https://github.com/Embrace924/segma-ui/issues"
    },
    "homepage": "https://github.com/Embrace924/segma-ui#readme"
}

執行編譯

npm run lib

項目的根目錄也多了一個lib文件夾

註冊npm賬號

如果之前修改過npm源爲淘寶鏡像，先改回爲npm鏡像

npm config set registry http://registry.npmjs.org

使用npm賬號登錄（在瀏覽器註冊時使用的郵箱，點擊註冊鏈接完成郵箱認證）

npm login

 執行發佈命令，發佈組件到 npm

npm publish

發佈成功

發佈成功後稍等幾分鐘，即可在 npm 官網搜索到。以下是剛提交的 segma-ui

 

 

在需要的項目中安裝依賴  對應需要的版本

在項目中引用文件、使用組件