摘要：本项目主要是在公司工作阶段针对新的形势对官网界面展示和效果做的更新迭代，通过对整站前端的分析和架构，为这一类型的网站提供一个合理高效的解决方案。

本设计主要实现数据的实时展示更新。设计之初项目的核心是jQuery，整合流行的requireJS进行模块化开发。使用的图表插件是TradingView。 上线之后随着使用和用户的反馈，发现了该设计的很多弊端，继而再次对问题进行了分析和审查，做出了改变前端框架的决定。新的前端框架使用的是Vue.js。此设计为纯前端开发，调用公司的接口。开发阶段可以在本地使用nginx反向代理获取线上的数据，或者在vue项目里的配置文件加上要访问的ip地址。部署上线的时候可以将访问地址置为空，服务器会自动获取当前的地址进行数据访问。

本文将以一个前端开发者的身份，系统地阐述本项目的设计思路，开发中遇到的问题以及解决方案。

关键词：互联网前端  TradingView  Vue.js  性能  用户体验

目录

摘要

Abstract

1.-引言-1

1.1课题背景-1

1.2课题研究的意义-1

1.3课题研究的主要内容-2

2.-可行性及需求分析-3

2.1可行性分析-3

2.1.1技术可行性分析-3

2.1.2经济可行性分析-3

2.1.3社会可行性分析-3

2.2需求分析-4

3.-项目设计1.0版本-5

3.1项目背景-5

3.2前端开发环境-5

3.2.1 NGINX的安装-5

3.2.2 NGINX的配置-5

3.2.3 hosts文件的修改-6

3.3前端开发工具-6

3.4前端开发相关技术-7

3.4.1项目核心jQuery-7

3.4.2整合项目模块的工具库require.js-7

3.5项目设计及分析-7

3.5.1项目设计-7

3.5.2项目分析-11

4.-项目设计2.0版本-14

4.1项目背景-14

4.2前端开发环境-14

4.2.1 Node.js的安装-14

4.2.2 Yarn的安装-14

4.3前端开发工具-15

4.4前端开发相关技术-15

4.4.1数据的双向绑定-15

4.4.2组件的生命周期-16

4.5项目设计及分析-17

4.5.1项目设计-17

4.5.2项目分析-17

5.-开发总结-19

5.1开发思维的转变（ 操作DOM -> 操作数据 ）-19

5.2设计模式的转变（ MVP -> MVVM ）-20

5.3性能分析-21

5.3.1从页面首屏载入角度分析-21

5.3.2从处理业务角度分析-22

参考文献-23

致谢-24