一、安裝腳手架之前必須安裝node
1.檢測此電腦是否安裝node-js win+R ==> 輸入指令 node -v
2.如果出現不是內部指令則沒有安裝
3.打開node官網，下載對應位數的node
4.一般安裝在c盤當中
5. 安裝過程中會出現一個很長很長的單選框，勾上
6.安裝完成后會彈出一個對話框 直接關閉
7.打開cmd 輸入node -v
8.出現版本號的話說明已經安裝成功
9.再在對話框里輸入npm -v，檢測node包管理是否安裝 安裝node時自帶
10.安裝cnpm(淘寶鏡像) 指令：npm install -g cnpm --registry=https://registry.npm.taobao.org
11.安裝完成后 輸入 cnpm -v 檢測是否安裝成功
二、安裝腳手架
安裝vue腳手架之前，先安裝好node環境！！!
1. 安裝webpack
npm i webpack-cli -g #全局安裝, linux和Mac 需要加sudo
webpack-cli -v #安裝后, 可查看版本
2. Vue CLI 2.x
2.1 安裝
npm i vue-cli -g #全局安裝, linux和Mac 需要加sudo
vue -V #查看版本號（大寫V）
2.2 創建項目
vue init webpack 項目名字
創建項目時一些步驟選項
步驟1 項目名稱
Project name vue-cli-2.x
步驟2 項目描述
Project description vue-cli-2.x demo
步驟3 項目作者
Author lanxy
步驟4 是否安裝vue-router
Install vue-router? Yes
步驟5 是否添加ESLint 代碼檢查工具
Use ESLint to lint your code? Yes
步驟6 選擇ESLint 檢查模式 （步驟5不選時無步驟6） / 凱迪選擇的是no
? Pick an ESLint preset (Use arrow keys)
❯ Standard (https://github.com/standard/standard) #標准配置
Airbnb (https://github.com/airbnb/javascript) #Airbnb配置
none (configure it yourself) #自定義
步驟7 設置單元測試
? Set up unit tests No
步驟8 e2e測試
? Setup e2e tests with Nightwatch? No
步驟9 選擇項目的包管理方式 npm /yarn
? Should we run `npm install` for you after the project has been created? (recommended)
❯ Yes, use NPM
Yes, use Yarn
No, I will handle that myself
2.3 啟動項目
進入創建的項目當中 cd+項目名稱
npm run dev 啟動項目
3. Vue CLI 3.x/4.x
安裝Vue CLI 3.x/4.x 默認會覆蓋Vue CLI 2.x的，所以安裝時，如果以后不需要使用Vue CLI 2.x 那么需要把2.x版本先卸載掉, 如果還想同時使用，則可通過安裝CLI的橋接工具來做兼容
npm uninstall vue-cli #卸載Vue CLI 2.x
或者安裝橋接工具來兼容兩者
npm i -g @vue/cli-init #安裝橋接工具 （linue和Mac 需要加sudo）
3.1 安裝Vue CLI 3.x/4.x （目前最新是4.x）
npm install -g @vue/cli #自動安裝最新版本
或者 cnpm install -g @vue/cli (推薦使用)
3.2 創建項目
vue create 項目名
創建項目過程步驟選項說明：
步驟1 選擇預設配置，還是手動配置
? Please pick a preset:
default (babel, eslint) #默認配置
❯ Manually select features #選此項，進行手動配置
步驟2 選擇添加的配置項（上下鍵可移動， 空格鍵選擇或者取消選擇）下面實心原點表示選中項
? Please pick a preset: Manually select features
? Check the features needed for your project:
◉ Babel
◯ TypeScript
◯ Progressive Web App (PWA) Support #漸進式Web應用程序
◉ Router #vue-router（vue路由）
◉ Vuex #vuex（vue的狀態管理模式）
◉ CSS Pre-processors #CSS 預處理器（如：less、sass）
❯◉ Linter / Formatter #代碼風格檢查和格式化（如：ESlint）
◯ Unit Testing #單元測試（unit tests）
◯ E2E Testing #e2e（end to end） 測試
步驟3 選擇是否使用history router：Vue-Router 利用了瀏覽器自身的hash 模式和 history 模式的特性來實現前端路由（通過調用瀏覽器提供的接口）
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) #選n
步驟4 選中css預處理器
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
Sass/SCSS (with dart-sass)
Sass/SCSS (with node-sass)
❯ Less #vue 一般搭配此項
Stylus
步驟5 選擇ESLint 的代碼檢測模式 (步驟2如果沒有選Linter / Formatter項，則無步驟5和6)
? Pick a linter / formatter config:
ESLint with error prevention only #只有錯誤預防
ESLint + Airbnb config #Aribnb配置
❯ ESLint + Standard config #標准配置
ESLint + Prettier #漂亮配置
步驟6 ESLint 的檢查時機
? Pick additional lint features:
◉ Lint on save #保存時檢查
❯◯ Lint and fix on commit #commit時檢查
步驟7 選擇如何存放配置
? Where do you prefer placing config for Babel, ESLint, etc.?
In dedicated config files #獨立的文件放置
❯ In package.json #放到package.json中
步驟8 是否保存本次配置（保存之后在下次創建項目時即可選擇預設置項）
? Save this as a preset for future projects? (y/N)
# 如果選擇了yes 最后會提示輸入保存的名稱，輸入回車即可
3.3 啟動項目
npm run serve
全部操作已完成