-
项目结构
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