前端开发必备网站，快速上手项目

前端开发必备网站

前端新手如何快速上手前端项目，高效率完成期末/导师大项目。

本文只针对Vue和Angular前端框架（因为没学过React😂）
我一开始学的是Angular，虽然两个框架大体差不多，学会一个，上手另一个会很快，但就我个人更喜欢Angular。Angular更规范，html、css样式以及业务逻辑都是分开的。Vue的话对新手更友好，也比较简单。

• 本文以Vue为例，Angular同理，大多数开源库都提供了Vue版本和Angular版本的。

1. Vue官方文档

• 地址：https://cn.vuejs.org/v2/guide/index.html
• 首先最重要的就是官方文档

先把文档过一遍，了解基本的模版语法、事件绑定、生命周期函数、父子组件交互等。可以去b站上找个Vue小项目跟着敲一遍。

2. Vue-element-admin后台集成方案

• 地址：https://panjiachen.github.io/vue-element-admin-site/zh/guide/
• 如果你也和我一样，需要做导师分配的项目，那我建议你基于 Vue-element-admin做，如果不需要那么多功能，可以直接基于基础模版Vue-admin-template做。
• Vue-element-admin涵盖了很多后台管理系统必备的功能，导航栏、侧边栏、路由、权限验证、与服务器端交互都不需要自己一一去实现了。
• 想快速上手的话还是看官方文档，写得非常好，开发过程中遇到不会的一定先去看官方文档，再去百度或谷歌上搜。
  

3. Element-UI框架

• 链接：https://element.eleme.io/#/zh-CN/component/installation
• 开发项目时很多基础组件，比如表格、分页器、进度条、加载状态、轮播图等我们不需要亲自写，直接调用人家写好的组件，再根据自己的需要更改样式、书写业务逻辑即可。
• 最常用的是Element-UI，组件种类丰富、样式简洁、使用简单。每次搭页面的时候去文档中找找，会节约非常多的时间。
  

4. 数据可视化图表库：Echarts & Highcharts

• Echarts链接：https://echarts.apache.org/zh/index.html
• Highcharts链接：https://www.highcharts.com.cn/
• 两个库都很好看，喜欢哪个用哪个，先看着官方文档把需要安装的依赖装一下，然后就去找实例复制粘贴代码，需要配置其他的项就去看官方文档或者百度谷歌搜索。
  
  

5. 数据大屏组件库：DataV

• 链接：http://datav.jiaminghi.com/guide/
• 很多管理系统都需要一个数据大屏首页，可以直接使用DataV的组件，包括全屏容器、边框装饰、水位图、轮播表、飞线图等高大上的组件。以下是我使用DataV、Echarts、Highcharts搭建的页面（关键信息被遮挡了）
  

6. 其他

• icon图标：https://www.iconfont.cn/
• 页面上解析渲染word文件：mammoth.js
• 页面上预览PDF文件：vue-pdf
  
• 日期处理库：moment.js