---
tags: vue cli
---
# vue cli
>參考文件：[專案結構](https://book.vue.tw/CH3/3-1-vue-cli-introduction.html#vue-cli-%E5%BB%BA%E7%AB%8B%E7%9A%84%E5%B0%88%E6%A1%88%E7%B5%90%E6%A7%8B)

>Ｑ：我有點混亂😓，想請問註冊套件要放哪裡呢❓
為什麼mitt套件不是放在main.js，也不是放在App.vue，而是放在Dashboard.vue呢❓
有沒有特定import的一套規則呢❓
>
>Ａ：當透過 npm run serve 或 yarn serve 啟動專案的時候，會由==預設的進入點 src/main.js 進入整個應用程式==，此檔案==主要用來載入套件或註冊全域性元件==。
>然而mitt 套件在課程章節「加入錯誤的訊息回饋」被獨立於 methods 資料夾，非 src/main.js，原因是使用的範圍不大。
==假如是全域性使用，直接在 src/main.js 引入即可==。
src/main.js/App.vue 為應用程式的根元件，也就是打開 localhost 後所看到的模板，可以搭配 router-view 透過 Vue Router 進行路由的配置。
課程章節「匯入 Bootstrap 並調整版型」示範如何套用 src/assets/all.scss 編譯後的樣式於此元件上。
>:::spoiler 同學問題＆助教回答截圖
>
>:::

---

## 步驟：
1. 先在終端機上寫==cd 資料夾(可以直接把資料夾丟入到終端機上面)==
2. 創建項目：==vue create 資料夾名稱==
3. 把創建好的資料夾放入vscode上，並開啟終端機使用==npm run serve==
:::warning
原本一直開失敗，才發現原來是開錯資料夾，所以要記得注意不要開錯資料夾
:::
4. 當npm install 任何套件時候，都必須先將終端機給停止，輸入法：==control + C==，
安裝完畢之後再重新啟用專案==npm run serve==
`npm install bootstrap@5.2.0-beta1`
5. 在App.vue上將外部套件匯入
* 先將預設的css給刪除掉
* 使用 ==@import "bootstrap";== 將外部套件給匯入


---

## 資料夾檔案意思
### ➜ main.js
是主要進入點，當如果要引用其他套件並使用全域註冊，需要寫在main.js


### ➜ components
當要新增元件，需要在compinents下開啟一個新檔案
p.s.檔案取名開頭要大寫


### ➜ views
負責存放 主要頁面(完整頁面)


---

## components：建立元件
1. 先在components下建立一個新檔案
2. 在檔案內先在外部寫上 `template`
3. 之後在template內放入所要寫的元件(這裡是直接套用bs5的cards寫法)


4. 如果想在元件上加入一些data可以這樣寫：(呈現畫面如下圖)

<template>
  <div class="card" style="width: 18rem">
    <h5 class="card-title">{{ title }}</h5>
    ...      
  </div>
</template>

<script>
export default {
  data () {
    return {
      title: '這是一段標題從data上改寫的'
    }
  }
}
</script>


---

## views：將建立好的元件呈現在畫面上
1. 首先一開始畫面會沒有卡片元件(如圖一)
2. 將元件匯入到views上
3. 寫法：

<template>
  <div class="about">
    <h1>This is an about page</h1>
      
    <!-- 步驟五：最後再將區域註冊的Card呈現在畫面上，就會(如圖二)的樣子呈現了 -->
    <Card></Card>
      
  </div>
</template>

<!-- 步驟一：先寫script -->
<script>
    
// 步驟二： 將元件匯入到views上    
import Card from '@/components/CardDemo.vue'
    
// 步驟三： 將元件匯出到html上(不需另外匯出元件上的html & css)     
export default {
    
  // 步驟四： 使用區域註冊 
  components: {
      
    Card // 此名稱與步驟二的名稱相同
      
  }
}
</script>


---

## 引入外部套件
[詳記筆記](https://hackmd.io/fSDVyMA2Q5yl591nOLNkVA)

## 環境變數基礎觀念
[詳記筆記](https://hackmd.io/g7g5dJ0ESzWRUPSwsBkYbw?both)

## 編譯設定檔
1. 在終端機輸入`npm run build`
2. 編譯完之後會多一個 ==dist資料夾==
3. 編譯完的檔案是使用絕對路徑方式來撰寫，目前所對應的是dist下面的路徑(如圖一)，當我們試著想打開檔案並沒有透過web serve的形式，他是無法瀏覽的(如圖二)。

:::success
因此當我們我要正確開啟的話，可以將dist資料夾放入到vscode裡，並用GoLive的方式開啟↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
:::
4. 調整路徑：
>當要調整路徑時，首先要先在專案上加上vue的config
>>老師建議使用vue ui來建立vue的config
1. 在終端機輸入`vue ui`
2. 之後到 設定 裡面的 Vue CLI 的 公開路徑改成`/dist`並存檔
3. 專案就會出現`vue.config.js`，並在重新build一次

        // 原本我自己的在輸入vue ui就會直接跳出vue.config.js，
        // 且內容也與老師的不同，之後自己手動將內部文字改成下方程式，依舊可以成功進行
        module.exports = {
          publicPath: '/dist/'
        }
        // p.s.老師的vue.config.js是經過上面步驟之後才會出現

4. 路徑從原本的 `/js/....js` 變成 `/dist/js/....js`，這樣就可以直接從該專案檔案，直接使用GoLive開啟檔案，不需要再將dist資料夾放入到另一個vscode開啟了