1.1 基本概念
1.1.1 VSCode
Visual Studio Code (簡稱 VS Code / VSC) 是一款免費開源的現代化輕量級代碼編輯器，支持幾乎所有主流的開發語言的語法高亮、智能代碼補全、自定義熱鍵、括號匹配、代碼片段、代碼對比 Diff、GIT 等特性，支持插件擴展，並針對網頁開發和雲端應用開發做了優化。軟件跨平台支持 Win、Mac 以及 Linux。
1.1.2 Vue
Vue.js 是目前最火的一個前端框架，它和Angular.js、React.js 一起，並成為前端三大主流框架。Vue.js 是一套構建用戶界面的框架，只關注視圖層，它不僅易於上手，還便於與第三方庫或既有項目整合。（Vue有配套的第三方類庫，可以整合起來做大型項目的開發），前端的主要工作，主要負責MVC中的V這一層，主要工作就是和界面打交道，來制作前端頁面效果。Vue 的核心庫只關注視圖層，它不僅易於上手，還便於與第三方庫或既有項目整合。
1.2 軟件安裝
1.2.1 下載軟件
官網直接下載就行。
https://code.visualstudio.com/Download
1.2.1 插件安裝
安裝vue插件vetur，實現支持vue文件的代碼高亮
安裝插件： 點擊左邊的Extensions圖標，輸入 vetur ，找對對應版本然后點擊install即可
同樣方式安裝ESLint 插件：
如下圖：
1.2.2 安裝node.js
下載地址：https://nodejs.org/en/download/。下載完成后默認安裝，安裝完成后打開cmd 輸入下面的命令查看是否成功安裝（npm是一起安裝的）
C:\Users\45014>node -v
v8.11.3
C:\Users\45014>npm -v
5.6.0
C:\Users\45014>
1.2.3 使用腳手架安裝項目
點擊Terminal菜單，選擇new Terminal，創建一個命令行終端窗口，然后切換到對應的准備存放代碼的目錄
輸入：vue init webpack vue_test回車，然后輸入工程名稱vue_test
如下提示則成功：
按照說明輸入
PS D:\Study\code\vue> cd vue_test
PS D:\Study\code\vue\vue_test> npm run dev
> vue_test@1.0.0 dev D:\Study\code\vue\vue_test
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
13% building modules 27/31 modules 4 active ...:\Study\code\vue\vue_test\src 95% emitting
DONE Compiled successfully in 6043ms 9:10:00 PM
I Your application is running here: http://localhost:8080
打開瀏覽器輸入：http://localhost:8080
1.2.4 學習vueAdmin-template
vueAdmin-template是 一個簡單的 vue admin 管理后台 它只包含了 Element UI & axios & iconfont & permission control & lint ，這些是必須的
GitHub地址：https://github.com/PanJiaChen/vueAdmin-template#vueadmin-template，
下載后解壓D:\code\vueAdmin-template
然后在VSCODE中選擇文件菜單打開目錄（對應下載的目錄），打開后展現如下：
1.2.5 啟動vueAdmin-template工程
點擊Terminal菜單，選擇new Terminal，創建一個命令行終端窗口，目錄默認為當前代碼目錄。
輸入D:\code\vueAdmin-template> npm install
安裝完成之后（需要等一段時間）
輸入D:\code\vueAdmin-template> npm run dev
自動打開瀏覽器並顯示如下界面：
--over--，后面可以繼續學習