一、我为什么写这篇博客？

我已经入门前端开发大约有了3年时间，从最开始的静态页面编写，到后来的使用ajax开发动态页面，到现在的使用Vue、React、Angular等前端框架开发Web应用，我写过许许多多项目，虽然我的水平依然很一般，但是在不久的将来我可能会告别这段路，这可能会是我写的最后一篇前端有关的文章。

这篇文章的目的在于帮助只接触过普通的html+css+js开发网页，甚至是Javascript零基础的朋友对目前流行的前端框架如何开发Web应用有所了解。

在这篇文章中，我会以一个Vue开发基于网易云Api的音乐播放器应用为例，讲解Vue开发中的一些内容，因为我三大框架都有所使用，所以本篇文章讲解的大多数东西都是三大框架相同的地方。

本篇文章不是Vue的基础教程，可能略有涉及，但会用通俗的语言讲解。

二、初步的了解

因为本篇教程不是讲解Vue，所以对Vue的一些信息不作赘述。

2.1 使用vue开发和我们上课时用的html+css+js开发前端有什么不同？

首先理解一个概念，这也是目前市面上流行的大多数前端框架都有的概念——“组件“

我们可以用我们软件工程里“模块”的概念来理解组件。什么是模块？我们可以理解为实现某一种功能的代码，重点是功能。同理，回想一下平时我们开发页面时，是否是将一整个页面，放在同一个html文件里，这样会导致整个文件非常庞大。但细想一下，我们可以把页面中不同的部分，封装成一个一个组件，比如导航栏，我封装成一个Nav组件，然后Nav组件中，可以有子组件（这个应该好理解吧）Search组件，也就是搜索组件。这样下来，整个页面被我们切割成了各个组件，当我们开发时，目录结构十分清晰，代码可读性也很好。

2.2 Vue开发的优势

回想一下我们上课时开发的网页，或者你平时在使用大多数网站，是不是在同一个网站里，点击某个跳转按钮，比如说我点击了搜索按钮，他是不是跳转到了一个搜索页面，这个过程中浏览器重新加载了页面。

Vue开发出来的web应用，是一种单页应用，我们先不着急理解什么是单页应用，我先来讲讲在我们使用vue应用中，页面中到底发生了什么，我们得知道有个概念，组件的生命周期，因为本篇文章不是Vue教程，所以我就简单讲一下，比如每个人都有出生和死亡，组件也是，比如说当页面刚加载时，某些组件出现，这是这些组件的“诞生阶段”，当这些组件从页面中消失（比如点击关闭键关闭某个弹出框），这就是组件的“死亡阶段“，我们可以把这些阶段，简单理解为组件的生命周期的阶段，当然，组件的生命周期阶段不止“诞生”和“死亡”，就好比你的一生会有许多重要的阶段。说了那么多废话知识，我们再来理解下什么是单页应用。举例说明，当我们在Vue应用中点击导航栏的菜单切换页面时，页面中发生的事情时，原来的组件都被销毁了，而取而代之的是新的组件被创建了出来，而不像我们之前开发过程中，跳转到了另一个html文件。这样的好处是极大的增加了用户体验，因为用户并不用等待网页加载了，整个使用过程中会感觉十分流畅。

2.3 Vue的一些原理

使用vue会让人感到身心愉悦,它同时具备angular和react的优点,轻量级,api简单,文档齐全,简单强大,麻雀虽小五脏俱全。按官方的话来说Vue是一套构建用户界面的渐进式框架。

那么,怎样理解什么是渐进式框架？在这之前,我们首先要理解什么是框架。在最初的前端开发中，为了完成某个功能,我们需要通过js在HTML页面中获得dom节点，随后获得dom节点中的文本内容或者在dom节点上添加事件,进行一系列的程序操作，但是,如果任务量很大的情况下，代码会随着业务的增加而变得臃肿和混乱,在现实的开发中,负责的逻辑和巨大的开发量，是原生js无法完成的。

