Vue 出一個女友吧!

前言

這是一個非常奇特的主題,至於為什麼會製作這個主題呢?後面再來講原因,這一系列將會講解紀錄使用 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

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
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 設定專案→基礎設定→公開路徑,改成 ./

公開路徑