react不同环境不同配置angular_前端开发环境搭建系列（五）Vue、React、Angular

前端开发环境搭建系列主要内容

开发工具

浏览器及其插件

包管理工具

接口调试工具

Vue、React、Angular(本章)

代码管理工具

收藏夹内容推荐

Vue、React、Angular

简单介绍一下三大框架环境安装

Vue相关

Vuejs：渐进式 JavaScript 框架

安装Vue

npm install vue

Vue-cli-2x

Vue.js 官方命令行工具(脚手架)，可用于快速搭建大型单页应用

# 全局安装 vue-cli

npm install --global vue-cli

# 创建一个基于 webpack 模板的新项目

vue init webpack my-project

# 进入项目目录

cd my-project

# 安装依赖

npm install

# 运行项目

npm run dev

Vue-cli-3x

Vue CLI 3需要 nodeJs ≥ 8.9 (官方推荐 8.11.0+，你可以使用 nvm 或 nvm-windows在同一台电脑中管理多个 Node 版本)

# 检查是否缺少环境

npm list -g --depth 0

# 安装vue-cli 3.x

npm install -g @vue/cli

# 查看cli版本

vue -V //vue --version

Vue CLI 3 和旧版使用了相同的 vue 命令，所以 Vue CLI 2 (vue-cli) 被覆盖了

2x 和 3x 共存

如果你仍然需要使用旧版本的 vue init 功能，你可以全局安装一个桥接工具

npm install -g @vue/cli-init

vue init webpack my_project

2x 和 3x 创建项目

2.x

vue init webpack test// 初始化项目 不支持驼峰(含大写字母)

cd test // 移动到当前项目跟文件夹

npm install // 安装依赖

npm run dev // 打开本地测试的生产环境\

3.x

vue create test// 初始化项目 不支持驼峰(含大写字母)

cd test// 移动到当前项目跟文件夹

npm install // 安装依赖(其实不用，可以略过安装依赖)

npm run serve// 打开本地测试的生产环境

Vue Devtool

Vue开发环境初期推荐脚手架，后期建议自己配置项目，包含自己配置webpack

React相关

用于构建用户界面的 JavaScript 库

安装React

npm i react

create-react-app

React脚手架工具，快速构建 React 开发环境

# 全局安装create-react-app

npm install -g create-react-app

# 创建一个项目

create-react-app my-app

# 切换目录

cd my-app/

# 开启项目

npm start如果create-react-app my-app报错，可能是nodejs版本的问题，小峰哥试过，nodejs8.9报错了，升级nodejs到10.11.0就可以正常运行了

react-devtools

React 调试插件

允许在Chrome和Firefox开发人员工具中检查React组件层次结构的扩展。

Angular相关

一套框架，多种平台：移动端 & 桌面端

Angular安装

npm i angular

Angular CLI

Angular 脚手架工具，快速构建 Angular 开发环境

# 全局安装angular/cli

npm install -g @angular/cli

# 创建项目

ng new my-dream-app

# 进入项目

cd my-dream-app

# 启动项目

ng serve