---
title : packaging component
description: 如何打包package
---
packaging component
---

### <font color="#48C9B0">**套件封裝、打包**</font>

**先設定封裝檔案的entry (目前多放在src/package/index.js)**

// Import vue componentName2

import componentName from "../components/componentName.vue";
import componentName2 from "../components/componentName2.vue";


// Declare install function executed by Vue.use() 
export function install(Vue) {
	if (install.installed) return;
	install.installed = true;
    Vue.component('CmponentName', componentName);
    Vue.component('CmponentName2', componentName2);
}

// Create module definition for Vue.use()
const plugin = {
	install,
};

//也可以把install function設定成 default export

export default plugin; 

**設定 package.json**

詳情請參考:
https://5balloons.info/create-publish-you-first-vue-plugin-on-npm-the-right-way/

語意化版本命名方式:
https://semver.org/lang/zh-TW/

"scripts": {

    "build-bundle": 
    "vue-cli-service build --target lib --name [your package name] ./src/package/index.js"
}

"name": "[your package name]",
"version": 變更版本號依據 語意化版本 方式命名,
"private": false,

//Pointing to Right Output File
"main": "dist/[your package name].common.js", 

//If you are looking to publish only the compiled source code to the NPM,
you can mark your files attribute to
"files": [
"dist/*"
],

**設定azure artifact 連結NPM**

參考連接:
https://dev.azure.com/webimrd/WBGuide/_packaging?_a=connect&feed=WeBIM

在.npmrc配置文件設定:

registry=https://pkgs.dev.azure.com/webimrd/_packaging/WeBIM/npm/registry/ 
                        
always-auth=true

然後在terminal裡面輸入下列，登入Azure的帳號:

vsts-npm-auth -config .npmrc

接著Restore 專案裡面的packages

npm install

然後就可以Publish了

npm publish

**透過 vue-cli 完成基本設定**
* eslint
* sass/scss
* pwa
* vue-router
* vuex

**eslint 設定筆記**
// By Jason

* ESLint config: Basic
* Lint on save 兩個都選預設值

### <font color="#48C9B0">**創建一個新的Vue Cli專案做測試用**</font>

1. 選擇手動設定專案


2. Vue 選擇 router, vuex, Unit Testing


3. 選擇 Vue 2.x 版本


4. 選擇 history mode for router


4. 選擇 CSS pre-processor


5. 選擇 ESLint config: Basic


### <font color="#48C9B0">**測試專案環境設定**</font>

參考連接:
https://dev.azure.com/webimrd/WBGuide/_packaging?_a=feed&feed=WeBIM
請在裡面尋找 syncobox-shared 下載最新版本，並且依照指示設定環境。

**測試專案裡面的main.js設定**

在裡面import package 以及相對應的css檔案

import YourPacakgeName from "[your package name]"
import "[your package name]/dist/[your package name].css"
Vue.use(YourPacakgeName);