项目开发说明
技术框架
- 前端采用
Vue/ES6、sass
架构,兼容IE8+ - Neves脚手架采用
node + express + Webpack 4.0
。node完成脚手架基本的开发,express完成server端mock数据接口的开发.Webpack负责模块打包和项目优化。 - 项目样式支持Sass,css
- 异步请求使用
axios
,并在api/server.js
中做了拦截器封装 - 项目已集成
webpack-spritesmith
postcss-px2rem
page-skeleton-webpack-plugin,zepto
等插件或类库,详情请查看webpack.config.js
项目原理和结构
目录结构及说明
|-- api // 页面异步请求和拦截器
| |-- index.js // 页面异步请求集合
| |-- server.js // 页面异步请求axios拦截器封装
|--bin // 脚手架主要功能node代码
| |-- create.js // 创建组件脚本
| |-- untils.js // 脚手架公共方法封装
| |-- upload.js // 打包后代码上传到erp的脚本
| |-- watch.js // 检测代码改变和浏览器热更新脚本
|-- dist // 打包后的代码集合
| |--css // 页面的样式集合
| | |--sprite.css // 页面对应的css sprite样式
| | |--styles.css // 页面对应的各个楼层的样式
| |-- js // 页面脚本集合
| | |--main.js //打包生成的页面脚本
| |-- sprites // webpack生成的css sprite图片
| |-- index.html // 最终打包生成的需要上传到erp的html文件
|-- node_modules // 项目依赖包
|-- public // 页面需要的静态资源
|-- server // 本地服务mock数据
|-- template // 板块模板规范
|-- widget // 项目中的组件集合
| |-- floor // 其中一个组件
| | |-- floor.html // 组件html
| | |-- floor.js // 组件js脚本
| | |-- floor.scss // 组件scss样式
|-- build.js // 构建页面node脚本
|-- index.tmpl.html // 页面的html模板
|-- main.js // 程序入口文件,加载各个组件
|-- package-lock.json // 锁定安装时的包的版本号
|-- package.json // 项目基本信息
|-- README.md // 项目说明
|-- user-config.json // erp新建页面参数配置
|-- webpack.config.js // webpack基本常用配置
主要功能讲解
安装
npm install neves -g
执行npm run start
命令页面准确打开之后。可以进行项目的开发,h5活动页、app内嵌页的初始化、配置、调native方法等。可以在index.tmpl.html
文件中配置。配置方式和之前保持统一。详细的请参考h5活动页、app内嵌页开发说明。页面配置完成之后。完成主要功能可以参考如下:
新建楼层
执行npm run create
之后输入楼层名称,如果是vue的开发环境。楼层名称全部小写。Neves自动生成一个楼层。楼层格式已包含在文件中。不要随意删除楼层外壳的类名。可以在现有类名的基础上添加类名
楼层引入页面规范
一个楼层新建完成之后,需要在2个文件中引入:
(1)index.tmpl.html
,这个文件声明楼层。es6环境和 vue环境的引入基本一致,不同的是es6环境楼层由div标签包裹,vue环境由组件名包裹。例如:
### es6环境
### vue环境
楼层属性的属性可参考:
属性 | 是否必填 | 意义 |
---|---|---|
name | 是 | 楼层名称,需要和创建时填的的一致 |
class | 否 | 类名为observe时楼层懒加载,不需要懒加载可不填 |
state | 否 | 懒加载的状态, 不需要懒加载可不填 |
id | 是 | 楼层id,需要页面唯一 |
data | 否 | 楼层需要的数据,比如板块的id |
(2)main.js
这个文件引入楼层的css和js,并在jsLoaded函数中执行楼层对应的函数,例如:
//css部分
import './public/css/common.scss';
import './widget/firstScreen/firstScreen.scss';
import './widget/introduce/introduce.scss';
import './widget/floor/floor.scss';
// js部分
import store from './public/js/global';
const _$store = new store();
//楼层js部分
import { firstScreen } from './widget/firstScreen/firstScreen';
import { introduce } from './widget/introduce/introduce';
import { floor } from './widget/floor/floor';
function jsLoaded() {
$(function() {
_$store.initstate();
//页面主逻辑
firstScreen();
ntroduce();
floor();
});
}
jsLoaded();
楼层懒加载规范
es6环境要在main.js中操作
第一步:引入pageObserver函数:
import { pageObserve } from './public/js/observe';
第一步:引入需要加懒加载的楼层函数:
import { firstScreen } from './widget/firstScreen/firstScreen';
import { introduce } from './widget/introduce/introduce';
import { floor } from './widget/floor/floor';
第三步: 在jsLoaded中执行pageObserve函数,参数为需要加懒加载的楼层函数的名称
pageObserve({ firstScreen, introduce, floor });
楼层绑定板块规范
有时候需要在楼层中绑定模板。比如图文模板或者商品模板。
第一步:在erp上新建板块,将之前的楼层html替换掉对应的字段后,复制到相应的位置。保存。生成板块编码。
第二步:在项目的index.tmpl.html
文件中找到对应楼层为楼层绑定板块编码。例如:
//一般商品板块建议属性名称为pro_1、pro_2。图片板块属性名称为pic_1、pic_2
第三步:在楼层的html代码中,找到包裹板块的标签,添加两个属性:class="template";template_tpl="板块名称,和第二步的名称一致",例如:
图标的使用规范
h5页面开发中,有一种优化叫做css sprites,但是在操作过程中很复杂,需要手动拼图,并且计算出每个图标的坐标和大小。Neves在此做了大量优化,用户无需关心拼图和计算图标的坐标、大小。在使用图标时
第一步:将需要的图标复制到public/icons文件夹,假如icon名称为btn.png
第二步:给需要加图标的标签增加2个class:例如:
mock数据使用规范
在开发项目的过程中,有些楼层需要请求数据接口,传统的开发模式是前后端分离,后端首先提供接口的数据结构和字段。前端造假数据开发。有些开发会使用一些mock数据平台或者mock.js之类的库。使用起来都比较麻烦。在这里,使用neves非常简单可以制造mock数据。
第一步:进入文件夹,打开终端命令行工具,实行npm install
安装依赖包
第二步:进入serve/api文件夹,新建一个js文件,文件名即为接口名称
第三步:按照示例details.js,规定要返回的文件结构,字段等,制造mock数据。
第四步:修改serve/bin/www文件的端口号和项目端口号一致。并执行npm start
- mock数据完成,接口地址为:http://localhost:5505/api/info
- '5505'为第四步填写的端口号,也就是本地项目的端口号,'info'为第二步创建的文件名称
px转rem
h5页面样式无需关注px转rem。开发过程中直接根据设计稿填px即可。Neves会自动转换为rem。默认按页面宽度分为10份,每一份为75px进行转换。假如设计稿给的宽度不是750,可以在build.js中修改。例如:
var cssData = postcss().use(px2rem({ remUnit: 75 })).process(originCssText + spriteCssText).css;
页面打包上传
项目开发完需要打包上传到erp上进行测试。也很简单:
第一步:执行npm run build
将项目打包
第二步:执行npm run upload
将打包后的页面上传到erp
需要特别注意的:
(1)项目打包之后需要将生成的css sprite图片上传到服务器。图片在dist/sprites/sprites.png。将生成的链接替换掉webpack.config.js
中的spriteBaseUrl字段。
(2)切换环境的时候千万不要忘记修改user-config.js
中的pageId字段。替换为新环境中创建的页面id,不然会导致页面上传失败。
常用命令
-
npm run start
开发时使用,将启动本地服务 -
npm run build
构建项目,用于生产环境代码打包 -
npm run create
开发时使用,用于新建楼层 -
npm run upload
构建项目,用于将代码部署到erp上(寺库内部员工可用)
未来规划
- 开发与之配套的组件库,工具函数
- Neves脚手架整体使用express+typescript开发
- 支持新建板块