使用VSCode建立第一個VUE項目

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--，後面能夠繼續學習