學習Vue.js #01 開發環境建置

近年來Javascript居然越來越嚴謹,基於Javascript之上的應用如雨後春筍般出現!
先是node.js再來是Vue.js,接下來還是很有淺力的樣子?連以前從來不碰Javascript的教授都開始學node.js!
為什麼要用Vue.js?因為想要用Vue.js接其他套件將動態網頁轉成靜態~
總之,來試試看吧!

Step 1

確認有沒有安裝node.js

若沒安裝node,請直接用『brew install node』安裝。
注意,安裝時不需要用sudo!否則之後要npm安裝套件時會出問題!

 

Step 2

安裝Vue.js

用npm安裝Vue現在的最後穩定版(latest stable)『 npm install -g vue 』
記得加上『 -g 』global  全域之意!
安裝完畢後看一下Vue.js有沒有裝好!『 vue -V 』

 

Step 3

檢查有無安裝yarn

贊助廣告

列出npm之下裝了哪些軟體『 npm -g list –depth=0 』

 

接下來所有Vue.js專案都會以yarn新建Vue.js專案管理屬於各專案自身所需的軟體
(但也可以選擇不要~只是因為yarn速度比較快而已)

可以透過上步驟的指令檢查有沒有yarn
若無安裝,一樣直接用npm安裝!『 npm install -g yarn 』

 

Step 4

建立Vue.js專案

『 vue init webpack <專案名稱>』
過程中Vue會問一系列10個問題,有的是需要你輸入Y/n,有的是用選的。
請依據自己的需求設定!
其中第12行就是在問你要使用 npm 或 yarn 來建立專案
由於上面步驟已經先安裝yarn ,所以我選擇 yarn,速度會比較快~

 

Step 5

執行Vue.js專案

進入Vue.js專案資料夾,執行專案『 yarn run dev 』

 

 

Andy Wang

站在巨人的肩膀上仍須戰戰兢兢!

發表迴響

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料