写在开头
- 所谓实践是检验真理的唯一标准，同样的项目也是检验自己技术的唯一标准，如果你已经看到这篇文章说明你已经有了一定的前端基础，这包括HTML，CSS，JS等，不过如果你觉得自己的基础不够好也没有关系，这个关于此项目的博客会尽量详细的讲解各部分的实现，同时也会说明需要掌握的技术，所以你大可放心的浏览本篇文章。
关于此项目的框架及架构说明
- 在阅读以下文字之前你得确保你的电脑安装了node.js环境，当然如果你安装了git就更好了，项目已经托管到了github上，如果你没有安装这些支持我建议你安装，因为对于一个前端工程师来说这些是必备的，而且网上也有许多现成的教学，只需要点点点就可以了
如果你已经安装完了这些依赖，就可以访问我们的项目地址了（项目地址），你可以下载压缩包，解压来查看并在本地运行，当然我更推荐你使用下面的方式来运行1
2
3
4//第一条命令是从git上克隆代码，后两条命令下文会有讲解，只要复制下面的代码你就可以在本地运行这个项目了
git clone https://github.com/HUST826LAB/web_front.git
npm install
npm run dev - 此项目主要使用了vue框架（vue官网）此框架的中文文档写的很好，所以大家可以轻松的进行学习
- 本项目使用vue-cli进行构建，虽然不是很和自己的口味，但是胜在方便，所以当我们在github上下载代码后只需执行以下指令即可在本地开启服务器，来调试我们的代码（vue-cli）
1
2
3
4
5
6//首先安装依赖
npm install
//开启本地服务器
npm run dev
//生成发布版代码（默认在dist文件夹下）
npm run build - vue是一种组件化的框架，我们可以这么理解，页面中的所有结构都是组件，甚至是页面本身，具体可以看官网解释，我们在这个项目中组件都是vue单文件，这个单文件定义了一个组件，其中包括结构（hmtl），样式（css），行为（vue的数据驱动），具体可以浏览官方文档（vue单文件）
- 可能你看到这么多文件夹有点懵，可能以前你写前端代码只是分几个文件夹比如js，css，html，甚至可能使用一种“不分彼此”的方式，不过不用担心，你会很快喜欢上结构清晰的编码方式，同样的你也会很容易的理解我为什么要这么做
其实我们编写的代码只是src文件夹中的文件
src文件夹中的每个文件夹都有自己的功能，assets中存放的是静态资源文件比如字体文件，图片文件等；
components中存放的是组件，我们可以把一个页面理解成一个机器，而组件就是一个零件，我们可以通过组件来拼凑成一个页面，提高了我们的代码复用度，当然，我也通过这种机制来让我们的代码看起来不是那么冗长；
pages中存放的就是我们的页面了
router文件夹中存放的是我们的路由配置，此项目使用了前端路由，也就是说所有的页面跳转监听都是由我们前端来实现的，而不是后台去匹配有关vue路由的知识可以在官网查看，你不一定要理解，会用即可，如果你能力足够，我也推荐你了解一些内部机理（vue路由文档）
server中存放的是一些复用性很高的功能性代码，看起来和components的功能有些相似，不过其中都是js文件，而不包括页面样式和结构，这其中包括二维码生成，数据交互，存取cookie等
store中存放的是vex相关文件，此项目本来是想使用的，但是由于vuex中的数据会在刷新后消失，所以我最终采用了url传参，不过如果你开发的是一个webapp这种不能随意刷新的场景我还是推荐你了解和使用的（vuex文档）
App.vue是我们的根节点文件，所有的页面都是挂载到这个组件上的
main.js app.vue加载这个文件，所以我么可以把要在全局执行的代码放在这里，我就把对屏幕尺寸判断，并改变font-size（因为我们css中使用的单位一直都是rem，rem是一种根据hmtl标签的font-size动态改变的单位，你可以自行百度）的代码放入其中
使用vue-cli构建项目
vue-cli介绍
- vue提供了方便的vue-cli来让我们构建项目框架，在现在的前端已经不是以前那样写个html，写个css，写个js然后把代码往服务器上一扔就可以运行的时代了，为了体验我们需要将代码打包，分割等等，如果使用了es6的语法为了兼容我们还要将其转换为es5的语法，所以我们就必须使用webpack打包工具，通过webpack我们可以很方便的讲代码打包，vue-cli可以使用webpack打包，只需要
npm run build这样简单的代码就可以将代码打包发布，就像我们以前一样直接把代码扔到服务器上一样方便，而你只需要用vue-cli构建就可以了。vue-cli使用
- 如果你没有安装过vue-cli你需要先通过npm安装，npm是一个包管理工具，在你安装node.js的时候就安装好了，如果你的网路状况不佳，你可以使用cnpm，这是国内淘宝拷贝的npm，npm能做的，cnpm都可以，而且下载速度更快，百度也有许多安装方法，在此就不在赘述了。
1
2//在全局安装vue-cli
npm install -g vue-cli - 安装后你就可以使用了，在你想创建项目的位置右键打开命令行工具，然后输入下面的代码
1
2
3
4
5
6//webpack是你使用的打包工具的名字，my-projiect是你项目的名字，可以随便起
vue init webpack my-project
//安装依赖
npm install
npm run dev
//现在你可以看到你构建的页面了 - 现在你已经构建了一个项目，并且能让它运行起来了，如果出现什么问题不要着急，想一想环境安装好了吗（node.js），以上所有的命令都应在命令行中执行，如果你安装了git你在文件夹中右键会有
git bash here的选项，它完全可以替代系统自带的命令行工具，如果你使用的是mac可以使用系统自带的终端，你可以通过系统设置来让右键菜单出现在“文件夹中打开终端”的选项。 - 所谓万事开头难，你可能从来没有想过前端开发居然也会要求如此复杂的环境，补充忘说的一点，你最好用Chrome浏览器来调试页面，而不是使用ie，safari，edge，360，qq等浏览器，当你遇到问题善用你手边的工具，比如文章中提到的文档，或者万能的百度和谷歌，当然，如果你碰到难以解决的问题或者希望与我交流可以给我发邮件，我可以尝试为你解决问题或者提供一些建议，我的邮箱：buzhidao_1996@163.com
#项目实战