三大前端框架（一） Angular, React, Vue的安装方法及引入bootstrap和jquery方法

Angular

1. npm install -g @angular/cli
   安装脚手架

2. ng new my-app
   创建一个名为“my-app”的工作空间（目录位置自定义）

3. npm install
   安装依赖

4. ng serve -o
   会自动打开默认浏览器并访问http://localhost:4200/

5. 如果需要引入bootstrap和jquery

   在项目中安装bootstrap和iquery
   npm i bootstrap --save
npm install jquery --save

   由于angular是使用TypeScript，所以还需安装对应的类型描述模块，让TypeScript认识jquery和bootstrap的语法。执行以下命令安装
   npm install @types/jquery --save-dev
npm i @types/bootstrap --save-dev

   在项目有中**.angular.json**文件中的apps下的styles和scripts里分别写入：
   

React

1. npm install -g create-react-app
   安装脚手架

2. create-react-app my-app
   创建一个名为“my-app”的工作空间（目录位置自定义）

3. npm install webpack -g
   全局安装webpack

4. npm install --save--dev webpack-cli
   还需安装webpack-cli

5. npm start
   会自动打开默认浏览器并访问http://localhost:3000/

6. 如果需要引入bootstrap和jquery

   在项目中安装bootstrap和iquery
   npm install bootstrap --save
npm install jquery --save

   然后在最根部的js文件中import
   

Vue

1. npm install webpack -g
   全局安装webpack

2. npm install --save--dev webpack-cli
   还需安装webpack-cli

3. npm install -global vue-cil
   全局安装vue

4. vue init webpack my-app
   创建一个名为“my-app”的工作空间（目录位置自定义）

5. npm install
   如果上一步中已经选择了npm就不需要了

6. npm run dev
   run起项目并提示打开http://localhost:8080/

7. 如果需要引入bootstrap和jquery

   在项目中安装bootstrap和iquery
   npm install bootstrap --save
npm install jquery --save

   jquery引入：
   在build文件夹下的webpack.base.conf.js里写入

   plugins: [
     new webpack.ProvidePlugin({
         jQuery: 'jquery',
         $: 'jquery'
     })
   ]
   

   

bootstrap引入：
在入口处的js文件里引入

import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import '../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js';

以上。

只是个人笔记，轻喷。

还处于前端小白阶段，近期刚接触三个前端框架，因上司要求调查一下三者之间的不同之处才开始学习，都是个人一点点摸索过来的，写的不详细或者不对之处请指出，谢谢。