Vue 出一個女友吧!
前言
這是一個非常奇特的主題,至於為什麼會製作這個主題呢?後面再來講原因,這一系列將會講解紀錄使用 Vue Cli3 開發出一個平台唷
注意事項
注意本系列將不會講到基礎的 Vue.js 觀念唷,如果你想了解 Vue.js 可以考慮購買六角學院的課程,我是在這邊學的,所以這一篇將會記錄的是我的開發過程~
另外 UI 部分並不會特別去講怎麼做,畢竟我是要記錄 Vue 的咩~
起手式
首先要使用 Vue Cli 3 之前必須先安裝 Cli
1 | npm install -g @vue/cli |
安裝成功後可以透過使用 vue -V
來確定是否安裝成功
接下來於 cmd 視窗內輸入 vue ui
,接下來你就會看到 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 |
懶人大統整包
如果你跟我使用的套件是一樣的,那麼就可以複製以下指令一次性安裝~
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 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 | There are multiple modules with names that only differ in casing. |
代表你的資料夾可能有大小寫,建議在建立專案的時候不要大小寫混搭,例如 aBc、Abc 等。
如果沒有問題你就可以看到運行後的首頁哩~
補充設置
另外這邊有一個地方可以先做設置,否則在部屬的時候可能會發生錯誤,也就是 設定→Vue Cli 設定專案→基礎設定→公開路徑,改成 ./