@quansitech/tp-frontend-template NPM

官网开发文档(前端)

部署

服务器部分

前置条件: docker 已安装

your/docker/config/path/nginx/sites 目录下复制一个nginx 配置文件
打开刚刚的文件,并修改以下字段
server_name PROJECT_NAME.qs.com;
root /var/www/PROJECT_GIT_NAME/www;
3.修改系统hosts文件新增127.0.0.1 PROJECT_NAME.qs.com
4..env文件增加 DOMAIN 字段，值为 PROJECT_NAME.qs.com

前端编译部分

前置条件: node 版本 >= 14.17.1, 可使用nvm安装,推荐node版本14.17.1

npm安装 @quansitech/tp-frontend-template: (如已安装不需要再次执行)
在任意目录启动命令行，输入 cnpm i -g @quansitech/tp-frontend-template
安装成功后，在项目根目录命令行输入 npx copy-tp-frontend-template
项目根目录运行cnpm i or yarn,安装前端环境;
项目根目录命令行输入 gulp reload 即可

编译

使用gulp 对 css & js 进行编译

编译命令:

gulp reload 编译并监听刷新 gulp mobile:reload 编译移动端并监听刷新

gulp default:reload编译pc端并监听刷新

gulp run 编译并压缩(运行完自动停止)

gulp default:run 编译并压缩(运行完自动停止)

gulp mobile:run 编译并压缩(运行完自动停止)

每次对 css或 js 保存后,都会编译文件

编译后,会修改head, footer里面的文件名的版本号

自动生成sourcemap 可在浏览器查看源代码 ,源文件名以及行号(行号可能不太准确)

html

复用的html 可以跟后端商量用widget 或直接引入公共的html
注意html语义化, eg: ul,li, p, h1-h6...

图片:

图片展示:

动态上传的图必须有固定尺寸的div包裹防止上传的图片太大导致样式错乱, 后端使用图片裁剪,保证图片比例

前端可用css 属性 object-fit: cover(ie可能不兼容)

logo:
- 不能拉伸,要展示整个图所以外层div 设置固定宽高,里面的 img 标签设置:
max-width: 100%;
max-height: 100%;
首屏幻灯片轮播:
- 一般情况下宽度100%，高度自适应，完整展示
banner:
- 一般情况下宽度100%，高度自适应，完整展示
- 如内容不重要，只作为背景，则宽度100%，高度固定，bg cover center填充整个区域
列表图
- 按尺寸比例调用展示
正文图(包括但不限于: 富文本里面的图)
- 宽度不超过内容层宽度，高度自适应

图片放大展示可用viewer.js
图片轮播用swiper.js

图标

用Symbol (svg) 的方式引入,需要设计用AI做图标, 具体引入方式看 iconfont文档

开发环境用iconfont 在线链接

生产环境需要在iconfont下载

css

文件布局

commonStyle: pc + 移动公用

var.less: 变量主要存放网站颜色

tool.less: 工具函数 eg: .mb0{ margin-bottom: 0; }

common.less: 公用代码 eg: .text-red 类(某些项目不一定有红色的文字)

reset.less : 对浏览器样式重置

var.less: pc端变量

tool.less: pc工具函数

common.less: pc公共代码

icon.less : pc 端icon

style.less: 对所有样式代码进行聚合

coder.less 以作者名为文件名,避免冲突

mobile

var.less: mobile端变量

tool.less: mobile工具函数

common.less: mobile公共代码

icon.less : mobile 端icon

style.less 对所有样式代码进行聚合

coder.less 以作者名为文件名,避免冲突

样式命名规范

变量：
- 颜色：一般网站颜色不会很多，因此直接用颜色命名, eg: @green;
  有时候会有两种相近的颜色，可用 light 作为前缀， eg: @light-green;
  边框： @border-color; 背景： @bg-color;输入框背景: @input-bg-color;
- 距离(高度/宽度)：定义.container宽度，eg： @container-width;
- 路径： @img-url: 'path/to/your/img/directory';
类名
- 页面： .page-*, eg: .page-index;
- 列表： .*-list, (-item):
  - eg: .news-list, .news-item; 同时html用 ul + li
- 按钮： .btn
  - 颜色： .btn-green
    - 反白：.btn-border;
  - 状态： .btn-disabled
  - 形状： .btn-square, .btn-square-radius, .btn-radius
    使用的时候组合起来， .btn.btn-green.btn-square;
    类似的技巧可以拓展到.tag 之类的地方.

样式布局

flex的使用
绝对定位的使用

常用css类名

container类：
pc : 从设计图量出项目最小宽度后(eg: 1200px), 让其居中,超过1200px的时候,左右留白
width: 1200px;
margin-left: auto;
margin-right: auto;
mobile: 从设计图量出白边距离后(eg: 0.3rem),设置
padding-left: .3rem;
padding-right: .3rem;
同时设置一个.row类
margin-left: -.3rem;
margin-right: -.3rem;

.article-content 富文本
prewrap 多行文本
.text-cut 文字单行裁剪。与flex使用时，须固定裁剪元素的父级宽度(可用calc, rem, px);
多行裁剪可用 .text-cut-2(ie不可用，因此pc端多行要后端裁剪)

javascript

文件布局
- 通过app.js, 把该目录下所有js引入到这里
命名规范
- 变量
  - 常量: 用大写加下划线 (eg: DOCUMENT_HEIGHT);
  - 普通变量: 小驼峰
- 函数
  - 构造函数,类大驼峰
  - 普通函数小驼峰

移动端

加载更多使用瀑布流
主要使用rem做单位 (百分比, 像素)
- 因chrome字体不能小于12px 所以字体最低可用12px 或 0.24rem(换算后接近12px)
- 小的圆圈,或其他小的尺寸(一般5px或以下) 可能因为 rem 而有问题, 因此可用px固定宽高
- 百分比也是常用的响应式单位
纯移动端的网站在pc端打开的时候内容需要居中展示(参考地址)

页面优化

交互
- 数据展示的地方,需要有数字滚动效果(countUp.js), 且需要用户滚动到相应位置才展示(滚动一次即可) 参考地址
- 列表图片: 设置鼠标经过放大的效果(pc)
- 可点击的地方鼠标样式设置cursor: pointer
- 鼠标经过的才展示的阴影,需要有过渡效果 (transition: box-shadow .3s; 或给所有效果加上过渡: transition: all .3s;)
- pc端外链地址尽量在新窗口打开 (target="_blank");
展示
- 搜索页需要在搜索结果高亮搜索关键词
- 列表的标题，摘要，描述对照设计图对文字进行裁剪 (.text-cut);
- 设置高度最小值100%,把底部固定在页面最下方
首屏加速
- 可用cdn 对lib进行加速（常用bootcdn, 75cdn）
- 首页图片过多的话,需要使用渐进式加载图片
seo
- head部分的title、keywords、description
- 图片的alt标签