springboot綜合項目練習八cms系統前端項目搭建和環境準備

一. 相關内容

項目碼雲位址:https://gitee.com/chenhaotao1992/sc-ui-pc-sysmanage.git

選擇分支:part01

二. 環境和準備

項目環境:

jdk1.8

node.js和webpack:https://blog.csdn.net/chenhaotao/article/details/86619148

MongoDB

開發工具:

webstorm:https://blog.csdn.net/chenhaotao/article/details/86619236

Studio-3T:

準備mongodb資料:內建springboot mongodb:

三. 實作步驟

我的cms前端項目是使用Vue-cli腳手架建立， Vue-cli是Vue官方提供的快速建構單頁應用的腳手架，github位址：https://github.com/vuejs/vue-cli , 你也可以在我的碼雲位址選擇part01分支下載下傳項目導入.

四.項目結構介紹

1. package.json類似maven的pom檔案,記錄了工程所有依賴，及腳本指令例如dev和build指令

   2.webpack.base.conf.js就是webpack.config.js的配置檔案

   3.main.js是工程的入口檔案，在此檔案中加載了很多第三方元件，如：Element-UI、Base64、VueRouter等

   src目錄下各個檔案夾作用:

   assets：存放一些靜态檔案，如圖檔。

   base：存放基礎元件

   base/api：基礎api接口

   base/component：基礎元件，被各各子產品都使用的元件

   base/router：總的路由配置，加載各子產品的路由配置檔案。

   common：工具類

   component：元件目錄，本項目不用。

   mock：存放前端單元測試方法。

   statics：存放第三方元件的靜态資源

   vuex：存放vuex檔案，本項目不使用

   static：與src的平級目錄，此目錄存放靜态資源

   module：存放各業務子產品的頁面和api方法。

   module/home:項目生成的一個參考子產品,每個子產品目錄下又有四個目錄:page頁面目錄,存放.vue檔案,router路由目錄存放index.js,api目錄存放對應子產品接口請求規則js,已經公共目錄components