前端开发文档.docx

一、项目部署 项目名称：jeecms_admin 1、安装软件包 ?npm install 2、启动开发模式 ?npm run serve 3、编辑发布版本 ?npm run build 4、自定义打包配置文档 See Configuration Reference. 5、创建项目 ? ? npm install -g @vue/cli? ? vue create projectname? ? vue ui ?选项：? ? Manually select features? ? ? ?● Babel? ? ? ?? TypeScript? ? ? ?? Progressive Web App (PWA) Support? ? ? ?● Router? ? ? ?● Vuex? ? ? ?● CSS Pre-processors? ? ? ?● Linter / Formatter? ? ? ?? Unit Testing? ? ? ?? E2E Testing? ? Sass/SCSS (with node-sass)? ? ESLint + Standard config? ? Lint on save? ? In package.json? ? N 6、更新日志 ?2019/8/24 升级 element-ui 2.8.2 至 2.11.1，解决了表格树默认展开所有行问题 二、开发流程 1、接收任务 了解任务内容、业务范围 仔细研读原型文档、接口文档、UI效果图 功能模块分析、优先级安排、难易度分析、工时计划 了解前端开发规范，使用eslink，尽量多写注释，方便他人查阅 2、基础工作准备 定义接口：在相应文件src/api/urls中定义接口地址，地址不重复；在相应文件src/api/apis中定义请求方法 添加路由：在相应文件src/routes/asyncRoutes.js中对应的路由位置添加路由信息 建立目录：根据路由信息在src/views下相应目录下面建立业务模块目录及文件 路由语言：根据路由信息的name属性，在相应文件src/i18n/lang/cn.js中设置菜单言语名称(menus对象内) 添加模拟数据：根据接口文档返回数据格式，在数据数据服务页面添加相应模拟接口。 Mock Server 3、业务页面开发 根据业务功能模块，将已开发过的代码复制过来进行修改 业务模块尽量封装使用，提高复用性，如现有已封装模块不能满足，根据需要修改的程序来决定是重新封装过一个还是在原来封装的组织上面增加类型 整体业务封装思想是尊丛渐进增强的模式，同时考虑灵活性以及便捷性，封装组件与mixin数据配合使用，尽量减少调用者的代码量及复杂度；另外要注意mixin间不能有重复的字段名称及方法名称，以免使用多个mixin时冲突。 4、页面样式 元素标签上的样式非动态的一律用class写 页面顶级元素使用不重复的class，通过类命名空间来保障样式不冲突，style/style标签可以不使用scoped 涉及到主题色的，使用src/assets/theme/mixin.scss中定义的类，如没有可自定义 属于UI规范类的样式写在src/assets/css/index.scss或src/assets/css/rewrite.scss中，前者用于定义自定义的class，后者用于定义``element ui class 三、文档说明 1、动态切换主题 ?1.1、?使用工具生成样式变量文件 ? ? npm i element-theme element-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```打包工具 ? ? npm i gulp -g? ? npm i gulp gulp-css-wrap gulp-clean-css -D ?1.4、?执行命令打包到```src/assets/css/theme/``` ? ? gulp css-wrap? ? gulp move-font ?1.5、?在入口文件```main.js```中导入新的主题文件?切换主题时把空间类名附给body即可 ? ? d