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

技術基礎

開發以前，請先熟悉下面的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 的介紹頁面。

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

源碼下載

後端：https://gitee.com/liuge1988/kitty

前端：https://gitee.com/liuge1988/kitty-ui.git

---

做者：朝雨憶輕塵
出處：https://www.cnblogs.com/xifengxiaoma/ 版權全部，歡迎轉載，轉載請註明原文做者及出處。