![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
工程化
文章平均质量分 94
前端工程化
醉逍遥neo
少而精,胜于多而劣。
展开
-
npm插件制作(全网最全教程~)
一、npmnpm是h5前端最常用的包管理工具,官方的npm仓库(传送门),用来存储第三方包(插件),通过npm命令下载安装和管理。npm是随着node.js一起诞生的,起初是node.js用来管理包依赖的工具,后来随着webpack这类打包工具的兴起,npm逐渐成为h5前端使用和管理第三方插件的默认平台。二、插件相对于js功能类的插件来说,组件插件的配置更加复杂,下面以一个ts编写的react组件为例。原创 2022-03-10 17:30:22 · 6660 阅读 · 0 评论 -
webpack迁移vite小结
Vite 是新一代的前端开发与构建工具,相比于传统的webpack,Vite 有着极速的本地项目启动速度(通常不超过5s)以及极速的热更新速度(几乎无感知)。Vite 官网:https://cn.vitejs.dev/下面分享 Webpack 项目(vue-cli项目)迁移至 Vite 的过程步骤、遇到的问题及解决方式。一、项目背景首先不建议做同时支持webpack和vite,这种只适合自己玩玩,实际项目中要考虑多人开发时的协作和维护成本,只用一种最好。原项目主技术栈及版本: Vue@3.原创 2021-12-09 15:57:54 · 4533 阅读 · 0 评论 -
jenkins + nginx 前端自动化部署项目
由于资源有限,没有linux服务器可用,这里就以windows环境为例,配合jenkins和nginx,搭建一个前端项目自动化部署示例,供参考和学习。一、jenkins1、下载安装官网下载jenkins:传送门选择LTS windows版本:按照提示一步步安装jenkins然后安装相关插件,下载很慢,慢慢等吧,我等了一整天,还重试了一次才把全部插件下载安装完。。。2、创建jenkins任务jenkins首页,左上角选择新建item,输入任务名称,建议用项目名+api服务器环境名,选择f原创 2020-10-30 11:47:18 · 4281 阅读 · 0 评论 -
webpack 从零开始配置教程
由于webpack5刚刚发布,相关生态还不成熟,这里以webpack4的版本为例,为了避免插件版本的兼容问题,以下安装个别npm依赖时我会指定版本号。本文仅作为webpack学习之用,实际项目中还是更推荐使用成熟的脚手架搭建,然后根据学习的成果再去定制改造。一、基础1、目录文件新建一个文件夹作为示例项目,项目根目录运行命令初始化package.json:npm init -y然后按照以下目录先创建空文件:2、入口和出口安装webpack依赖npm i -D webpack@4.44原创 2020-11-24 17:23:49 · 1540 阅读 · 1 评论 -
前端h5项目统一代码风格配置(eslint + stylelint + prettier + husky + lint-staged)
github传送门:1、h5主项目2、项目脚手架3、子项目模板系列文章传送门:vue简易微前端项目搭建(一):项目背景及简介vue简易微前端项目搭建(二):子项目模板及项目脚手架搭建vue简易微前端项目搭建(三):webpack相关配置1、概述统一代码风格包括编辑器基本配置、代码校验及格式化工具,强烈建议尝试配置下,特别是eslint起初可能不习惯,三五天时间就适应了,能帮助避免很多低级错误,另外对于团队开发也很重要。先介绍下这里需要用到的三个工具:editorconfig 统一原创 2020-08-31 17:46:22 · 3996 阅读 · 0 评论 -
vue简易微前端项目搭建(三):webpack相关配置
github传送门:1、h5主项目2、项目脚手架3、子项目模板系列文章传送门:vue简易微前端项目搭建(一):项目背景及简介vue简易微前端项目搭建(二):子项目模板及项目脚手架搭建1、概述由于项目是基于vue-cli4改造的,所以webpack相关配置我们就在vue.config.js里操刀,没有该文件的直接在项目根目录新建vue.config.js即可,具体配置api参考官方文档(传送门)2、process.env先说一下这个,因为后面会用到这里存储的变量值。在系列文章上一篇中说原创 2020-08-31 16:06:20 · 1319 阅读 · 0 评论 -
h5移动端屏幕适配方案(rem、vw)
1、概述移动端屏幕大小不一,要使网页能自适应不同尺寸的手机屏幕,而且还要尽可能开发便捷,目前使用最多的还是rem大法,相对比较成熟,而新兴的vw方案也可以一试。本文主要介绍了rem和vw两种方案的使用配置方式。2、meta设置首先移动端要设置好视口,使视口的宽度等于设备屏幕宽度,同时浏览器识别后就认为该网页是移动端网页,也就不再有点击延迟的问题了:<meta name="viewport" content="width=device-width, initial-scale=1.0, use原创 2020-09-25 16:26:31 · 24670 阅读 · 2 评论 -
vue简易微前端项目搭建(二):子项目模板及项目脚手架搭建
github传送门:1、h5主项目2、项目脚手架3、子项目模板系列文章传送门:1、子项目模板子项目模板就是用于快速创建一个配套的子项目,也就是在主项目目录/src/projects/下的一个子文件夹,作为模板项目,就是做个基础示例,主要是两点作用:一是能运行跑起来,方便直接写业务;二是有一个引导的作用,方便初上手的同事能快速熟悉项目的运行及使用。结构大概如下:画红圈的template文件夹下的内容即是模板文件,其他的只是代码校验工具忽略即可。基本上就是遵从vue项目src目录大致结构。原创 2020-08-28 16:13:23 · 1978 阅读 · 0 评论 -
vue简易微前端项目搭建(一):项目背景及简介
最近有空,准备写个系列教程,把公司目前在用的h5项目从搭建到实践优化的一些心得和经验记录一下,技术栈是vue2.x的,马上3.0正式版就要出了,再不写就要过时啦哈哈。github传送门:1、h5主项目2、项目脚手架3、子项目模板1、项目需求我司h5主要做移动端,运行在app和小程序里,也就是hybrid app混合开发模式。刚来公司时,公司h5才刚开始起步,同事只开发了三个h5需求,这三个需求在业务功能上都是相互独立的,所以也分开放在了三个spa项目里。。。想一想,以后开发类似需求越来越多,难原创 2020-07-16 11:43:17 · 3447 阅读 · 3 评论