前端开发文档.docx

一、项目部署

项目名称：jeecms_admin

1、安装软件包

npm

npminstall

2、启动开发模式

npm

npmrunserve

3、编辑发布版本

npmrunbuild

npmrunbuild

4、自定义打包配置文档

SeeConfigurationReference.

5、创建项目

npm

npminstall-g@vue/clivuecreateprojectnamevueui

选项：

Manuallyselectfeatures

Babel

OTypeScript

OProgressiveWebApp(PWA)Support●Router

Vuex

●CSSPre-processorsLinter/Formatter

O

OUnitTestingOE2ETesting

Sass/SCSS(withnode-sass)ESLint+Standardconfig

Lintonsave

Inpackage.jsonN

6、更新日志

2019/8/24升级

2019/8/24升级element-ui2.8.2至2.11.1,解决了表格树默认展开所有行问题

二、开发流程

1、接收任务

了解任务内容、业务范围

仔细研读原型文档、接口文档、UI效果图

功能模块分析、优先级安排、难易度分析、工时计划

了解前端开发规范，使用eslink,尽量多写注释，方便他人查阅

2、基础工作准备

定义接口：在相应文件src/api/urls中定义接口地址，地址不重复：在相应女件s/apilapis中定义请求方法

添加路由：在相应文件sre/roufes/asyncRoutes.js中对应的路由位置添加路由馆息

建立目录：根据路由信息在sre/views下相应目录下面建立业务模块目录及文件

路由语言：根据路由信息的name属性，在相应文件src/i18n/lang/cn.js中设置菜单言语名称(menus对象内)

添加模拟数据：根据接口文档返回数据格式，在数据数据服务页面添加相应模拟接口。

MockServer

3、业务页面开发

根据业务功能模块，将已开发过的代码复制过来进行修改

业务模块尽量封装使用，提高复用性，如现有已封装模块不能满足，根据需要修改的程序来决定是重新封装过一个还是在原来封装的组织上面增加类型

整体业务封装思想是尊丛渐进增强的模式，同时考虑灵活性以及便捷性，封装组件与mixin数据配合使用，尽量减少调用者的代码量及复杂度；另外要注意mixin间不能有重复的字段名称及方法名称，以免使用多个mixin时冲突。

4、页面样式

元素标签上的样式非动态的一律用class写

页面顶级元素使用不重复的class,通过类命名空间来保障样式不冲突，style/style标签可以不使用scoped

涉及到主题色的，使用src/assets/theme/mixin.scss中定义的类，如没有可自定义

属于UI规范类的样式写在src/assets/css/index.scss或src/assets/ess/rewrite.scss中，前者用于定义自定义的class,后者用于定义elementuiclass

三、文档说明

1、动态切换主题

1.1、

使用工具生成样式变量文件

npmielement-themeelement-theme-chalk-D

node_modules/.bin/et-i

1.2、

修改根目录下的element-variables.scss变量文件

在根目录下生成theme主题包

注：以上文件和目录添加到svn忽略中不要上传node_modules/.bin/et

1.3、

修改打包配置文件gulpfile.js`中的变量customThemeName,注：不能与assets/css/theme/下的目录名重复

安装gulp`打包工具

npmigulp-g

npmigulpgulp-css-wrapgulp-clean-css-D

1.4、

执行命令打包到src/assets/css/theme/

gulpcss-wrap

gulpcss-wrap

gulpmove-font

1.5、

在入口文件main.js中导入新的主题文件切换主题时把空间类名附给body即可

document.body.className=custom-+customThemeName

注：customThemeName可存在vuex中，列表形式，同时存一个当前主题值theme

注：每次更新执行2-