[Day02] 使用Vue Cli工具建立前端專案 | vscode vue套件
本篇的內容包含如何安裝Node.js如何安裝VisualStudioCode如何透過npm安裝VueCli如何透過VueCli設定,產出專案框架VueCli簡介VueCli是一個Vue官方所推出、基於Vue.js的專案建立工具,可以透過簡單的設定,產出一包基本的Vue專案。其中主要包含幾個npm套件:@vue/cli:是一個安裝於全域的npm套件,提供終端機中的vue指令@vue/cli-service:cli服務框架,會部分安裝在每個VueCli的專案中。在開發環境需要依賴此框架協助我們處理有關WebPack等等部分。事前準備安裝Node.jsVueCli需要搭配Node.js8.9以上的版本(官方推薦8.11.0以上為最佳),...
本篇的內容包含
如何安裝Node.js 如何安裝Visual Studio Code 如何透過npm安裝Vue Cli 如何透過Vue Cli設定,產出專案框架 Vue Cli簡介Vue Cli是一個Vue官方所推出、基於Vue.js的專案建立工具,可以透過簡單的設定,產出一包基本的Vue專案。其中主要包含幾個npm套件:
@vue/cli:是一個安裝於全域的npm套件,提供終端機中的vue指令 @vue/cli-service:cli服務框架,會部分安裝在每個Vue Cli的專案中。在開發環境需要依賴此框架協助我們處理有關WebPack等等部分。 事前準備 安裝Node.jsVue Cli需要搭配Node.js 8.9 以上的版本(官方推薦8.11.0以上為最佳),可以直接前往官網下載[1]
這邊可以選擇左邊的按鈕,10.16.3 的LTS(Recommended For Most Users,推薦給大多數用戶使用的版本)版本。
如果已經安裝過Node,卻不確定版本的話,可以透過本篇文章確認安裝狀態段落提供的指令進行版本確認。下載完成後,可以直接透過精靈進行安裝預設的路徑是C:Program Files odejs,基本上都按照預設的設定逐步執行即可。
確認安裝狀態為了確定安裝是否有成功,可以打開命令提示字元來確認安裝狀態。
node --version輸入以上指令,就會顯示出Node的版本,表示安裝成功。
延伸閱讀:nvm-幫助你在同一台電腦上,管理不同版本Node.js的工具nvm GitHub[2]
安裝Visual Studio CodeVisual Studio Code是微軟推出的跨平台程式碼編輯器,可以在官網[3]下載基本上按照預設的設定安裝即可。
使用Node安裝Vue Cli開啟Visual Studio Code,可以透過熱鍵ctrl+‵,或者從檢視>終端機選單中叫出終端機透過以下指令可以全域安裝@vue/cli套件(目前安裝版本:3.9.2)
npm i...