本教程經親測支援最新版4.0.1vue-element-admin

安裝node.js及npm

npm官網地址
下載node 8.12.0，安裝很簡單一直下一步就可以了。
win+R 輸入cmd進入命令列 輸入

node -v
npm -v

出現以上資訊說明node.js及npm安裝成功

安裝nrm

nrm是一個方便的npm的映象倉庫管理工具，可以便捷的在各個映象倉庫之間切換。

npm install -g nrm --registry=https://registry.npm.taobao.org
//從淘寶映象下全域性安裝nrm

輸入

nrm ls   
//展示nrm映象
nrm use taobao
//使用淘寶映象
nrm ls
//展示nrm映象

nrm安裝及切換映象成功。

安裝vscode

vscode官網
選擇自己對應的版本下載，這裡使用的是64bit的zip包

如果出現連線超時的情況，可能是由於公司內網的攔截，使用熱點就可以下載。
將壓縮包直接解壓，資料夾下有一個code檔案，直接執行就可以使用vscode了。

漢化

開啟vscode後
Windows、Linux 快捷鍵是：ctrl+shift+p

macOS 快捷鍵是：command + shift + p
搜尋 Configure Language，選擇下圖第一個選項。

將"locale":“en” 修改為 “locale”:“zh-CN” ，儲存檔案。
選擇左側左下方的擴充套件按鈕，搜尋chinese 安裝下圖的外掛

安裝成功以後重啟vscode，語言就改成中文了。

推薦安裝一些好用的擴充套件

Auto Close Tag 自動閉合HTML標籤
Auto Rename Tag 修改HTML標籤時，自動修改匹配的標籤
Beautify 程式碼美化
ESLint ESLint外掛，高亮提示
File Peek 根據路徑字串，快速定位到檔案
HTML CSS Support css提示（支援vue）
HTMLHint HTML格式提示
JavaScript (ES6) code snippets ES6語法程式碼段
Vetur Vue程式碼高亮及補全
VS Color Picker vs顏色選擇器
Vue 2 Snippets Vue2程式碼補全

安裝vue-element-admin

github地址
將專案下載到本地解壓後，cmd進入到對應解壓資料夾下

同時vscode開啟專案資料夾，將package.json檔案中dependencies下的"echarts": “^4.1.0” 刪除並儲存。
此處是由於我在安裝過程中發現echart在淘寶映象下安裝會出錯，先安裝其它模組，最後單獨使用cpnm安裝echart

ctrl+`開啟終端，請先確認nrm在淘寶映象下

nrm ls //檢視nrm使用的映象

可以看到*在taobao的那一列，表示正在使用taobao映象，不在則輸入

nrm use taobao //使用淘寶映象

開始安裝依賴

npm i 
//安裝依賴

依賴安裝完成後，還需要將Npm切換為cnpm單獨安裝echarts

nrm ls
nrm use cnpm
npm install echarts@4.1.0 -S   單獨從cnpm安裝echarts依賴

我發起的echarts安裝問題

如果有報錯，請先閱讀專案github 中的issues和wike及文件看看是否有類似問題。

我在安裝過程中碰到的問題

• 安裝過程中報錯沒有許可權，可以嘗試使用管理員身份執行命令列，並將npm升級到最新版本。

npm cache clean --force 清除Npm快取
npm install -g npm@latest --force 升級npm到最新
npm cache clean --force 清除Npm快取

• 如果在echarts.js處安裝報錯，請按照上面的步驟先刪除echarts模組，先將其他模組安裝完成後，最後使用cnpm單獨安裝echarts。

安裝成功後使用
npm run dev
就可以在本地啟動專案了
需要注意的是，此專案不支援低版本瀏覽器（如IE），可以使用谷歌，搜狗等瀏覽器開啟。
執行成功後本地訪問地址
vue-element-admin作者展示的線上網站

框架登陸原理簡單分析

框架登陸原理簡單分析