一、什麼是 Vue
Vue 是一個用於構建用戶界面的漸進式框架「注意讀音類似於 View，作者的初衷也是讓其起 View 的功能」，Vue 只注重視圖層，這點和 React 的是一模一樣的，Vue的特點：
- 簡單、易用
- 靈活
- 高效
二、Vue 環境搭建
安裝 node，使用 npm 和 yarn 首先要安裝 node，可以去官網下載：https://nodejs.org/en/download/current/
下載對應版本，然後安裝即可。
在Mac電腦上也可以通過 Homebrew 安裝
brew install node
安裝完 node 會自帶 npm「node 的包管理器」,安裝完成以後在命令行中輸入
node -v
看到以下 node 的版本信息則表示安裝成功了
:node -v
v12.13.0
使用 npm 安裝 Vue
在命令行輸入以下命令即完成安裝
// 全局安裝
npm install -g vue
如果出現報錯請輸入sudo或者在root身份下進行安裝
sudo install -g vue
使用 vue-V 查看是否安裝成功，如果顯示出版本號則表示安裝成功
:vue -V // 一定要注意是大寫的-V
2.9.6
使用 yarn「替代 npm 的包管理器」 安裝
要使用 yarn 必須先安裝 yarn , 在這裏我們使用 npm 安裝 yarn
// 全局安裝
npm install yarn -g
配置yarn環境變量，例如我的環境變量存放於 ~/.bash_profile ，通過vim指令編輯：
vim ~/.bash_profile
進行如下配置：
# yarn
export PATH="$PATH:`yarn global bin`"
使用 cli 「命令行工具」
我們除了上面的引用或安裝 vue 外，還可以使用 vue-cli「腳手架工具」
vue-cli 是一個腳手架工具「就是一個工具集合，可以快速的創建一個 vue 項目」
同樣使用 npm or yarn 來安裝 vue-cli，我們全局安裝
npm install -g vue-cli
// 或者使用
yarn add -g vue-cli
安裝完以後，我們輸入 vue -V 查看是否安裝成功，或使用 vue-list 查看
看到上面內容則證明我們的 vue-cli 腳手架工具安裝成功了
三、使用 vue-cli 來創建一個項目
1、新建一個目錄，我這裏放在git目錄下
cd git
mkdir vue-demo
cd vue-demo
2、使用 vue-cli 創建項目
vue init webpack firstvuedemo
這裏的 vue 項目是基於 webpack 的，使用上述命令我就可以創建一個名爲 firstvuedemo 的 vue 項目
當我們輸入上述命令以後就會開始下載模版，然後會提示輸入項目名「自己寫一個即可」，完了一路回車，出現 yes就直接回車「 目前先這樣搞，別管爲什麼，但是如果看過輝哥的 react - antd pro教程就會了解，最後提示使用 npm 還是 yarn 來管理包，我選擇的是 yarn 」
踩坑指南：在 Use Eslint Loader (y/n)？步驟時輸入 n 再回車，否則選擇了useEslint規範，從而導致不能隨意Formmat排版，如果不小心選擇了yes解決方案如下：
1.打開/config/index.js文件，找到：
// Use Eslint Loader?
// If true, your code will be linted during bundling and
// linting errors and warnings will be shown in the console.
// 將 true更改爲false即可
useEslint: false,
2.打開根目錄的/.eslintrc.js
// add your custom rules here
rules: {
// allow async-await
// 配置如下
'generator-star-spacing': 'off',
'indent': ['off', 0],
"space-before-function-paren": 0,
// allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
}
當我們成功創建出了項目，如果大家使用 npm 或是 yarn 出現安裝不了的情況，那麼切換一下源即可「tabao 的源就非常不錯」，我們根據上面的提示，進入到項目中，然後運行一下項目看看結果
3、運行項目
cd firstvuedemo
//然後運行
yarn run dev
我們就會看到使用 webpack 啓動服務，然後編譯，完成以後提示項目運行的地址默認是：http://localhost:8080
我們在瀏覽器中輸入 http://localhost:8080 回車查看結果
怎麼樣，我們使用 vue-cli 就成功創建出一個 vue 項目，只不過他默認的主頁是 Vue 的一些介紹，要搞成自己項目修改即可「後面說到 vue-cli 創建項目會說到的」，怎麼樣？腳手架創建項目簡單吧。
四、VS Code插件配置
Vetur （ 排版.vue的格式，Mac默認快捷鍵 shift + command + F ）
當然可以通過 Code -> Preferences -> KeyBoard Shortcuts ，進行修改綁定快捷鍵。