[Vue.js] 建置 Vue-cli 開發環境

HTML與SEO實戰應用—並以ChatGPT助力提升網站品質與流量

為了要快速開發 vue 的專案,我們常常會搭配 Vue CLI,這邊介紹一下該怎麼設定 Vue CLI 的環境。

Vue CLI 需要在 node.js 的環境下才能運作,所以如果電腦裡面沒有 node.js 的話要先去官網下載安裝。

node.js 官網

注意 Vue CLI 需要搭配Node.js 8.9 以上的版本(官方推薦8.11.0以上為最佳)
,安裝後檢查 node.js 版本:

node -v

如果版本比較就可以更新到最新版:

npm install -g n

 

接著在指令那邊輸入安裝 Vue CLI

npm install -g @vue/cli

 

安裝完後切換到要安裝的資料夾,並執行以下指令

vue create <your-project-name>

其中 your-project-name 記得改成你要的專案名稱,而且不用加 <>

 

接下來會進入這個畫面,這邊選擇最下面 Manually select features,這樣就可以自訂要安裝的套件。

 

選擇安裝套件的畫面:

 

  • Babel:可以把ES6翻譯成其他版本的Javascript(如ES5),做到JS的向下兼容
  • PWA:幫忙設定 PWA 的工具
  • Router:Vue-Router是設定前端路由很方便的工具
  • Vuex:狀態管理工具,可以集中管理Vue.js中所有組件的狀態
  • CSS Pre-processors:安裝css預處理器,讓Vue可以讀懂css
  • Linter/Formatter:檢查代碼是否正確的工具

這邊可以依據你的需求在要安裝的套件前按空白鍵就能選取跟取消選取,選取後下個畫面會要你選擇版本,如果已經開始寫 3.x 版的話是建議用新的版本。

接著出現這個

Use history mode for router?

建議按 Y 就好了

這個問題是問你要把相關套件的設定檔案放在哪邊,大多數的情況我們都會在 package.json 統一管理,不過如果有需要也可以選擇 In dedicated config files 使設定檔各自獨立。

Where do you prefer placing config for Babel, ESLint, etc.?
In dedicated config files
In package.json

 

選完後就會開始安裝專案了,安裝完成後會提示你怎麼開啟專案。

cd [你的專案名稱]
npm run serve

 

然後依據提示輸入網址,一般是 http://localhost:8081/ ,接著看到這個這個畫面就代表成功了

 

 

這個是開發階段的設定,如果完成後要部署,要輸入指令

npm run build

 

build 出來的檔案會在 dist/ 裡面,不過這時直接開啟 index.html 是沒辦法執行的,如果要在本機端看的話最簡單的方式就是使用 Node.js 靜態文件伺服器

npm install -g serve
serve -s dist

 

打完指令後就會提示你在哪個網址能看,輸入後就能在本地端看成果了。

要部署到其他地方則可以參考 Vue CLI 官方的說明

 

 

課程推薦

HTML與SEO實戰應用—並以ChatGPT助力提升網站品質與流量

HTML與SEO實戰應用—並以ChatGPT助力提升網站品質與流量

本課程專為希望深入了解 HTML 並有效結合 SEO 策略的學員設計。我們將重點放在 HTML 的深度學習與應用上,同時穿插介紹如何透過搜索引擎優化提升網站能見度。透過即時互動式的直播教學,加上 ChatGPT 的輔助,您將學習到如何建立一個結構優良、美觀且符合 SEO 標準的網站。這不僅會提升網站的用戶體驗,還會大幅提高網站的搜索引擎排名,進而增加訪客流量和潛在客戶。
用AI強化職場競爭力 ChatGPT、Midjourney從入門到精通

用AI強化職場競爭力 ChatGPT、Midjourney從入門到精通

在快速變遷的職場中,提升競爭力成為關鍵。透過引領潮流的AI技術,ChatGPT和Midjourney將助您勇攀高峰。無論您是AI新手還是專家,這個課程將引導您從入門到精通,解密AI的奧秘,並學習如何運用於職場。
GitHub Copilot AI 程式碼編輯工具應用實務班

GitHub Copilot AI 程式碼編輯工具應用實務班

讓學員瞭解有效地使用該工具來加速開發流程、提高程式碼品質和生產力。課程重點放在以 JavaScript 程式語言為例,介紹 Copilot 的基本原理、使用方法和最佳實踐。

輸入折扣碼 TC1456JA 還可以額外獲得 NT$500 優惠喔。

ChatGPT X Clipchamp AI 生成影片、配音與字幕應用實戰班

ChatGPT X Clipchamp AI 生成影片、配音與字幕應用實戰班

掌握Clipchamp AI的操作技巧,靈活運用Clipchamp AI進行影片編輯和創作,實現創意表達和傳播目的。

輸入折扣碼 TC1451JAN 還可以額外獲得 NT$500 優惠喔。

如何串接多種數位工具資訊?Looker Studio 資料視覺化實戰班|GoogleAds x FB廣告 x GA流量數據

如何串接多種數位工具資訊?Looker Studio 資料視覺化實戰班|GoogleAds x FB廣告 x GA流量數據

Looker Studio除了可協助使用者監控網站流量、廣告成效、選擇匯入資源的管道之外,還可以將數據資料多平台整合、數據報表即時更新、數據範本可重複套用的效益,透過自動化系統,將數據全部匯入同一個報表平台,是企業不可或缺的重要工具。

輸入折扣碼 TC1270JIA 還可以額外獲得 NT$500 優惠喔。

和我們交流

加入我們的社群,裡面會有一些技術的內容、有趣的技術梗,以及職缺的分享,歡迎和我們一起討論。