---
# System prepended metadata

title: 安裝vue cli 2.0
tags: [vue]

---

<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)
>瀏覽器並會顯示這個頁面
到這個頁面表示已經**安裝完成**囉!




