目次
1. 安裝 Vue CLI
2. 檔案目錄講解
3. 配置靜態檔與引用路徑
4. 配置設定檔與部屬檔案
之前是用 Vue 來寫畢業的專題，但一直沒有去記錄相關的筆記
當時非常的趕，我要在兩個月內完成我的成品
包含學完 Vue.js 以及催促同學設計網頁頁面跟產文字，當然還有討論功能等等
所以俗辣如我看到 Vue CLI 就嚇怕了，一堆目錄跟自己不懂的黑科技（ Webpack）
讓我很擔心自己沒辦法快速上手，花太多時間在上面開天窗
所以我一開始的專案是先混在 HTML 裡寫的（掩面
想說先求有再求好，我寫出來再改
畢竟混在 HTML 寫真的不是很好維護…眼睛也快瞎了
事後在修正時，才發現其實他不會很難上手，就是要懂的怎麼配置跟想一下要怎麼規劃而已
上手難度算是很低的，十分親民
開始你的 Vue CLI 專案
Vue CLI 的安裝非常方便快速
npm install -g @vue/cli安裝好後，確認版號看有沒有安裝成功
vue --version接著創建專案
vue create （專案名稱）然後就會到這個畫面
我是直接選預設的，然後他就會開始安裝
安裝成功後，就來檢查一下我們的專案是否運行成功
cd （專案資料夾）npm rum serve
就會跳出這個畫面
直接打開 http://localhost:8080/ ，顯示是這個畫面我們就成功了
檔案目錄講解
在不展開 node_modules 的目錄結構大致如下：
├── node_modules/
├── README.md
├── babel.config.js
├── package-lock.json
├── package.json
├── public
│ ├── favicon.ico
│ └── index.html
└── src
├── App.vue
├── assets
│ └── logo.png
├── components
│ └── HelloWorld.vue
└── main.js其實不會到非常複雜，讓我們來一一拆解：
public：靜態資源資料夾，這裡的檔案不經 webpack 打包，直接複製public/index.html：首頁的 HTML 檔，裡面不會有主要內容，可編輯網頁所需的 meta tag 或是引入外部的 css 或 jssrc/assets：圖檔資料夾，會經過 webpack 打包，必須放在這個資料夾內才能夠在成功被引用src/main.js：整個 Vue 專案的最源頭，裡面引入了 Vue 並創建了 Vue 實例，這個 Vue 實例有一個引入的 components 就是App.vue
若有使用 vue 的套件，如：vue router 、vue touch，下載後須從main.js引入src/components：依照規劃將不同的內容或功能分成一個個 component，可以互相引用src/App.vue：頁面最上層的根節點，綁定在index.html中的<div id ="app"></div>，要使用的 component 皆會掛在App.vue底下
為什麼會有
.vue檔？
專案中有使用 webpack 的一個套件： vue-loader
這個套件會將 .vue 檔解析成 js
可以不要都掛載在
App.vue底下嗎？
可以，在 index.html 加入新的節點作為另一個父節點，在 main.js 創建新的 Vue 實例即可
只需要記得 Vue 就是針對單一節點綁定，再將其餘子節點往下掛
因為 Virtual DOM 的原理就是比對節點是否有更新，再去更新節點
所以比較的基準一定要是同一個父節點
配置靜態檔與引用路徑
介紹完所有的檔案後，有時我們還是會有引入其他 css 或 js 的需求
Css
在每一個 .vue 檔，都可以這樣配置：
App.vue
有些人可能習慣寫在這裡，因此不需要再有一個 Css 檔
但有些人可能不喜歡把 Css 寫在 .vue 裡，想要另外拉一個 Css 檔
我則是習慣把這個 Component 用到的 Css 寫在 .vue 檔
把共同會使用的 Css，例如：文字大小、顏色、背景色…等等的
另外寫在一個 Css 檔，從 index.html 引入，讓所有 component 共用
我覺得這樣子很好維護，畢竟 Css 行數一多
就算下註解讓我們好找每一個區域的 Css，也是很費心力跟眼力的
還不如寫在 .vue 檔方便
因此我們創建一個 main.css 丟在 public 資料夾內
由於這個資料夾，他不會經 Webpack 打包
├── node_modules/
├── README.md
├── babel.config.js
├── package-lock.json
├── package.json
├── public
│ ├── favicon.ico
│ ├── main.css
│ └── index.html
└── src/所以 index.html 直接用相對路徑引入即可
index.html
<html>
<head>
....
<link rel=stylesheet type="text/css" href="./main.css">
....
</head>
<body>
.....
</body>
</html>JavaScript
如果是 jQuery 之類的，其實直接在 <head> 引入就沒事了
但如果除此之外我還有其他 .js 檔呢？
像是我在專案中有使用到 D3.js
除了在 <head> 引入外，我還有一個 d3Chart.js 檔去製作我的圖表
因此我們一樣在 public 創建 chartJs/ 的資料夾
將 d3Chart.js 檔丟入 chartJs/
├── node_modules/
├── README.md
├── babel.config.js
├── package-lock.json
├── package.json
├── public
│ ├── favicon.ico
│ ├── main.css
│ ├── index.html
│ └── chartJs
│ └── d3Chart.js
└── src/在 index.html 引入時要特別小心， d3Chart.js 要在 <body> 後引入
因為在網頁回傳時
第一時間 index.html 的內容只有 <div id="app"></div>
若我們是在 <head> 引入，我們的主要內容是還沒掛在父節點之下的
所以 d3Chart.js 會找不到我們指定的節點，直接失效
index.html
<html>
<head>
....
<link rel=stylesheet type="text/css" href="./main.css">
<script src="https://d3js.org/d3.v3.min.js"></script>
....
</head>
<body>
.....
</body>
<script src="./chartJs/d3Chart.js"></script>
</html>圖檔
除了把圖檔放在 src/assets 之外，也可以在 public 創建資料夾
將想要引用的檔案放在資料夾內
但為什麼有 src/assets 不放要放在 public 內呢？
一般圖片只需要透過 <image> 標籤即可引用
是以該 Component 位置為主的相對路徑
<template>
<img src="../assets/xxxx.jpg" alt="xxx">
</template>但今天我遇到的情形是這樣的：
我設計了一個 component 負責輸出我文章的段落
Paragraph.vue
因此我只要建立一個物件
var post = [
{
key: 'a',
title: 'xxx',
content: 'xxxxxxx'
img: '<img src="./image/xxxx.jpg" alt="xxxx">'
}
]在另一個 Component 引入 Paragraph.vue 並用 v-for 迭代物件元素
Content.vue
我的圖片若是放在 src/assets 用 <img src="../assets/xxx.jpg"> 的方式引入
v-html 會直接把它轉成 <img src="../assets/xxx.jpg"> 不會再經由 Webpack 處理
打包後的 dist/ 中也沒有 assets/ 資料夾，路徑就錯了
因此，如果把圖檔放在 public/ 直接不經 Webpack 處理，以 index.html 為主要位置寫相對路徑
就可以成功引用！
配置設定檔與部屬檔案
設定檔
Vue CLI 3 設定檔是選配的，在建立專案時並不會建立設定檔
要自己手動建立 vue.config.js
├── node_modules/
├── README.md
├── babel.config.js
├── package-lock.json
├── package.json
├── public
│ ├── favicon.ico
│ ├── main.css
│ ├── index.html
│ └── chartJs
│ └── d3Chart.js
├── src/
└── vue.config.js
vue.config.js
上面是基礎版的配置，可以搭配 官方文件 的敘述任意添加所需的配置
其中若在 npm run bulid 後，頁面是白的
並且有錯誤訊息顯示沒有抓到 js 或 css 檔
即代表你的 publicPath 配置錯誤，造成打包路經引用不對
可以參考 文件上的說明
部署檔
至於部署的檔案也是選配，創建專案也不會有
其實 官方文件 有各平台的部署檔案寫法建議
像是我的專案是透過 GitHub Pages 部署，他就是建議我使用 shell script
創建一個檔案，叫做 deploy.sh
├── node_modules/
├── README.md
├── babel.config.js
├── package-lock.json
├── package.json
├── public
│ ├── favicon.ico
│ ├── main.css
│ ├── index.html
│ └── chartJs
│ └── d3Chart.js
├── src/
├── vue.config.js
└── deploy.shdeploy.sh
官方範例：
或者是可以參考我之前寫的文章：
接著，我會把它設成 npm script
讓我可以下指令就可以直接執行部署程式
package.json
在 script 內加入 "deploy": "sh ./deploy.sh"
{
"name": "docs",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"deploy": "sh ./deploy.sh"
},
........
}確定要上版時，直接下 npm run deploy 就可以直接部署了
以上關於配置和路徑的心得就到這邊
希望可以透過這篇介紹，可以提升大家剛接觸 Vue CLI 的使用體驗！
拍個手讓我知道，這個文章對你們有幫助 ♥(´∀` )人
