Vue + Element UI 實現(xiàn)權(quán)限管理系統(tǒng) 前端篇（一）：搭建開發(fā)環(huán)境?

技術(shù)基礎(chǔ)

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

• vue.js2.0中文, 優(yōu)秀的JS框架
• vue-router, vue.js 配套路由
• vuex，vue.js 應(yīng)用狀態(tài)管理庫
• Element，餓了么提供的UI框架

開發(fā)環(huán)境

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

安裝Visual Studio Code

下載地址：?官網(wǎng)下載地址

Visual Studio Code 是一款非常優(yōu)秀的開源編輯器，非常適合作為前端IDE, 根據(jù)自己的系統(tǒng)下載相應(yīng)的版本進行安裝。

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

官網(wǎng)文檔：Documentation for Visual Studio Code

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

安裝NodeJS

下載地址：?nodejs中文網(wǎng)

到官網(wǎng)下載自己系統(tǒng)對應(yīng)的版本，這里我們下載Windows系統(tǒng)的64位zip文件，下載完成后解壓，可以看到里面有一個node.exe的可執(zhí)行文件。

把Node添加到系統(tǒng)環(huán)境變量里面，打開cmd命令行，輸入npm -v，如果出現(xiàn)如下圖的顯示，說明已經(jīng)安裝正確。

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

sudo npm install npm -g #linux

npm install npm -g　　# windows

可以看到升級之后，再次執(zhí)行 npm -v 查看版本已經(jīng)升級到 6.4.0 了。

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

中文官網(wǎng)：首頁 | Node.js v20 文檔

菜鳥學(xué)堂：Node.js 教程 | 菜鳥教程

安裝 webpack

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

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

npm install webpack -g

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

菜鳥學(xué)堂：Webpack 入門教程 | 菜鳥教程

安裝 vue-cli

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

npm install vue-cli -g

淘寶鏡像

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

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

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

安裝 Yarn

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

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

npm i yarn -g --verbose

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

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

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

使用 Yarn 跟 npm 差別不大，具體命令關(guān)系如下：

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]

創(chuàng)建項目

環(huán)境已經(jīng)搭建完成，現(xiàn)在我們通過 vue-cli 來生成一個項目，名稱為 kitty-ui。

vue init webpack kitty-ui

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

命令執(zhí)行完畢，生成項目結(jié)構(gòu)如下

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

cd kitty -ui
yarn install

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

安裝完成之后，執(zhí)行應(yīng)用啟動命令，運行項目。

npm run dev

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

瀏覽器訪問對應(yīng)地址，如這里的: http://localhost:8080，會出現(xiàn) vue 的介紹頁面。

到此，我們的項目腳手架就建立起來了。文章來源地址http://www.zghlxwxcb.cn/news/detail-707542.html

到了這里，關(guān)于Vue + Element UI 前端篇（一）：搭建開發(fā)環(huán)境的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！