開源項目renren-fast-vue開發環境部署（前端部分）

開源項目renren-fast-vue開發環境部署（前端部分）

說明：renren-fast是一個開源的基於springboot的前后端分離手腳架，當前版本是3.0

開發文檔需要付費，官方的開發環境部署介紹相對比較簡單，對於想嘗試搭建個項目的新手而言不太友好，特此將自己搭建的過程記錄如下

一、環境准備

1. 構建vue項目我們需要使用npm命令，到node官網下載當前穩定版本並安裝

   

2. 按默認安裝完后，命令行node -v、npm -v查看版本信息

   

二、下載項目和所需組件

1. 直接下載zip包或通過git克隆到本地倉庫，如下：

   git clone https://github.com/daxiongYang/renren-fast-vue.git
   

2. 下載所需的vue相關組件，逐個執行以下命令

   npm config set registry=http://registry.npm.taobao.org		#配置淘寶的鏡像
   npm config list			#查看當前npm的配置信息
   

   下載必要的組件，執行以下命令

   npm install vue -g
   npm install vue-router -g
   npm install vue-cli -g
   #查看vue版本，V是大寫
   vue -V
   

   更多的安裝教程可以參考以下這篇博文，很詳細，值得一看

   https://www.cnblogs.com/lgx5/p/10732016.html

三、下載依賴

1. 進入項目文件夾/renren_fast_vue

   npm install 	#下載依賴包，提前配置淘寶鏡像，下載會快點
   

2. 下載依賴時可能會出現以下報錯：

   • 問題1：如下圖，Downloading https://chromedriver.storage.googleapis.com/2.27/chromedriver_win64.zip（明顯是被牆了）

     

   • 解決辦法：

     #指定淘寶的鏡像重新下載
     npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver
     
     #下載后再次下載依賴
     npm i
     

四、啟動項目

1. 啟動前端，在前端目錄下執行命令

   npm run dev
   

2. 啟動時可能遇到的報錯

   • 問題2：啟動前端時報錯，如下圖，node sass不支持當前環境，實質node-sass4.9.0安裝失敗

   • 瀏覽器界面提示<% if (process.env.NODE_ENV === 'production') { %> <% }else { %> <% } %>

   • 

   • 解決辦法：

     #清除當前的sass
     npm uninstall node-sass
     #重新安裝sass，若沒有報錯，即可再次啟動項目
     npm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
     #再次啟動項目
     npm run dev
     

   3. 再次在瀏覽器打開http://localhost:8001，成功打開前端項目，提前啟動后端即可正常登陸，用戶admin/admin

      

至此前端項目開發環境部署就完成了

下一篇博文將繼續介紹基於官方文檔新建一個可增刪改查的商品報表實戰