Angular、React、Vue框架使用差异总结（一）

Angular、React、Vue是目前比较流行的前端框架，能够系统化的管理好前端代码，实现组件的可重用性。一定程度上提高了开发速度与质量。在一些基础概念上这三个框架存在一些差异，使用上也有着一定的区别。

一.安装

1.Angular：通过cnpm i @angular/cli --save-dev进行安装。

2.React：通过cnpm i babel-loader@7 babel-core babel-preset-env babel-preset-react react react-dom react-router-dom redux react-redux --save-dev进行安装。

3.Vue：通过cnpm i @vue/cli --save-dev进行安装。

注意以下几点：

1.React采用了JSX语法，类似于html标签内容，JS不能直接识别。因此，需要babel进行转码。babel还能够将ES6语法转码为ES5，更好的被JS环境执行。babel-loader版本需要配合其他几项的版本，如babel-loader版本7.x需要配个babel6.x。因此，cnpm i -D babel-loader@7 babel-core babel-preset-env ......

2.前端开发可以使用webpack进行模块化开发，能够根据代码的修改将结果热替换到界面。使用React框架时通过cnpm i webpack webpack-cli webpack-dev-server --save-dev进行安装。然后配置webpack.config.js等，规定编译的入口、出口文件、转码规则等。

二.创建与启动项目

1.Angular：通过npx ng new XXX 创建一个项目，通过npx ng serve启动项目，查看界面效果。

2.React：自定义目录结构。通过package.json中设置的命令启动webpack，查看界面效果。

3.Vue：可以通过npx vue create XXX创建一个项目，通过npx ng serve启动项目，查看界面效果。

              也可以（推荐）通过vue init webpack XXX创建一个封装了webpack的Vue项目，然后通过package.json中设置的命令npm run dev即可启动 webpack，查看界面效果。

注意以下几点：

1.Angular创建的项目主程序在src/app内，由主模块app.module.ts、主组件app.component.ts、样式app.component.css、模板app.component.html等构成。默认端口4200。

2.React需要自定义组件。没有明确的模块概念。也有样式，使用的是style，使用className定义标签的类，使用key定义相同类标签的索引值。采用渲染取代了模板的概念。对于比较复杂的DOM，可以提取出来作为一个子组件。默认端口8080。

3.Vue创建的项目入口程序在src/App.vue内，src内由组件components、路由router、静态文件assets（例如：需要编译的ES6语法的js等）等其他文件组成。每个.vue组件内由三部分组成：模板<template></template>、逻辑：<script></script>、样式：<style></style>。组件又可以分为页面组件和基础组件，区别在于页面组件可以使用axios（这是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。具体与ajax和fetch的区别这里就不做详细说明了。）操作（get、post、push、delete）业务数据，而基础组件最好通过props获取父级数据，完成自身功能需要。

三.创建子组件

1.Angular：通过npx ng generate component XXX创建一个子组件。子组件名称会自动添加到主模块内。生成的子组件也由组件、样式、模板等构成。

2.React：自定义目录结构。

3.Vue：自定义目录结构，一般也是保存在components下。

四.编译

1.Angular：通过npm run build 可以编译生成js。

2.React：通过npm run build 可以编译生成js。

3.Vue：通过npm run build 可以编译生成js，注意修改路径配置信息。如果使用推荐的方式创建的vue项目，只需修改config/index.js文件中build段内assetsPublicPath的值。

build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './',

......