-
項目結構
fosung-項目名
-
docker -- 用於docker部署鏡像
-
DockerFile -- 用於jenkins打包後自動上傳docker鏡像到阿里雲上，當你運行run-某一個項目.ssh腳本時，會運行此文件 拉取鏡像 並操作鏡像 FROM 阿里雲鏡像位置
-
-
node_nodule -- 是node的包管理和分發工具 包含着所有引入的依賴 作用同後端maven
-
jboot-env -- 引入的前端框架依賴
-
-
src -- 主要存放代碼 注：具體結構在下面
-
statis -- 靜態文件 存放js組件如pdf查看/ckpalyer視頻播放
-
webpack -- jenkins打包使用 注：此文件下任何修改後需要重啓項目
-
config -- 其中index.js文件 存放ip與api地址代理、後端地址host、後端端口號port...
-
-
favicon.ico -- 網頁上的標籤圖標
-
index.html -- 主頁，項目入口
-
package.json -- 版本管理
代碼與組件存放在src目錄中
src
-
assets -- 主要存放圖片、字體資源
-
components -- 常用組件 存放經常使用的組件，如：上傳Upload.vue、頁面佈局Layout.vue、字典項下拉框SelectDict.vue...
-
configure -- 配置文件
-
http -- 請求地址、mock數據（模擬數據）
-
>api -- 爲$api("示例頁面名",“請求名”，請求參數）
-
示例頁面名.js -- 這是一個頁面的一些列請求 包含每個請求地址、請求方式、及請求參數...
-
-
>mock --
-
>intercept -- 攔截請求並返回mock數據 在index.js文件中包含需要攔截的請求路徑，
-
>response -- 存放mock數據
-
api -- 同http下api結構相似 js文件中使用export default{ mock內容 }
-
sys
-
resource --文件navigate.js包含 側邊欄數據 與路由routerTable.js一起使用
-
-
-
-
restApi.js
-
-
router
-
routerBefore.js -- 路由跳轉之前
-
routerTable.js -- 配置路由
-
-
warp
-
suport -- 公共方法支持 如：分頁常用函數pager 、富文本常用函數editor 使用在引入jboot-env並在頁面的export default JBoot( ... ).module("常用方法").build() 使用點module調用公共方法
-
index.js -- 組件安裝 如已默認安裝的組件：store、ElementUI、mock工具、攔截工具
-
-
socket -- webSocket連接
-
style -- 公共scss樣式與字體
-
views
-
你的代碼模塊
-
你的代碼文件
-
-
main.js -- 入口文件
-
Root.js -- 根組件
-
-
依賴管理
安裝依賴
首先需要一個Javascript運行環境 Node 官網下載地址：https://nodejs.org/zh-cn/
當你擁有或從git上pull了一個前端項目後你需要安裝依賴才能運行項目
安裝項目依賴： -- 安裝package.json裏所有包，並將包及它的所有依賴項保存進yarn.lock
方式1：npm install 簡寫：npm i -- 安裝node後可以直接使用
方式2： yarn install 簡寫：yarn -- 通過node的npm命令：npm i yarn即可擁有
方式3： cnpm -- 通過npm i cnpm安裝
cnpm使用方式（用cnpm代替npm命令）
安裝cnpm： npm install -g cnpm --registry=https://registry.npm.taobao.org
下載依賴： cnpm i 或者 cnpm install
npm網速慢配置taobao鏡像
代碼：npm config set registry https://registry.npm.taobao.org
注：如果npm install的安裝項目依賴出現問題，可以嘗試使用cnpm或yarn的方式安裝依賴，或者嘗試刪除node_modules這個文件夾後重新嘗試，
安裝其他依賴：
方式1：npm install 依賴名 或 npm i 依賴名 來安裝依賴
方式2：yarn add 依賴名 -- 在當前的項目中添加一個依賴包，會自動更新到package.json和yarn.lock文件中
開發依賴
dependencies 是項目最基本的依賴
方式1：npm install 名@版本 --save -- 簡寫：npm i 名@版本 -S
方式2：yarn add 名@版本
運行時依賴
devDependencies 僅在本地開發時使用，比如: 代碼規範校驗工具eslint、打包工具webpack，到了生產環境就不再需要
方式1：npm install --save-dev -- 簡寫 npm i -D
方式2：yarn add --dev -- 簡寫：yarn add -D
運行腳本
-
開發運行 -- 用來運行項目，會執行在 package.json 中 scripts 屬性下定義的腳本
方式1：npm run dev
方式2：yarn run dev -- 簡寫： yarn dev
-
打包腳本
"build:zip": "rm -rf dist/ && npm rum build && cd dist && zip -r fosung-cloud-front-template.zip fosung-cloud-front-template/"
"prebuild": "rm -rf ./docker/dist",
"postbuild": "cd ./docker && docker build -t registry.cn-qingdao.aliyuncs.com/hub_fosung/fosung-cloud-front-template:1.1 ./ && docker push registry.cn-qingdao.aliyuncs.com/hub_fosung/fosung-cloud-front-template:1.1"
在打包項目時需要更改鏡像版本號 fosung-cloud-front-template:1.1 同時也要修改push的版本號fosung-cloud-front-template:1.1