一、Angular、React、Vue三大框架比拟
Angular 是一个基于 TypeScript 的 Javascript 框架。 由 Google 开拓和掩护，它被描述为\公众超级英雄般的JavaScript MVW 框架\"大众。 Angular（也称为\"大众Angular 2+\"大众，\公众Angular 2\"大众或\公众ng2\"大众）是 AngularJS（也称为\"大众Angular.js\公众或\"大众AngularJS 1.x\"大众）的改写，大多为升级了兼容性的继续者。只管最初般被的 AngularJS 于2010年10月发布，但它仍旧在修复bug等问题。新的Angular（sans JS）于2016年9月推出，版本为2.最新的紧张版本为版本4， 版本3被跳过。Google，Wix，weather.com，healthcare.gov 和 Forbes 在利用Angular。
Angular团队操持每六个月发布一个紧张版本，以是Angular 5在2017年底到来，而Angular 6和Angular 7也分别在2018年6月和2018年12月发布。Angular未来的版本不会像Angular1.x和Angular2.x那样发生重大的变更。以是.x、Angular6.x、Angular7.x和我们现在的开拓办法也是一样的。
React 被描述为\"大众用于构建用户界面的 JavaScript 库\"大众。 React 最初于2013年3月发布，由 Facebook 开拓并掩护，在多个页面上利用 React 组件（不是作为单页运用程序）。根据 Chris Cordle 撰写的这篇文章，React 在 Facebook 上的利用远远多于 Angula r在Google上的利用。 React 也被Airbnb，Uber，Netflix，Twitter，Pinterest，Reddit，Udemy，Wix，Paypal，Imgur，Feedly，Stripe，Tumblr，Walmart 等等。
Vue 是2016年景长最迅速的 JS 框架之一. Vue 将自己描述为\公众用于构建交互式界面的直不雅观，快速和可组合的 MVVM 框架\"大众。该框架于2014年2月首次由前 Google 员工尤雨溪发布，当时写了一篇关于营销活动和数字的有趣的博客文章。 这是一次非常成功的比赛，尤其是考虑到 Vue 在没有大公司支持的情形下得到如同一个人的演出一样的吸引力。 Vue 目前拥有一批核心开拓职员。 2016年，版本2发布。 Vue 被阿里巴巴、百度、Expedia、任天国和 GitLab 利用，小型项目列表可以在 madewithvuejs.com 上找到。
React、Angular 、Vue 都非常好，并且他们中没有一个明显高于其他，怎么选？
如果你在 Google 事情：Angular如果你喜好 TypeScript：Angular（或 React）如果你喜好面向工具编程（OOP）：Angular如果你须要辅导，构造和声援：Angular如果你在 Facebook 事情：React如果你喜好灵巧性：React如果你喜好在几十个软件包中选择：React如果你喜好 JS &\公众统统都是 Javascript 的方法\"大众：React如果你喜好真正干净的代码：Vue如果你想要最大略的学习曲线：Vue如果你想要最轻量级的框架：Vue如果你一个人事情或者有一个小团队：Vue（或 React）如果你的运用程序变得非常大：Angular（或 React）如果你想用 react-native 构建一个运用程序：React如果你想有很多跟你一样的开拓者：Angular（或 React）如果你与设计师互助并须要干净的 HTML 文件：Angular （或 Vue）如果你喜好 Vue 但是害怕有限的生态系统：React二、搭建Angular6项目开拓环境前端技能栈html5、css3、JavaScript、Webpack、TypeScript、Angular6、AJAX(http模块)、ant Design UI组件
后台技能栈php+mysql / java+mysql / asp.net + sql server
nodejs epress + mongoDB / Nodejs Epress + Mysql
搭建前端开拓环境安装脚手架
npm install -g @angular/cli
创建项目，会自动安装依赖
ng new 项目名称 --routing
比如： ng new legouApp --routing
进入项目目录，并安装依赖，不能利用cnpm，缘故原由：webpack打包项目到95%工程会卡去世，以是不能利用cnpm
cd loegouAppnpm i 或者 yarn install
运行项目
ng serve --openhttp://localhost:4200/
antD环境的搭建
官网 http://ng.ant.design/docs/introduce/zh实行指令 ng add ng-zorro-antd
帮我们完成 模块安装、模块引入和配置、引入样式，测试antD和angular是否可用，拷贝组件的标签到模板文件中进行测试
三、移动商城功能需求和功能方案
\"大众乐购商城\公众移动端项目是电商B2C的一个典范，倡导\"大众快乐购物、快乐生活、做事满意\公众的做事理念，紧张功能模块参考了京东阛阓和交易流程，实现了常见的B2C商城的基本的功能，比如：商品分类、商品发布、商品展示、商品查询、会员注册、会员登录、购物车、订单管理、在线支付、交易评价、提醒、等功能模块。
四、实现移动商城app部分功能
公共组件（复用组件）pubcoms
头部组件 header页脚组件 footer底部导航 tabs分类组件 cate页面组件（栏目方案） pagecoms
首页 homepage分类 category购物车 cart商品列表 goodslist商品详情 goodsdetails我的（会员中央） personal登录 login注册 register依次创建每一个组件
ng g component pubcoms/header
如何处理组件？把公共组件放到根组件app.component.html中，通过路由的链接来切换页面组件
app.component.html<!-- 页头组件 --><app-header></app-header><!-- 页面组件内容 --><router-outlet></router-outlet><!-- 页脚组件 --><app-footer></app-footer><!-- 底部导航组件 --><app-tabs></app-tabs>
配置路由
const routes: Routes = [{ path:\"大众homepage\"大众, component: HomepageComponent },{ path:\"大众\"大众, component: HomepageComponent }, //默认为空值加载首页{ path:\公众category\公众, component: CategoryComponent },{ path:\"大众cart\公众, component: CartComponent },{ path:\公众personal\公众, component: PersonalComponent }];
路由的导航链接
<ul><li><a routerLink=\"大众/homepage\"大众>首页</a></li><li><a routerLink=\"大众/category\"大众>分类</a></li><li><a routerLink=\"大众/cart\公众>购物车</a></li><li><a routerLink=\公众/personal\公众>会员中央</a></li></ul>
轮播组件的数据模型banner.component.ts
编号 id 图片地址 imgUrl 图片描述 imgTitle 链接网址 linkUrl
export class BannerComponent implements OnInit {bannerList=[]; //轮播的数据源constructor() { }ngOnInit() {for (let index = 1; index <= 4; index++) {let bannerObj = {id:index,imgUrl:`assets/images/banner${index}.jpg`,imgTitle:'轮播图的标题'+index,linkUrl:'http://'};this.bannerList.push(bannerObj); //循环向数组中追加每条轮播的数据} }
五、Android环境文件打包、安装、测试
发布angular程序，目的是让运用程序分开angular环境可以事情，发布便是制作静态资源html,css,js，ng build 指令后天生dist目录，支配静态资源的网页到做事器，拷贝发布后的静态文件到nodejs的public目录，打包网站为安卓或者苹果的安装文件
https://www.apicloud.com/ 安装包云编译平台
创建app的流程
注册登录创建一个项目，webAPP名称 legouShop 乐购商城 解释 商城移动端项目实行打经办事
云端设置 》 上传Icon（手机上显示的app的图标）》Android证书+iso证书》
Android证书流程https://docs.apicloud.com/Dev-Guide/Android-License-Application-Guidance
iso证书流程https://docs.apicloud.com/Dev-Guide/iOS-License-Application-Guidance
云编译，天生二维码，手机扫描就可以下载安装包apk文件
