Challenge Next Challenge

1，项目目录结构概览2，命名规范概览3，前端工具，js框架以及库介绍4，模块划分以及路由配置5，程序入口启动6，公共组件介绍7，服务层介绍8，打包发布9，表格组件功能介绍...

在并排渲染多个popover组件的时候，当popover里面的内容宽度不一样，点击几次就会出现popover不再相对于触发DOM居中了，将出现很大的偏移。但是在触发滚动条或者改变窗口大小时，popover位置又会调整回来。这是因为element ui在使用的popper.js控件中监听了resize以及滚动事件，并在这两个事件中重新计算位置。那么怎么利用这个事件调整位置呢，因为element ...

由于这个项目需要build出来三个端，所以需要对build.js文件做一些修改，以满足需求。在执行命令的时候会用如下方式调用：npm run build:operationnpm run build:label这样会直接build某一端的代码。如果直接运行npm run build会同时构建几个端的代码。在执行npm run build:operation这个命令的时候，其实在...

所谓的服务层就是对http请求的封装，最好不要直接在业务逻辑的代码里掺杂像下面类似的直接ajax调用：$.ajax({ url: 'https://url.com/user', type: 'get', dataType:'json', contentType: "application/json;charset=UTF-8", cros...

这个公共的库在项目中是通过dependencies引入进来的："dependencies": { 。。。 "frontend-library": "git+https://git.com/Frontend/library.git", 。。。 },在开发的时候可以换成file协议，这样方便调试。在ci中，依赖的库不是每次都用npm install/updat...

由于一个项目中要build出来几个访问端口，所以会有几个对应的main-xxx.js。main中主要干的几件事：1）加载各种库，包括element-ui和通用的library2）判断是开发环境还是生产环境，进行不同的初始化过程1）如果是开发环境，直接初始化app组件，假定用户信息在localstorage中已经存在了2）如果是生产环境，先检查是否已经登录，然后请求api加载用户...

TableList组件是以ElementUI Table表格组件为主，并封装了一系列其它组件，提供了以下主要功能筛选功能 搜索功能 分页功能 加载过程以及错误信息提示功能 行展开功能 单选行功能 switch开关组件功能 progress进度组件功能 分行显示日期时间组件功能 动态组件渲染功能 自定义列组件功能表格组件可以分为三个部分：头部（筛选，搜索）、数据部分、底...

整体项目模块的划分以业务逻辑为主，不按照vue组件类型进行划分。按照组件类型划分会很难维护，降低查找文件的速度。下面以系统管理举例：系统管理在UI上是一个一级菜单，下面会有三个二级菜单，包括审计，消息管理和发布者管理。所以直接映射到源代码结构就是system-mgmt目录下有三个二级目录。其中消息管理下面直接是相应的组件以及服务，而发布者管理下面又进行了一次划分，因为这个功能有三个ta...

前端的工具就是webpack2，做了以下几点优化1）加入了StyleLintPlugin，对scss进行格式进行检查2）使用HappyPack，ParallelUglifyPlugin进行build的速度优化3）使用ContextReplacementPlugin优化moment库的多语言支持4）通过定义externals把一些库用CDN方式引入，减小文件尺寸，优化加载速度e...

vue的官方网站现在有了一个风格指南（https://cn.vuejs.org/v2/style-guide/），当时写这个项目的时候，这个指南还不是很完整，所以项目并没有完全遵循这个指南。指南终究是指南，也没必要完全遵循，只要项目组内大家根据使用习惯达成一致就行。目录命名：一般以小写+中划线命名，比较易读文件命名：项目中采取了和目录命名基本一致的规则，但是会加一个表示不同组件的后缀。比如...

项目采用的是Vue2+Webpack2，分成了几个项目：一个通用的library项目，里面是一些公用的组件；一个是平台项目，会build出来三个端，每个端不同角色的用户会登陆各自的平台。下面先看一下library项目结构：其中：components目录是通用的组件封装，比如表格之类的directives目录是一些指令，比如最大化对话框等filters目录是过滤器，比如时间格...

产品要求：最多选择100个文件 每张图最大2M 需要给出每张图上传的结果：成功从列表中删除，失败提示网络错误，大于2m也需要提示 支持重试遇到的问题：upload组件不支持多文件顺序上传，如果一次性上传100张图，压力有点大不支持顺序上传的原因，在elementui的源码中，手动调用submit方法时，会过滤status为ready的file，然后开始上传过程，上传过程异步，就会...

控件主要功能，可以单行显示多选的tag，并且可以利用左右键移动tag在组件中的位置直接上代码：<el-select v-model="tags" ref="tagsSelect" multiple filterable remote clearable popper-class="tag-input-options" :remote-...