这个时候,开发人员将js代码分为了三个板块,数据(Model),逻辑控制(*),视图(View),数据板块只负责数据部分,视图板块负责更改样式,逻辑控制负责联系视图板块和数据板块,这样子有很大的好处,当需求发生变动时,只需要修改对应的板块就好

这种开发模式，就是所谓的MV结构，我们现在了解的MVC，MVP，MVVM都是MV的衍生物，对比这几种框架模式，我们会总结出来一个本质的特点，那就是这些开发模式都是让视图和数据间不会发生直接联系．对比用原生JS获得dom的操作，你会发现原生dom流其实是将dom作为数据，从dom中获得Model，随后又更改dom来实现更新视图，视图和模型其实混在一起，所以代码自然混乱，不易维护。

三、项目解析

首先，我先来带你看下项目大致的结构目录

我们大致看一下，各部分分别是干什么的

├── build                  // 构建服务和 webpack 配置
├── config                 // 项目不同环境的配置
├── index.html             // 项目入口文件
├── package.json           // 项目配置文件
├── static                 // 放置静态资源
├── src                    // 生产目录
│   ├── api                  // api请求
│   ├── assets               // 公共的images, fonts， js资源
│   ├── components           // 各种组件
│   ├── store                // vuex状态管理
│   ├── App.vue              // 主页面
│   ├── router               // 路由配置
│   └── main.js              // Webpack 预编译入口

本文主要以介绍src目录下的的目录为主

3.1 api

这里我只进行简单的文字说明，具体的代码请自行阅读项目。

可以清楚的看到，api中有两个文件，config.js与index.js

config.js可以理解为将api定义为常量，这样当我们调用api的时候，就不用繁琐的将一串url输入，而是调用对应的变量名。这样做不仅简便而且代码具有相当高的可读性

Index.js里存放着一个个调用api请求的函数，本项目使用npm上的axios进行http请求。如果对此没有基础，可以简单理解为本文件中的一个个函数通过config.js里的api常量，通过http请求获取到相应的数据。

3.2 assets

assets中存放了可以通用的一些资源，比如字体，图片（如网站logo，很多地方都会用到），还有一些util函数

3.3 components

Component即为组件，这个概念在前文已经说的很详细了，就不再过多赘述。

可以清楚的看到，里面放着各个板块相应的组件，其中common是可以用来通用的组件，即不同页面中相同的组件，放在common中便于重用。

3.4 router

如果你有java开发后端的基础，那对router应该不会陌生

router（路由），其实就是指向的意思，当我点击页面上的home按钮时，页面中就要显示home的内容，如果点击页面上的about 按钮，页面中就要显示about 的内容。Home按钮 => home 内容， about按钮 => about 内容，也可以说是一种映射. 所以在页面上有两个部分，一个是点击部分，一个是点击之后，显示内容的部分。

这是我们访问home页面是，地址栏的url

可以看到，访问时的url，与html+css+js开发网页时有所不同，当我们使用html+css+js开发网页时，地址栏是localhost:3000/home.html这种形式(如果你用过jsp开发，那后面会是.jsp)，因为我们之前说过，当页面跳转时，它的本质是加载不同的html文件，而不是像vue这样，通过路由来控制不同的组件创建与销毁

3.5 store

这应该是比较难的一块，涉及到数据管理框架，vue中使用vuex来进行数据管理，如果要细讲vuex，那可能会需要极大的篇幅。

这里我只会帮助你大致的理解，我们可以把这个store理解为vuex在浏览器中创建的一个数据仓库。

这样做的好处是什么？

设想一下，如果我们的web应用，内容比较丰富的时候，许多地方可能会用到重复的数据，那如果没有数据管理，我们会需要在每一次需要数据的时候，都进行http请求获取数据（因为许多组件是不会互通的），这样一来，会大大增加性能开销

当我们使用vuex后，只需要将获取到可能会重用的数据存入vuex建立的store中，以便下次使用，而且在开发过程中，我们能够通过chrome的插件看到它的内容，也为开发带来许多便利。

总结

以上为我对前端框架的一些理解，后续可能会有补充。