Vue
关注
分享
扫一扫
文章平均质量分 64
kittyjie
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
webpack5 script和css随机加载导致echarts渲染问题
开发中遇到一个奇怪的问题，首页echart和mapbox地图会随机性的获取不到DOM节点的宽高，导致无法渲染。研究了好久，无意间发现了一个现象，在Chrome控制台的网络面板中，css的加载顺序会在js之后。一般来讲，css都应该最先加载，防止用户看到原始的DOM。调查后发现，build出来的index.html内容如下：<head> <script defer="defer" src="/static/js/chunk-vendors.c1b25dfe.js">&原创 2021-12-15 10:13:55 · 1493 阅读 · 0 评论 -
基于Element UI的Select控件实现多选框中单行显示&左右移动
控件主要功能，可以单行显示多选的tag，并且可以利用左右键移动tag在组件中的位置直接上代码：<el-select v-model="tags" ref="tagsSelect" multiple filterable remote clearable popper-class="tag-input-options" :remote-...原创 2019-09-07 10:24:24 · 3724 阅读 · 1 评论 -
Element UI Popover组件多次点击后不再居中于触发节点的解决办法
在并排渲染多个popover组件的时候，当popover里面的内容宽度不一样，点击几次就会出现popover不再相对于触发DOM居中了，将出现很大的偏移。但是在触发滚动条或者改变窗口大小时，popover位置又会调整回来。这是因为element ui在使用的popper.js控件中监听了resize以及滚动事件，并在这两个事件中重新计算位置。那么怎么利用这个事件调整位置呢，因为element ...原创 2019-09-07 10:02:08 · 2261 阅读 · 0 评论 -
Vue2在实际项目中的应用——打包发布
由于这个项目需要build出来三个端，所以需要对build.js文件做一些修改，以满足需求。在执行命令的时候会用如下方式调用：npm run build:operationnpm run build:label这样会直接build某一端的代码。如果直接运行npm run build会同时构建几个端的代码。在执行npm run build:operation这个命令的时候，其实在...原创 2019-05-13 14:33:39 · 628 阅读 · 0 评论 -
Vue2在实际项目中的应用——服务层介绍
所谓的服务层就是对http请求的封装，最好不要直接在业务逻辑的代码里掺杂像下面类似的直接ajax调用：$.ajax({ url: 'https://url.com/user', type: 'get', dataType:'json', contentType: "application/json;charset=UTF-8", cros...原创 2019-05-13 14:08:09 · 741 阅读 · 0 评论 -
Vue2在实际项目中的应用——公共组件介绍
这个公共的库在项目中是通过dependencies引入进来的："dependencies": { 。。。 "frontend-library": "git+https://git.com/Frontend/library.git", 。。。 },在开发的时候可以换成file协议，这样方便调试。在ci中，依赖的库不是每次都用npm install/updat...原创 2019-05-10 14:31:55 · 1029 阅读 · 0 评论 -
Vue2在实际项目中的应用——程序入口启动
由于一个项目中要build出来几个访问端口，所以会有几个对应的main-xxx.js。main中主要干的几件事：1）加载各种库，包括element-ui和通用的library2）判断是开发环境还是生产环境，进行不同的初始化过程1）如果是开发环境，直接初始化app组件，假定用户信息在localstorage中已经存在了2）如果是生产环境，先检查是否已经登录，然后请求api加载用户...原创 2019-05-10 14:07:25 · 1790 阅读 · 0 评论 -
Vue2在实际项目中的应用——表格组件功能介绍
TableList组件是以ElementUI Table表格组件为主，并封装了一系列其它组件，提供了以下主要功能筛选功能 搜索功能 分页功能 加载过程以及错误信息提示功能 行展开功能 单选行功能 switch开关组件功能 progress进度组件功能 分行显示日期时间组件功能 动态组件渲染功能 自定义列组件功能表格组件可以分为三个部分：头部（筛选，搜索）、数据部分、底...原创 2019-05-14 14:20:44 · 2276 阅读 · 0 评论 -
Vue2在实际项目中的应用——模块划分以及路由配置
整体项目模块的划分以业务逻辑为主，不按照vue组件类型进行划分。按照组件类型划分会很难维护，降低查找文件的速度。下面以系统管理举例：系统管理在UI上是一个一级菜单，下面会有三个二级菜单，包括审计，消息管理和发布者管理。所以直接映射到源代码结构就是system-mgmt目录下有三个二级目录。其中消息管理下面直接是相应的组件以及服务，而发布者管理下面又进行了一次划分，因为这个功能有三个ta...原创 2019-05-09 14:21:48 · 1349 阅读 · 0 评论 -
Vue2在实际项目中的应用——前端工具，js框架以及库介绍
前端的工具就是webpack2，做了以下几点优化1）加入了StyleLintPlugin，对scss进行格式进行检查2）使用HappyPack，ParallelUglifyPlugin进行build的速度优化3）使用ContextReplacementPlugin优化moment库的多语言支持4）通过定义externals把一些库用CDN方式引入，减小文件尺寸，优化加载速度e...原创 2019-05-09 13:50:05 · 538 阅读 · 0 评论 -
Vue2在实际项目中的应用——命名规范概览
vue的官方网站现在有了一个风格指南（https://cn.vuejs.org/v2/style-guide/），当时写这个项目的时候，这个指南还不是很完整，所以项目并没有完全遵循这个指南。指南终究是指南，也没必要完全遵循，只要项目组内大家根据使用习惯达成一致就行。目录命名：一般以小写+中划线命名，比较易读文件命名：项目中采取了和目录命名基本一致的规则，但是会加一个表示不同组件的后缀。比如...原创 2019-05-08 15:05:09 · 2501 阅读 · 0 评论