这篇文章是去年疫情期间在家给公司同事写的前端开发教程。

为什么要用组件化的方式来开发前端页面呢?

首先来谈谈我们公司开发现有的问题。

这些年web前端开发技术日新月异,发展迅猛,而我们公司现有的开发方式和采用的技术还是比较落后的。

我们公司现在采取的是传统的开发方式,美工负责设计系统需要的各种图片、切图,设计页面布局和编写样式。上面的工作完成后就交给后台开发人员了,后台开发人员负责后台逻辑,从数据库中读取数据并渲染到页面上。前端的所有工作围绕着切图、调样式开展。我们后端开发人员开发前端页面需要的功能也采用的是比较原始的方式。JavaScript语言还停留在es5阶段,很少运用现在流行的前端开发工具,前端框架主要使用jquery,更为先进的高效的框架比如Angualr,vue,react等等都没有使用过,没有使用工程化、组件化的,面向对象的方式做前端项目,代码跟页面dom结构耦合过于紧密,项目不易维护,重复工作多,不易复用。

前端开发现在的前端趋势是什么?就是工程化,工作的模式和后端开发一样,也是多模块多人协作开发(这也就诞生了CommonJS、AMD/CMD、require这些模块化标准),那么就需要进行工程化,否则代码很难管理与维护。前端承担的任务也比原来繁重了很多,后端只需要提供接口API,剩下的视图层的渲染工作全部由前端完成。前后端分工越来越清晰,前后端在项目开发过程中不再相互制约,前端与后端已经分离。

现在前端最流行的开发工具是VsCode,非常非常的好用。

工程化开发一般会用到webpack这个工具来配合其他工具来开发,比如可以用原生js(最好采用es6及以上版本)+webpack的方式,也可以用js+前端框架(jquery,最好是vue,react)+webpack的方式,

下面我们以webpack+vue的方式简单的说一下工程化开发前端项目的搭建过程:

以下过程都是基于webpack4的

1、安装node.js

进入 https://nodejs.org/en/download/ 根据自己电脑的系统不同,下载对应的安装文件,进行安装

2、由于npm下载资源很慢,因此推荐使用阿里的 cnpm来取代npm

3、安装webpack(webpack是什么后面再讲)

sudo cnpm install webpack@4.5.0 -g

4、安装webpack-cli(脚手架工具)

sudo cnpm install webpack-cli -g

sudo cnpm install webpack-cli -D

这两步都要执行

5、初始化工程

新建工程目录

mkdir syInfoApp

进入工程目录

cd syInfoApp

初始化

cnpm init

安装后,目录下会产生一个package.json文件,里面记录了依赖的模块信息、版本信息还有项目的一些基本信息。网上的一些教程,使用已经搭建好的环境进行讲解,当看到package.json文件的时候,里面一大堆的东西让人头晕,还是从头一点儿点儿来比较清晰

6、在项目中安装webpack

进入项目所在目,执行如下命令

cnpm install webpack@4.5.0 –save-dev

这时可以看到在package.json中看到对webpack的依赖信息了

7、创建项目基本目录

参照约定,创建以下目录

/src:存放源码目录

/src/assets:存放项目公用的图片、js、样式、模板、数据的资源

/src/components:存放封装好的前端组件,比如图片上传组件、树组件、列表组件等等

/src/routes:存放vue-router的路由配置

/src/views:存放应用的视图,比如用户管理页面(叫页面不确切,因为我们是单页面应用,整个系统只有一个页面。所以叫html片段更贴切)

/dist:存放webpack打包后的文件,是正式发布的目录

8、创建表要的文件

app.vue:这是基于Vue开发的根实例。

index.js:负责将app.vue挂载到项目的主页,也就是index.html上(index.html在哪?后续会介绍)

工程化开发的目录结构图(采用的是vue框架):

基于ES6+webpack的工程化、组件化web前端开发

下面我们来讲一讲组件化编程。 组件化编程的特点:页面结构、样式、逻辑分离 也就是html、样式、js分离。目的:好维护,易于修改,可复用。 一个组件对应一个模板页面,一个js文件,一个样式文件。这些文件具体怎么编写在手机上不好展示,回公司后可以把一些示例代码发给大家。 我们怎么来页面的拆分组件呢? 下面我以一个具有首页、列表页、详情页的典型网站来简单分析怎么进行组件拆分。 组件分析:

首页: 

基于ES6+webpack的工程化、组件化web前端开发

列表页: 

基于ES6+webpack的工程化、组件化web前端开发

详情页: 

基于ES6+webpack的工程化、组件化web前端开发

