---
tags: share
disqus: hackmd
---

1100302
===

## About coding ...
* 宣告只能用let和const，不能用var
* 先看TS和ES6
* EverNote文件先閱讀1、3、4、5、vue撰寫規則
* 須熟悉 ES6 和 TypeScript
* vuetify 是 vue 的 UI 框架

## About Vue ...
slot vue 挖洞的意思

this.＄（錢字號）方法名稱() //是掛在vue上面的方法
ex:this.$successMsg()

## About Vuex
* 單向資料流，只有一條路拿資料、讀資料。
* **Action** 與後端串接 API 取資料(裡面打api) → 丟給 **Mutation** 於Devtool處利資料→ **State**  存放資料

## About 語法==new==
* 引入外部檔案寫法有 `import `、`require`。
* `require` 是 ES5 的寫法（ES6 之前的語法都稱為 ES5）。
* `import '：/...'`、`import '@/...'`中，：跟@都表示根目錄，公司使用`~`。
* `export default` 是 ES6 之後的寫法。

## About TypeScript 強型別語法==new==
* 強型別需要定義型別（如 DTO）。
* 強型別類似像 class 的角色：Enum、class、interface。
* : void表示默認（不回傳東西）。

## About API
API 就是取得服務的「方法」（例如輸入路徑、XHR、Vuetify 定義好的函式）。

## About 專案資料夾結構說明
* **api**：封裝api。
* test：測試腳本。
* app：nuxt 資料夾（暫不碰）。
* assets：靜態資源資料夾，會過webpack編譯（ex：sass檔）。
* components：元件。
* layput：模板，共用的東西放在layout上（ex：navbar）。
* middleware：前端權限管理（後端也會測試，ex：換頁操作）。
* auth.ts：關於檢查。
* **models**
* 建立 DTO（轉接器，定義傳輸用的物件）。
* 格式會跟 API 一樣。
* res：回傳。
* req：傳出去。

export interface IBKE0102CarouselListRes {
  carouselList: IBKE0102CarouselItem[]; //	輪播列表 // []表示陣列
}
export interface IBKE0102CarouselItem {
  carouselId: number; //	選單序號
  title: string; //	標題
  subTitle: string; //	子標題
  moduleId: string; //	模組ID
  pageId: number; //	頁面ID
  url: string; //	頁面ID
  mediaType: MediaEnum; //	媒體類型	"0: 圖片 1: 影片"
  mediaId: number; //	圖片id	圖片ID / 影片沒有
  mediaUrl: string; //	文章ID/圖片/影片url	文章ID /圖片沒有 / 影片
  status: StatusEnum; //	顯示狀態	Y/N
  windowOpen: StatusEnum; //	另開視窗	Y / N
}

* page：nuxt 對 page 賦予特殊任務，資料夾下的 vue 檔寫成 vue-router 的路徑，在此資料夾新增 Vue檔，nuxt就會自動寫成VueRouter（路徑），通常 Vue 檔命名為`index.vue`，若有特定詳細頁面如 **id=123**，檔案命名為`_id.vue`。
* `IResponse<T>`：T 表示呼叫時才告知型別。
* `.than((回傳資料後要做的事情)=>{
})`

  created() { // vue在 created 階段呼叫此函示
    this.getCarouselList();
  }
// 以下為抓取資料 function
// :後表示告知型別
  getCarouselList() {
    this.loading = true;
    // 以下為promise
    getCarouselList()
      .then(({ code, data, msg }: IResponse<IBKE0102CarouselListRes>) => {
        if (code === ResponseEnum.SUCCESS) { // 成功時處理
          // 傳送資料
          this.data = data.carouselList;
        } else {
          this.$errorMsg(msg);
        }
        this.loading = false;
      })
      .catch(_ => { // catch表示錯誤時的寫法 // _代表不使用參數
        this.$errorMsg();
        this.loading = false;
      });
  }

### 與專案設定有關的資料夾（通常都是由環境設定的人來負責建立）
* plugins：此專案使用的外部套件（node.js環境變數：`process.env.API_URL || ""`）。
* setting：專案設定。
* static：放靜態資料，與assets是不會過webpack編譯也不會壓縮，通常放圖片或json檔。
* store：全域管理資料，存放每頁共用資料ex:購物車、登入資訊，會拆成好幾個模組（設定環境的人會去寫）。
* node.js的環境變數設定
* token設定
* types：定義共用資料的語法（不太會用到）。
* <span style="color:red;">**utils**（內容要先看）</span>：放共用程式（如果內容不夠用通知 Karta新增）。
### 其他檔案說明
* jest開頭的檔案：jest.e2e.config.js 自動化工具，是前端測試工具，ex:自動開啟瀏覽器等、自動按某個按鈕。
* .eslintrc.js：代碼檢查工具（自動報錯）的設定檔。
* .editorconfig：編輯器設定檔，ex:檢查縮排..等。
* tsconfig.json：給webpack看的，不會碰到。
* .babelrc：處理跨瀏覽器前綴問題。
* nuxt.config.js
* Vue 依賴 webpack，nuxt 把 Vue 包起來，webpack.config.js 包在 Vue.config.js裡。
* nuxt 包入 webpack，所以 nuxt.config.js 等同 webpack.config.js 設定檔結構（vue.config.js 將 webpack.config.js 簡化，nuxt.config.js 又將 vue.config.js 簡化，因此三者是一樣東西）。
* 根目錄為 node_module 資料夾。