Webpack
文章平均质量分 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 · 1357 阅读 · 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 · 532 阅读 · 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 · 591 阅读 · 0 评论 -
Vue2在实际项目中的应用——公共组件介绍
这个公共的库在项目中是通过dependencies引入进来的:"dependencies": { 。。。 "frontend-library": "git+https://git.com/Frontend/library.git", 。。。 },在开发的时候可以换成file协议,这样方便调试。在ci中,依赖的库不是每次都用npm install/updat...原创 2019-05-10 14:31:55 · 881 阅读 · 0 评论 -
Vue2在实际项目中的应用——程序入口启动
由于一个项目中要build出来几个访问端口,所以会有几个对应的main-xxx.js。main中主要干的几件事:1)加载各种库,包括element-ui和通用的library2)判断是开发环境还是生产环境,进行不同的初始化过程1)如果是开发环境,直接初始化app组件,假定用户信息在localstorage中已经存在了2)如果是生产环境,先检查是否已经登录,然后请求api加载用户...原创 2019-05-10 14:07:25 · 1695 阅读 · 0 评论 -
Vue2在实际项目中的应用——表格组件功能介绍
TableList组件是以ElementUI Table表格组件为主,并封装了一系列其它组件,提供了以下主要功能筛选功能 搜索功能 分页功能 加载过程以及错误信息提示功能 行展开功能 单选行功能 switch开关组件功能 progress进度组件功能 分行显示日期时间组件功能 动态组件渲染功能 自定义列组件功能表格组件可以分为三个部分:头部(筛选,搜索)、数据部分、底...原创 2019-05-14 14:20:44 · 1858 阅读 · 0 评论 -
Vue2在实际项目中的应用——模块划分以及路由配置
整体项目模块的划分以业务逻辑为主,不按照vue组件类型进行划分。按照组件类型划分会很难维护,降低查找文件的速度。下面以系统管理举例:系统管理在UI上是一个一级菜单,下面会有三个二级菜单,包括审计,消息管理和发布者管理。所以直接映射到源代码结构就是system-mgmt目录下有三个二级目录。其中消息管理下面直接是相应的组件以及服务,而发布者管理下面又进行了一次划分,因为这个功能有三个ta...原创 2019-05-09 14:21:48 · 1137 阅读 · 0 评论 -
Vue2在实际项目中的应用——前端工具,js框架以及库介绍
前端的工具就是webpack2,做了以下几点优化1)加入了StyleLintPlugin,对scss进行格式进行检查2)使用HappyPack,ParallelUglifyPlugin进行build的速度优化3)使用ContextReplacementPlugin优化moment库的多语言支持4)通过定义externals把一些库用CDN方式引入,减小文件尺寸,优化加载速度e...原创 2019-05-09 13:50:05 · 449 阅读 · 0 评论 -
Vue2在实际项目中的应用——命名规范概览
vue的官方网站现在有了一个风格指南(https://cn.vuejs.org/v2/style-guide/),当时写这个项目的时候,这个指南还不是很完整,所以项目并没有完全遵循这个指南。指南终究是指南,也没必要完全遵循,只要项目组内大家根据使用习惯达成一致就行。目录命名:一般以小写+中划线命名,比较易读文件命名:项目中采取了和目录命名基本一致的规则,但是会加一个表示不同组件的后缀。比如...原创 2019-05-08 15:05:09 · 2308 阅读 · 0 评论 -
Vue2在实际项目中的应用——项目目录结构概览
项目采用的是Vue2+Webpack2,分成了几个项目:一个通用的library项目,里面是一些公用的组件;一个是平台项目,会build出来三个端,每个端不同角色的用户会登陆各自的平台。下面先看一下library项目结构:其中:components目录是通用的组件封装,比如表格之类的directives目录是一些指令,比如最大化对话框等filters目录是过滤器,比如时间格...原创 2019-05-08 14:12:51 · 949 阅读 · 0 评论 -
Vue2在实际项目中的应用
1,项目目录结构概览2,命名规范概览3,前端工具,js框架以及库介绍4,模块划分以及路由配置5,程序入口启动6,公共组件介绍7,服务层介绍8,打包发布9,表格组件功能介绍...原创 2019-05-08 14:13:44 · 420 阅读 · 0 评论