Vue 出一個女友吧!

發表於 2019-07-25 分類於 Vue

Google AD

撰寫一篇文章其實真的很花時間，如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話，我會非常感謝你ヽ(・∀・)ﾉ

Liker 讚賞

這篇筆記文章如果對你有幫助，
你可以考慮花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與鼓勵我。
或者你可以也可以請我「喝一杯咖啡(Donate)」。

｜

這是一個非常奇特的主題，至於為什麼會製作這個主題呢?後面再來講原因，這一系列將會講解紀錄使用 Vue Cli3 開發出一個平台唷

前言

這是一個非常奇特的主題，至於為什麼會製作這個主題呢?後面再來講原因，這一系列將會講解紀錄使用 Vue Cli3 開發出一個平台唷

注意事項

注意本系列將不會講到基礎的 Vue.js 觀念唷，如果你想了解 Vue.js 可以考慮購買六角學院的課程，我是在這邊學的，所以這一篇將會記錄的是我的開發過程~

六角學院

另外 UI 部分並不會特別去講怎麼做，畢竟我是要記錄 Vue 的咩~

起手式

首先要使用 Vue Cli 3 之前必須先安裝 Cli

1	npm install -g @vue/cli

安裝成功後可以透過使用 vue -V 來確定是否安裝成功

version

接下來於 cmd 視窗內輸入 vue ui，接下來你就會看到 GUI 介面哩~

GUI

那麼專案的建立方式我就直接略過了，因為這並不是本系列的重點，建立的時候我會使用到以下套件

vue-router
vuex
node-sass
babel
eslint - aribnb

額外的套件

接下來這邊我會額外安裝以下預計會使用到的套件

Vue-fontawesome - 基於 Vue 開發的 fontawesome 套件，需注意這個套件底下還有其他相依套件要安裝
- @fortawesome/fontawesome-svg-core
- @fortawesome/free-brands-svg-icons
- @fortawesome/free-regular-svg-icons
- @fortawesome/free-solid-svg-icons
- @fortawesome/vue-fontawesome
Vue-axios - AJAX 套件
Vee-validate - Vue 欄位驗證
Vue-awesome-swiper - 輪播套件
Vue-loading-overlay - LOADING 套件
Vue-cli-plugin-pug - HTML Template 套件
Popper.js - Bootstrap 相依套件
Bootstrap - 就…Boostrap
jQuery - Bootstrap 相依套件

偷懶指令系列

以下將會是套件的偷懶安裝指令

Vue-fontawesome

1	npm install --save @fortawesome/vue-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-brands-svg-icons @fortawesome/free-regular-svg-icons @fortawesome/free-solid-svg-icons

Vue-axios

1	npm install --save axios vue-axios

Vee-validate

1	npm install --save vee-validate

vue-awesome-swiper

1	npm install --save vue-awesome-swiper

Vue-loading-overlay

1	npm install --save vue-loading-overlay

Vue-cli-plugin-pug

這個套件比較特別，只會在開發中使用而已，實際運行並不會使用

1	npm install --save-dev vue-cli-plugin-pug

Bootstrap

由於 jquery 與 popper.js 是 bootstrap 的相依套件，所以就一次安裝哩~

1	npm install --save bootstrap popper.js jquery

懶人大統整包

如果你跟我使用的套件是一樣的，那麼就可以複製以下指令一次性安裝~

npm install --save @fortawesome/vue-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-brands-svg-icons @fortawesome/free-regular-svg-icons @fortawesome/free-solid-svg-icons axios vue-axios vee-validate vue-awesome-swiper vue-loading-overlay bootstrap popper.js jquery

唯獨 vue-cli-plugin-pug 是另外安裝的。

1	npm install --save-dev vue-cli-plugin-pug

HelloWorld

接下來就進入任務→啟動，如果你得到以下這個錯誤

1 2	There are multiple modules with names that only differ in casing. This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.

代表你的資料夾可能有大小寫，建議在建立專案的時候不要大小寫混搭，例如 aBc、Abc 等。

如果沒有問題你就可以看到運行後的首頁哩~

HelloVue

補充設置

另外這邊有一個地方可以先做設置，否則在部屬的時候可能會發生錯誤，也就是設定→Vue Cli 設定專案→基礎設定→公開路徑，改成 ./

公開路徑