1、什麼是vue-cli

vue-cli 官方提供的一個腳手架，用於快速生成一個 vue 的專案模板；

預先定義好的目錄結構及基礎程式碼，就好比咱們在建立 Maven 專案時可以選擇建立一個骨架專案，這個骨架專案就是腳手架，我們的開發更加的快速；

主要的功能：

• 統一的目錄結構
• 本地除錯
• 熱部署
• 單元測試
• 整合打包測試

2、需要的環境

• Node.js：http://nodejs.cn/download/

  安裝就無腦下一步就好，安裝在自己的環境目錄下

  確認nodejs安裝成功：

• cmd 下輸入 node -v，檢視是否能夠正確打印出版本號即可！

• cmd 下輸入 npm -v，檢視是否能夠正確打印出版本號即可！

  這個npm，就是一個軟體包管理工具，就和maven差不多！

  安裝 Node.js 淘寶映象加速器（cnpm）

  這樣子的話，下載會快很多~

  # -g 就是全域性安裝
  npm install cnpm -g
  
  # 或使用如下語句解決npm速度慢的問題
  npm install --registry=https://registry.npm.taobao.org
  

  安裝過程可能有點慢~，耐心等待！雖然安裝了cnpm，但是儘量少用！

  全域性安裝的位置：C:\Users\86152\AppData\Roaming\npm\node_modules

  安裝 vue -cli

cnpm install vue-cli-g
#檢視可以基於哪些模板建立 vue 應用程式，通常我們選擇webpack
vue list
 

3、第一個vue-cli應用程式

建立

1、建立一個Vue專案，我們隨便建立一個空的資料夾在電腦上，我這裡在D盤下新建了一個目錄

E:\ideaProject\vue

2、建立一個基於 webpack 模板的 vue 應用程式

#1、首先需要進入到對應的目錄 E:\ideaProject\vue
#2、這裡的myvue是專案名稱，可以根據自己的需求起名
vue init webpack myvue

一路都選擇no即可；

說明：

• Project name：專案名稱，預設回車即可
• Project description：專案描述，預設回車即可
• Author：專案作者，預設回車即可
• Install vue-router：是否安裝vue-router，選擇n不安裝（後期需要再手動新增）
• Use ESLint to lint your code：是否使用ESLint 做程式碼檢查，選擇n不安裝（後期需要再手動新增）
• Set up unit tests：單元測試相關，選擇n不安裝（後期需要再手動新增）
• Should we run npm install for you after the,project has been created：建立完成後直接初始化，選擇n，我們手動執行；

初始化

cd myvue
npm install

執行完成後，目錄多了很多依賴

如果初始化報錯，看報錯提示，執行推薦方法修復

執行

npm run dev

執行結果：

瀏覽器輸入地址測試：http://localhost:8080

結束

## ctrl+c，然後選y