從頭到尾構建vue的npm依賴包

1、使用vue腳手架vue-cli拉取項目

vue create zy-ui  // 拉取項目

2、 修改拉取后的zy-ui項目

將src文件重命名為examples，並修改vue.config.js如下：

 

 

 

const path = require('path');
module.exports = {
  lintOnSave: false,
  pages: {
    index: {
      entry: 'examples/main.js',
      template: 'public/index.html',
      filename: 'index.html'
    }
  },
  chainWebpack: config => {
    config.module.rule('js')
    .include
    .add(path.resolve(__dirname, 'packages')).end()
    .use('babel')
    .loader('babel-loader')
    .tap(options => {
      return options;
    });
    config.resolve.alias
    .set("@", path.resolve(__dirname, 'examples'));
  }
}

3、  在項目根目錄新建packages目錄，用來存放ui組件，並在packages目錄中創建index.js，引入寫好的組件，並導出組件和intall方法， 如下圖

 

 

 4、 由步驟3中可以看到入口文件是examples文件夾中的main.js，那么需要在packages自定義組件創建完成后，在入口文件中引入，以便在打包時編譯，如下如

 

 

 

5、此時可以啟動項目， 可以看到所有的自定義組件都將被注冊到vue的component中

npm run dev  // 啟動項目

6、編譯，修改package.json， 運行npm run lib ，即可編譯生成代碼

 

 

 

vue-cli-service相關命令說明，如下：

Usage: vue-cli-service build [options] [entry|pattern]
Options:
  --mode        指定環境模式 (default: production)
  --dest        指定輸出目錄 (default: dist)
  --modern      構建兩個版本的 js 包：一個面向支持現代瀏覽器的原生 ES2015+ 包，以及一個針對其他舊瀏覽器的包。
  --target      允許您以項目庫或Web組件的形式在項目內部構建任何組件 app | lib | wc | wc-async (default: app) ???
  --name        lib或者web組件庫的名稱 (default: "name" in package.json or entry filename)
  --no-clean    在構建項目之前不要刪除輸出目錄(dist)
  --report      生成report.html以幫助分析包內容
  --report-json 生成report.json來幫助分析包內容
  --watch       監聽 - 當有改變時 自動重新打包~

Usage: vue-cli-service serve [options]
Options:
  --open    服務器啟動時打開瀏覽器
  --copy    將URL復制到服務器啟動時的剪貼板 (直接到瀏覽器去粘貼就OK了 http://localhost:8080/)
  --mode    指定環境模式 (默認: development)
  --host    host 地址 (default: 0.0.0.0)
  --port    端口號 (default: 8080)
  --https   使用https (default: false)

//使用它vue-cli-service inspect來檢查Vue CLI項目中的webpack配置。
//有關更多詳細信息，請參閱檢查Webpack配置

Usage: vue-cli-service inspect [options] [...paths]
Options:
  --mode    指定環境模式 (default: development)

7、發布

7.1、修改package.json，將文件中的private 設置成false或者直接刪除，才可以允許發布

7.2、 修改或者添加main字段為 “main”：“lib/zy-lay-ui.umd.min.js”

7.3、 在項目根目錄創建 .npmignore 文件 ，忽略掉不發布的文件（原則上，只需要發布編譯后的包lib、package.json、README.md文件）

# 忽略目錄
examples/
packages/
public/

# 忽略指定文件
vue.config.js
babel.config.js
*.map
.browserslistrc
.editorconfig
.eslintrc.js
babel.config.js
yarn.lock

8、發布

// 登錄  輸入用戶名、密碼、郵箱
npm login

// 發布
npm publish