<style> .markdown-body{ font-family: "微軟正黑體" ; } </style> # 安裝vue cli 2.0 ###### tags: `vue` ### 安裝需求 1.Vue CLI需要Node.js版本(>=6.x,8.x版本) 2.npm version 3+ 3.git ### 查看目前版本指令 node.js版本 ``` node -v ``` npm 版本 ``` npm -v ``` ### 使用以下命令安裝 ``` $ npm install -g vue-cli ``` - -g 是 npm 安裝語法將套件安裝在全域環境的意思。 - npm（全稱 Node Package Manager，即「node包管理器」）是Node.js預設的、以JavaScript編寫的軟體套件管理系統。 ### 安裝完後 - 可使用命令列看vue cli 有哪些命命可使用 輸入以下↓ ``` vue ``` ![](https://i.imgur.com/bVuNsHl.png) > init - 開起一個專案 > list - 官方提供模板 ### vue list 官方模板 ![](https://i.imgur.com/xgs5Huu.png) - webpack - 一個功能齊全的Webpack + vue-loader設置，具有熱重載，linting，測試和css提取功能。 - webpack-simple - 一個簡單的Webpack + vue-loader設置，用於快速原型設計。 - browserify -全功能Browserify + vueify設置用熱重裝載，掉毛＆單元測試。 - browserify -simple - 一個簡單的Browserify + vueify設置，用於快速原型設計。 - pwa - 基於webpack模板的vue-cli的PWA模板 -simple - 單個HTML文件中最簡單的Vue設置 ### 自定義模板 ``` $ vue init <tempate-name> <project-name> ``` ![](https://i.imgur.com/5yvxCBU.png) - Project name <project-name> 通常名稱會自動繼承上方指令下編譯的名稱，且不可混入特殊符號 - Project decription A Vue.js project 描述檔案 - Author(xxx) 作著名稱 - Vue blid 〉Runtime + Complier: recommemded for most users 建議選擇他所推薦的 >因還在學習狀態 後面很多都選擇no 以及自己手動運行 ### 準備啟動模板 ![](https://i.imgur.com/Rfn4baW.png) 1. 先回到 該資料夾 ``` cd <project-name> ``` 2. 安裝 ``` npm install ``` 3.運行 ``` npm run dev ``` ### 成功啟用 ![](https://i.imgur.com/apO4Q3V.png) >並會告知現在啟用於哪裡 ### 切換至啟用位置 ![](https://i.imgur.com/XF6pfpa.png) >瀏覽器並會顯示這個頁面 到這個頁面表示已經**安裝完成**囉!