Vue 出一個女友吧!

發表於 更新於 分類於

Google AD

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

Liker 讚賞

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

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

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

公開路徑

Liker 讚賞

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

Google AD

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