组件编程具体怎么做,到时候整理一个具体的项目代码给大家。

webpack介绍: 什么是WebPack?

webpack 是一个现代 JavaScript 应用序的静态模块打包器(module bundler) 它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Sass/scss,TypeScript等),并将其转换和打包为合适的格式供浏览器使用。在3.0出现后,Webpack还肩负起了优化项目的责任。 为什么要使用webpack. 前端工程化开发流行后,特别是SPA(single page web application 单页应用)技术流行后,JavaScript的复杂度增加和需要一大堆依赖包,还需要解决SCSS,Less……新增样式的扩展写法的编译工作。所以现代化的前端已经完全依赖于WebPack的辅助了。 现在最流行的三个前端框架,可以说和webpack已经紧密相连,框架官方都推出了和自身框架依赖的webpack构建工具。

React.js+WebPack

Vue.js+WebPack

AngluarJS+WebPack

从此可以看出,无论你前端走那条线,你都需要具备Webpack知识。

webpack的作用:

1、打包:可以把多个Javascript文件打包压缩成一个文件,减少服务器压力和下载带宽。2、转换:把Sass/scss转换成浏览器可以识别的CSS,把拓展语言转换成为普通的JavaScript,让浏览器顺利运行。现在还有一些浏览器的老版本不支持es6及以上版本,webpack让你轻松使用es6以及更高版本。 3、优化:前端变的越来越复杂后,性能也会遇到问题,而WebPack也开始肩负起了优化和提升性能的责任。

安装WebPack

要使用WebPack就要先进行安装, 一般WebPack的安装采用的是命令行npm形式的安装。 这里我以windows系统为例,讲解一下安装方法。 具体安装方法:

1、用win+R打开运行对话框,输入cmd进入命令行模式。然后找到你想开始项目的地方,输入下方代码: mkdir webpack_demo cd webpack_demo 第一句是建立一个文件夹,第二句是进入这个文件夹。这个文件夹就是我们的项目文件目录了,文件夹建立好后,可以通过下面命令安装WebPack。 需要注意的是,你在执行下一步时必须安装node,可以通过 node -v来查看node安装情况和版本,如果没有安装,要先安装node才可以继续进行。

•全局安装 npm install -g webpack 如果你这时安装失败了(出现了报错信息),一般有三种可能: 网络问题,可以考虑使用cnpm来安装(这个是淘宝实时更新的镜像),具体可以登录cnpm的官方网站学习http://npm.taobao.org/。 权限问题,在Liux、Mac安装是需要权限,如果你是Windows系统,主要要使用以管理员方式安装。请在命令前加sudo 即可

注意:全局安装是可以的,但是webpack官方是不推荐的。这会将您项目中的 webpack 锁定到指定版本,并且在使用不同的 webpack 版本的项目中,可能会导致构建失败。

•对项目目录进行安装 全局安装完成后,我们还要进行一个项目目录的安装。在用npm安装前,我们先要进行一下初始化,初始化的主要目的是生成package.json文件(这是一个标准的npm说明文件,里面蕴含了丰富的信息,包括当前项目的依赖模块,自定义的脚本任务等等,如果你对此文件还不了解,可以看看node 的相关知识)。

在命令行输入: npm init 输入完成后,npm终端会问你关于项目的名称,描述……一堆内容,如果你不考虑发布到npm上,这些内容都不重要,而且我们后期还可以用文本的形式修改这些内容。现在我们只要一路回车就完成了初始化。这时用dir命令已经可以看到生成的package.json文件了。

输入下面命令进行项目目录的安装: npm install –save-dev webpack 这里的参数–save是要保存到package.json中,dev是在开发时使用这个包,而生产环境中不使用。

开发环境和生产环境: 开发环境:在开发时需要的环境,这里指在开发时需要依赖的包。

生产环境:程序开发完成,开始运行后的环境,这里指要使项目运行,所需要的依赖包。

查看webpack版本 你安装好后,会想知道你现在webpack版本,在工作中交流时,也会经常问到你,你的打包版本是什么?这时候我们可以用下面的命令进行查看。 webpack -v 出现了版本号,也说明你的webpack安装成功了。 webpack的配置: webpack的配置有点复杂,容易出错,手机上不好讲解,今天就简单说一下,以后有机会可以在电脑上讲解一下。

webpack的配置文件的名字叫webpack.congfig.js,下图是webpack最基本的配置。实际上的配置要复杂很多,我们要配置项目需要的依赖项和插件。一般我们配置完一个项目后,新建一个项目时,可以把原来的配置文件复制过去,稍微修改一下,就可以使用,不用每次都重新配。