WEB前端开发流程总结
作者声明:本博客中所写的文章,都是博主自学过程的笔记,参考了很多的学习资料,学习资料和笔记会注明出处,所有的内容都以交流学习为主。有不正确的地方,欢迎批评指正
WEB前端开发项目流程总结
1.新建项目文件夹

文件夹结构要有层次,一般包括
src:用于存放源代码。
css:存放css代码
index.css:用于存放设置主页的scss
common.css:存放公共的样式 ===>样式重置
font:存放字体
img:用于存放图片
js:用于存放js代码
lib:用于存放第三方库的内容
sass:用于存放sass代码
index.scss:用于存放设置主页的scss
common.scss:存放公共的样式 ===>样式重置
_base.scss:用于存放公共的变量
index.html:主页内容 ==> 页面模板
dist:用于最终打包压缩
2.利用npm进行包管理
npm进行包管理的流程:以gulp为例
3.开始进行开发
开发中用到的插件的使用:
关于photoshop的使用
关于markman的使用
关于sass的使用
关于iconfont在线字体的使用
关于在线字体的使用(fontawesome bootstrap 自定义字体)
关于zepto.js的使用
关于swiper轮播图的使用
关于hotcss的使用
关于iscroll插件的使用
关于fullpage的使用
关于cookie的内容js-cookie
4.进行调试
开发中用到的调试工具:
移动端真机调试:
关于一键投影和chrome的使用
关于spy-debugger的使用
5.发布项目
开发中发布项目的工具:
关于live-server的使用
关于json-server的使用
6.开发经验的总结
关于横竖屏rem计算延迟的问题
关于时钟的问题
关于屏幕适配的问题
关于css3的兼容处理
WEB前端开发流程总结的更多相关文章
- 2022年Web前端开发流程和学习路线(详尽版)
前言 前端侧重于人机交互和用户体验,后端侧重于业务逻辑和大规模数据处理.理论上,面向用户的产品里,所有问题(包括产品.设计.后端.甚至看不见的问题)的表现形式,都会暴露在前端,而只有部分问题(数据问题 ...
- Grunt搭建自动化web前端开发环境--完整流程
Grunt搭建自动化web前端开发环境-完整流程 jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! 1. 前言 各位web前 ...
- 面试web前端开发,被打击了
今天我去面试web前端开发,被打击了,也跟我也有一定的关系,最基础的东西我都没回答好,哎! 主要是我在等我有意向的公司给我发offer,闲着没事,刚好又有公司叫我去面试,我抱着多面一家也没有啥子坏处就 ...
- 【Yeoman】热部署web前端开发环境
本文来自 “简时空”:<[Yeoman]热部署web前端开发环境>(自动同步导入到博客园) 1.序言 记得去年的暑假看RequireJS的时候,曾少不更事般地惊为前端利器,写了<Sp ...
- 给 Web 前端开发人员推荐20款 CSS 编辑器
CSS 和 HTML,JavaScript 是网页的基础,作为前端开发人员,对这三者都要很熟悉.特别是未来流行全栈开发的时代,每项技术都是你知识结构中必要的一个节点. 在开发中,选择好工具是非常重要的 ...
- 淘宝前端工程师:国内WEB前端开发十日谈
一直想写这篇"十日谈",聊聊我对Web前端开发的体会,顺便解答下周围不少人的困惑和迷惘.我不打算聊太多技术,我想,通过技术的历练,得到的反思应当更重要. 我一直认为自己是" ...
- Web前端开发规范文档
Web前端开发规范文档 规范目的: 使开发流程更加规范化. 通用规范: TAB键用两个空格代替(windos下tab键占四个空格,linux下TAB键占八个空格). CSS样式属性或者JAVASCRI ...
- Web前端开发十日谈
=========================================================================== 原文章: http://kb.cnblogs.c ...
- 用grunt搭建自动化的web前端开发环境实战教程(详细步骤)
用grunt搭建自动化的web前端开发环境实战教程(详细步骤) jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用!前端自动化, ...
随机推荐
- #leetcode刷题之路41-缺失的第一个正数
给定一个未排序的整数数组,找出其中没有出现的最小的正整数.示例 1:输入: [1,2,0]输出: 3示例 2:输入: [3,4,-1,1]输出: 2示例 3:输入: [7,8,9,11,12]输出: ...
- laravel5.5源码笔记(五、Pipeline管道模式)
Pipeline管道模式,也有人叫它装饰模式.应该说管道是装饰模式的一个变种,虽然思想都是一样的,但这个是闭包的版本,实现方式与传统装饰模式也不太一样.在laravel的源码中算是一个比较核心的设计模 ...
- nRF52832 BLE_DFU空中升级OTA(三)准备升级工程(SDK14.2.0)
准备需要加入DFU功能的工程 在工程main文件services_init函数中加入DFU服务 uint32_t err_code; // Initialize the async SVCI inte ...
- 领扣-两数之和-Python实现
领扣每日一题 给定一个整数数组 nums 和一个目标值 target,请你在该数组中找出和为目标值的那 两个 整数,并返回他们的数组下标. 你可以假设每种输入只会对应一个答案.但是,你不能重复利用这个 ...
- python IO模式(多路复用和异步IO深入理解)
1.事件渠道模型.事件渠道为异步IO的原型. 2.IO模式,一次IO调用会经历两个阶段.一.等待数据阶段,将数据从网络或者是磁盘读取到系统内核(kennel) 二.将数据从内核拷贝到进程中. 基于这两 ...
- em,rem区别比较
rem是基于html元素的字体大小来决定,而em则根据使用它的元素的大小决定. 注意:很多人错误以为em是根据父类元素,实际上是使用它的元素继承了父类元素的属性才会产生的错觉. 主要区别 em 和 r ...
- .Net 两个对像之间的映射 ( 二 )
一.使用 class Program { static void Main(string[] args) { User u1 = new User(); u1.UserName = "aaa ...
- cygwin环境搭建
可以在家目录下查看.bash_profile里的PATH.如果是:PATH=$PATH:$HOME/bin则需要添加成如下: PATH=$PATH:$HOME/bin:/sbin:/usr/bin:/ ...
- 20155212 2016-2017-2 《Java程序设计》第2周学习总结
20155212 2016-2017-2 <Java程序设计>第2周学习总结 教材学习内容总结 三种print System.out.println:在标准输出中显示文字后换行. Syst ...
- 【BZOJ2004】[HNOI2010]Bus 公交线路
[BZOJ2004][HNOI2010]Bus 公交线路 题面 bzoj 洛谷 题解 $N$特别大$P,K$特别小,一看就是矩阵快速幂+状压 设$f[S]$表示公交车状态为$S$的方案数 这是什么意思 ...