技術基礎

開發之前，請先熟悉下面的4個文檔

• vue.js2.0中文, 優秀的JS框架
• vue-router, vue.js 配套路由
• vuex，vue.js 應用狀態管理庫
• Element，餓了麽提供的UI框架

開發環境

• Node JS（npm）
• Visual Studio Code（前端IDE）

安裝Visual Studio Code

下載地址： 官網下載地址

Visual Studio Code 是一款非常優秀的開源編輯器，非常適合作為前端IDE, 根據自己的系統下載相應的版本進行安裝。

更多 VS Code 教程可以參考以下資料

官網文檔：https://code.visualstudio.com/docs

簡書教程：https://www.jianshu.com/p/990b19834896

安裝NodeJS

下載地址： nodejs中文網

到官網下載自己系統對應的版本，這裏我們下載Windows系統的64位zip文件，下載完成後解壓，可以看到裏面有一個node.exe的可執行文件。

把Node添加到系統環境變量裏面，打開cmd命令行，輸入npm -v，如果出現如下圖的顯示，說明已經安裝正確。

如果你安裝的是舊版本的 npm，可以很容易得通過 npm 命令來升級。

sudo npm install npm -g #linux

npm install npm -g　　# windows
 

可以看到升級之後，再次執行 npm -v 查看版本已經升級到 6.4.0 了。

更多NodeJS教程可以參考以下資料

中文官網：http://nodejs.cn/api/

菜鳥學堂：https://www.runoob.com/nodejs/nodejs-tutorial.html

安裝 webpack

安裝好 npm 之後，就可以通過 npm 命令來下載各種工具了。

安裝打包工具 webpack，-g 表示全局安裝。

npm install webpack -g

更多webpack教程可以參考以下資料

菜鳥學堂：http://www.runoob.com/w3cnote/webpack-tutorial.html

安裝 vue-cli

安裝 vue 腳手架項目初始化工具 vue-cli，-g 表示全局安裝。

npm install vue-cli -g

淘寶鏡像

因為 npm 使用的是國外中央倉庫，有時候下載速度比較“喜人”，就像 Maven 有國內鏡像一樣，npm 在國內也有鏡像可用。這裏建議使用淘寶鏡像。

安裝淘寶鏡像，安裝成功後 用 cnpm 替代 npm 命令即可，如： cnpm install webpack -g 。

npm install -g cnpm --registry=https://registry.npm.taobao.org

安裝 Yarn

Yarn 是 Facebook 發布的 node.js 包管理器，它比 npm 更快、更高效，可以使用 Yarn 替代 npm 。

如果你安裝了node，就安裝了npm，可以使用下面的命令來安裝：

npm i yarn -g --verbose

npm官方源訪問速度實在不敢恭維，建議使用之前切換為淘寶鏡像，在yarn安裝完畢之後執行如下指令：

yarn config set registry https://registry.npm.taobao.org

到此為止我們就可以在項目中像使用npm一樣使用yarn了。

使用 Yarn 跟 npm 差別不大，具體命令關系如下：

npm install  => yarn install
npm install --save [package] => yarn add [package]
npm install --save-dev [package] => yarn add [package] --dev
npm install --global [package] => yarn global add [package]
npm uninstall --save [package] => yarn remove [package]
npm uninstall --save-dev [package] => yarn remove [package]

創建項目

環境已經搭建完成，現在我們通過 vue-cli 來生成一個項目，名稱為 kitty-ui。

vue init webpack kitty-ui

一路根據提示輸入項目信息，等待項目生成。

命令執行完畢，生成項目結構如下

進入到項目根目錄，執行 yarn install (也可以用 npm install，或淘寶 cnpm install，我們這裏用 yarn 會快一點) 安裝依賴包。

cd kitty -ui
yarn install

依賴包安裝完成之後，會在項目根目錄下生成 node_modules 文件夾，是下載的依賴包的統一存放目錄。

安裝完成之後，執行應用啟動命令，運行項目。

npm run dev

命令執行之後，如果顯示 “I Your application is runing here ....”，就表示啟動成功了。

瀏覽器訪問對應地址，如這裏的: http://localhost:8080，會出現 vue 的介紹頁面。

到此，我們的項目腳手架就建立起來了。

Vue + Element UI 實現權限管理系統（搭建開發環境）