安裝配置node.js
安裝vue並搭建前台項目
前台項目引入elementUI
前台項目引入axios
本篇主要記錄前台項目搭建之前的環境准備，首先要安裝node.js(node官網),進行相關配置等。
安裝配置node.js
進入node.js 官網下載你電腦對應的安裝包，下載完雙擊運行下載的軟件一直next安裝，安裝完后，你可以在命令行中查看是否安裝成功。windows鍵加R打開運行窗口，輸入cmd，打開命令行，再輸入node -v，回車，就可以看到node的版本
node.js自帶npm（包管理器），node安裝完成之后，npm的本地倉庫默認安裝在C盤用戶目錄下，如下圖所示
現在需要將上圖中2個目錄移動到安裝node.js的目錄中下，我本地是安裝在D盤，現在在D盤node.js的安裝目錄新建一下2個目錄 npm 和npm-cache
cmd命令行運行以下2條命令：
npm config set prefix "D:\nodejs\node_global"
npm config set cache "D:\nodejs\node_cache
執行之后 查看npm 本地倉庫 輸入命令npm list -global 如下 目錄已經發生改變
配置鏡像提升速度
輸入命令 配置鏡像站
npm config set registry=http://registry.npm.taobao.org
查看配置
npm config list
檢查鏡像站是否可行命令1
npm config get registry
1
檢查鏡像站是否可行命令2：
npm info vue
1
執行 命令
npm install npm -g
1
查看global 里有什么模塊
注意，此時，默認的模塊D:\nodejs\node_modules 目錄將會改變為D:\nodejs\node_global\node_modules 目錄，如果直接運行npm install等命令會報錯的。
需要添加環境變量NODE_PATH 內容是：D:\nodejs\node_global\node_modules(對應實際安裝路徑！！)
重新打開cmd讓環境變量生效
添加到path環境變量中去
到此環境准備完成
安裝vue並搭建前台項目
全局安裝Vue
npm install vue -g
1
其中 dist 是distribution的縮寫。理解為最終發布的產品，也是我們需要的東西
安裝vue-router
vue-router 一般項目都會用到建議全局安裝
npm install vue-router -g
1
安裝腳手架vue-cli
npm instal -g vue-cli
1
搭建前台項目
進入你想要存放項目的目錄執行以下命令
vue init webpack vueDemo
1
USE ESLint to you code 這一項是是否啟用代碼規范檢測，如果不需要，可以不用開啟。
初始化項目安裝依賴
進入項目路徑下執行命令
npm install
1
啟動項目
npm run dev
1
前台項目引入elementUI
Element-UI是餓了么前端團隊推出的一款基於Vue.js 2.0 的桌面端UI框架，手機端有對應框架是 Mint UI 。先安裝模塊，然后在項目中引入
npm i element-ui -S
1
前台項目引入axios
Axios: 是一個基於 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中
剛才搭建的項目中沒有該模塊
引入elementUI一樣，先安裝，然后在項目中引入
main.js中引入
前台項目搭建基本搭建完畢，下一篇將介紹axios使用、跨域處理以及mock.js使用
---------------------
作者：qq_27095799
來源：CSDN
原文：https://blog.csdn.net/qq_27095799/article/details/82145607
版權聲明：本文為博主原創文章，轉載請附上博文鏈接！