国华PC框架使用说明.pdfVIP

目 录 快速上手 环境搭建 获取项目 项目启动 项目开发 框架简介 目录说明 接口请求 配置文件 工具方法 模板编译 静态资源 经验总结 生命周期 路由 组件 less使用 构建流程 版本控制 开发规范 本文档使用 看云 构建 - 2 - 快速上手 快速上手 环境搭建 获取项目 项目启动 项目开发 本文档使用 看云 构建 - 3 - 环境搭建 环境搭建 下载node.js node.js 官网地址 下载完成一路下一步进行安装 检测是否node.js是否安装成功 打开Windows 命令窗口 npm -v 结果显示node版本号 ！则环境安装成功 下载node.js 检测是否node.js是否安装成功 本文档使用 看云 构建 - 4 - 获取项目 获取项目 下载svn 并安装 进入官网下载 检出项目 右击检出项目 在URL of repository 填写版本库地址 在Checkout directory 填写检出地址 点击ok检出项目 本文档使用 看云 构建 - 5 - 项目启动 项目启动 安装项目依赖 进入项目根目录 打开Windows命令输入下面命令 等待依赖安装完毕 npm install 编译并启动项目 进入根目录tools文件夹运行 gulp build 待上面命令运行完毕输入下面命令 gulp dev 如果提示gulp命令不存在运行下面命令 ，之后再执行以上命令 npm install gulp -g 至此醒目会在游览器成功启动 本文档使用 看云 构建 - 6 - 项目开发 项目开发 简要说明 一个页面的建立包括HTML、JavaScript、CSS （本框架使用less ）本框架用gulp构建各个文件存在一定的必 要关联和规范 建立新的文件要遵守以下规范 （假设我们建立一个insure页面 ） 建立insure.html文件 建立src/pages/insure/insure.html文件 insure.html必须包含以下基本结构 %- include(../../templates/_header) % body div class current v-cloak id % fileName % div v-show isLoad gh-topmenu/gh-topmenu div class content 你的代码 /div gh-footer/gh-footer /div div class loading v-show !isLoad gh-loading/gh-loading /div /div !--footer-- %- include(../../templates/_script) % /body /html 建立insure.less样式文件 建立\src\public\less\app\insure\insure.less文