# Vuejs 行前安裝 > 只要花一杯咖啡的時間，隨即建立 VueJS 最佳環境 ## 安裝流程 (看完就可以往下滾動，按照步驟從 Step1 開始囉！) ```flow st=>start: 開始 e=>end: 結束 op=>operation: 必備工具下載安裝 op2=>operation: 去 GitHub 看看 REPO 資訊並下載(clone) 下來 op3=>operation: 選擇 MacOS 還是 Windows 教學? op4=>operation: 安裝 NodeJS op5=>operation: 切換到載下來的 REPO 資料夾底下 op6=>operation: npm install 哩哩摳摳的東西 op7=>operation: 完成啦 🎉 st->op->op2->op3->op4->op5->op6->op7 ``` ## Step1: 必備工具下載安裝 > 寫程式用的筆記本軟體 - [Visual Studio Code](https://code.visualstudio.com/) + 以下為 VScode 需搭配安裝的外掛 + [JavaScript (ES6) code snippets](https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets) + [Vue](https://marketplace.visualstudio.com/items?itemName=jcbuisson.vue) <br/> - [Vue.js Devtool](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd) + Vue 搭配的 console 工具 + 按右上角 Add toChrome <br/> - [新同文堂 Chrome 附加元件](https://chrome.google.com/webstore/detail/new-tong-wen-tang/ldmgbgaoglmaiblpnphffibpbfchjaeg?hl=zh-TW) （optional） + 看 doc 簡轉中用 <br/> ## Step2: 下載 REPO > workshop 當天會用到的專案資料 - https://github.com/tobychung/pixnet-workshop-vue-lab > 會 Git 嗎？ - 會 Git + 到終端機鍵入 ```javascript git clone https://github.com/tobychung/pixnet-workshop-vue-lab.git ``` - 不會 Git + 到右上角按綠色按鈕 Clone + 然後按 Download ZIP - <h4 style="color: red"> 注意：下載好後煩請拖曳資料夾到 "桌面" 底下</h4> - <h4 style="color: blue"> OK！ 請移步至 >> Step3-1 </h4> <br/> <br/> ## Step3-1: Windows 環境請來這邊 :wave: > :point_down: 直接看教學影片 {%youtube 9jkSQJeVj-w %} * 安裝 NodeJS 1. Node js 安裝下載: 32bit：https://nodejs.org/dist/v10.13.0/node-v10.13.0-x86.msi 64bit：https://nodejs.org/dist/v10.13.0/node-v10.13.0-x64.msi 2. 下載 node 安裝檔後點擊安裝 3. 開啟 vscode 開啟資料夾 (建議放在 C：\\ 底下) 4. [Ctrl + `] (~號位置) 開啟 終端機 5. node -v 確認 node 版本為 8 以上 6. OK！ 請移步至 >>`Step4` > ref：[Node.js tutorial in Visual Studio Code](https://code.visualstudio.com/docs/nodejs/nodejs-tutorial) ---- ## Step3-2: Mac 環境請來這邊 :wave: > :point_down: 直接看教學影片 {%youtube mUW6t_4vfSg %} * 安裝 NodeJS （這裡又分成兩個方法，看您喜歡哪一種擇一喔！） ### 方法 1 --------- 1. 直接參考官網上的說明安裝 - https://cn.vuejs.org/v2/guide/installation.html 2. 安裝 Node.js 以及 npm 套件管理工具 - https://nodejs.org/en/ > 建議安裝 v10.13.0 LTS 版本 > *Node.js v10.13.0 to /usr/local/bin/node > npm v6.4.1 to /usr/local/bin/npm* 3. 檢查是否安裝成功 - 打開終端機(Terminal) 輸入圖示內的指令檢查回傳內容是否有相關的資訊 ![](https://i.imgur.com/Sxfxb99.png) 6. OK！ 請移步至 >>`Step4` ### 方法 2 --------------- （勇者挑戰區） 1. 下載安裝 nvm ``` javascript curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.5/install.sh | bash ``` + 如果需要安裝XCode - 需要 XCode8.3.3 (系統 10.13.6 以上) - XCode載點： https://developer.apple.com/download/more/ - 或是透過下方 ```javascript= xcode-select --install ``` 2. 設定環境變數 （此步驟若 shell 是 zsh 請改成 `source ~/.zshrc`） ``` javascript vim ~/.bashrc ``` - 按下 `i` 進入編輯模式 - 在最下面貼上 ``` javascript export NVM_DIR="$HOME/.nvm" [ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh" # This loads nvm ``` 3. 使改動生效 （此步驟若 shell 是 zsh 請改成 `source ~/.zshrc`） ``` javascript source ~/.bashrc ``` 4. 試試看有無安裝完成 ``` javascript nvm -v ``` 5. 用 nvm 安裝 node 環境 （只要是版本 > 8 以上都 ok 喔！） ``` javascript nvm install 8 ``` ``` javascript nvm use 8 ``` 6. OK！ 請移步至 >> `Step4` <br/> <br/> ## Step4: 切換到載下來的 REPO 資料夾底下裝一波 1. 下載好之後切換位置到 "下載下來的資料夾" 底下 ``` javascript cd <資料夾路徑>/pixnet-workshop-vue-lab ``` - 舉例: `cd ~/Desktop/pixnet-workshop-vue-lab` (建議下載 REPO 到桌面) 2. 確定好自己是不是在 REPO 資料夾下 > 如果是在 pixnet-workshop-vue-lab 底下就對啦！ ``` javascript pwd ``` 6. 安裝 相關套件 ``` javascript npm install ``` 7. 重新建構 `node-sass` ``` javascript npm rebuild node-sass ``` 8. 一切就緒，把它跑起來吧！ ``` javascript npm run dev ``` 9. 正常的話應該會看到左下角有百分比跑跑跑 :running: 10. 跑完終端機會顯示一串網址 http://localhost:8080 11. 當您點開 [上述網址](http://localhost:8080) 遇到以下畫面時即表示您環境建置完成囉！ :beer: ![](https://i.imgur.com/2WIg403.png)