前端开发环境搭建系列主要内容
开发工具
浏览器及其插件
包管理工具
接口调试工具
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