首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >vscode搭建react框架(vscode补全js方法)

vscode搭建react框架(vscode补全js方法)

作者头像
全栈程序员站长
发布于 2022-07-28 10:11:10
发布于 2022-07-28 10:11:10
1.7K00
代码可运行
举报
运行总次数:0
代码可运行

大家好,又见面了,我是你们的朋友全栈君。

文章目录

一、安装node

  1. 请在官网下载安装:https://nodejs.org/zh-cn/
  2. vscode 中 点击 ( ctrl + `) 调出终端
  3. 输入指令node -v,能显示版本号,说明 node 已经装好了
  4. 输入指令npm -v,能显示版本号,说明 npm 可以使用了

点击链接查看图文教程 https://blog.csdn.net/qq_45677671/article/details/114535955

二、配置淘宝镜像

  • 输入指令:
  • npm install -g cnpm --registry=https://registry.npm.taobao.org
  • 输入指令cnpm -v,能显示版本号,说明 cnpm 已经装好了

三、配置 vscode(win10)

win7 无需配置

  1. 右击VSCode图标,选择属性,选择兼容性,勾选以管理员身份运行此程序,最后点击确定
  1. vscode 中 点击 ctrl + ` 调出终端
  2. 输入命令:get-ExecutionPolicy
  3. 输入命令:set-ExecutionPolicy RemoteSigned
  4. 输入命令:get-ExecutionPolicy
  • Restricted:表示禁止终端使用命令的
  • RemoteSigned:表示可以使用终端命令了

四、全局安装脚手架

  • 在终端输入命令:npm install -g create-react-app
  • 这需要等待一段时间,这个过程在安装三个东西
  • react: react的顶级库
  • react-dom: react在web段的运行环境
  • react-scripts: 包含运行和打包react应用程序的所有脚本及配置

五、创建项目

  • 先创建一个放置项目的文件夹www
  • 在终端中使用cd指令跳转到这个文件夹
  • 创建项目指令:create-react-app your-app(your-app是项目名,可以自己取)
  • 出现下面的界面,表示创建项目成功:
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
Success! Created your-app at /dir/your-app
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd your-app
  npm start

Happy hacking!
  • 通过cd your-app命令进入目录
  • 运行npm start即可运行项目
  • 生成项目的目录结构如下:
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
├── README.md			使用方法的文档
├── node_modules		所有的依赖安装的目录
├── package-lock.json	锁定安装时的包的版本号,保证团队的依赖能保证一致。
├── package.json					
├── public				静态公共目录
└── src					开发用的源代码目录

编写第一个 react 程序教程

点击跳转:https://blog.csdn.net/qq_45677671/article/details/115874685

发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/128685.html原文链接:https://javaforall.cn

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022年4月1,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
浅谈vscode+react环境部署,运行第一个react框架
见链接:https://www.cnblogs.com/csji/p/13558221.html。
啦啦啦啦
2023/02/27
1.8K0
浅谈vscode+react环境部署,运行第一个react框架
前端Demo|vue.js创建第一个hello-world文件|适合有一定js基础的同学
npm install -g cnpm --registry=https://registry.npm.taobao.org
微笑的小小刀
2022/04/12
8360
前端Demo|vue.js创建第一个hello-world文件|适合有一定js基础的同学
vscode+react环境部署,运行第一个react框架
见链接:https://www.cnblogs.com/csji/p/13558221.html。
潜心专研的小张同学
2023/01/03
1K0
vscode+react环境部署,运行第一个react框架
React基础(1)-create-react-app
如今,对于现今前端热门的三大框架Vue,Angular,React,对于web开发者来说,早已不是什么陌生的词
itclanCoder
2019/09/12
1.8K0
React基础(1)-create-react-app
Vue移动端框架Mint UI教程-搭建环境引入框架(一)
今天具体说一说比较常用的;Mint UI框架的按钮组件,Mint UI是 饿了么团队开发基于vue .js的移动端UI框架,它包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要。
王小婷
2019/03/22
3.1K0
Vue移动端框架Mint UI教程-搭建环境引入框架(一)
从零开始学习React-开发环境的搭建(一)
其实16年的时候就已经接触到React,那个时候也只是入门,时隔多年,工作上一直都没有接触到相关的业务,不知不觉,前端的天也开始渐变,看到 了很多招聘要求上都是要求会React,三大框架怎么也得熟悉使用两个,不让下一份工作可能就很难了~
王小婷
2019/11/05
8260
基于mpvue框架的小程序项目搭建入门教程一
端开发框架和环境都是需要 Node.js ,先安装node.js开发环境,vue的运行是要依赖于node的npm的管理工具来实现,下载https://nodejs.org/en/,安装完成之后,打开cmd开始输入命令。(我用的是win10系统,所以需要管理员权限,右键点击以管理员身份运行cmd),不然会出现很多报错。
王小婷
2025/05/18
1150
基于mpvue框架的小程序项目搭建入门教程一
Vue移动端框架Mint UI教程-搭建环境引入框架(一)
今天具体说一说比较常用的;Mint UI框架的按钮组件,Mint UI是 饿了么团队开发基于vue .js的移动端UI框架,它包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要。
王小婷
2025/05/18
960
Vue移动端框架Mint UI教程-搭建环境引入框架(一)
从零开始学习React-开发环境的搭建(一)
其实16年的时候就已经接触到React,那个时候也只是入门,时隔多年,工作上一直都没有接触到相关的业务,不知不觉,前端的天也开始渐变,看到 了很多招聘要求上都是要求会React,三大框架怎么也得熟悉使用两个,不让下一份工作可能就很难了~
王小婷
2025/05/19
3580
从零开始学习React-开发环境的搭建(一)
三分钟搭建React开发环境
其实16年的时候就已经接触到React,那个时候也只是入门,时隔多年,工作上一直都没有接触到相关的业务,不知不觉,前端的天也开始渐变,看到 了很多招聘要求上都是要求会React,三大框架怎么也得熟悉使用两个,不让下一份工作可能就很难了~
王小婷
2025/05/19
740
三分钟搭建React开发环境
vscode下搭建vue.js开发环境(基于最新的@Vue/cli 4.2.2)
网上的那些怎么安装vue环境的2.x就不要再看了,都过时了,现在去官网下载,按照他们的设置各种问题。接下来看下最新的安装方法。
西西嘛呦
2020/08/26
4.4K0
vscode下搭建vue.js开发环境(基于最新的@Vue/cli 4.2.2)
Vue框架Element UI教程-安装环境搭建(一)
Element-Ul是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库,手机端有对应框架是Mint UI 。
王小婷
2019/05/14
8.9K0
Vue框架Element UI教程-安装环境搭建(一)
一、环境搭建、以及聊聊更重要的...
它给我们提供了一个开发思路以及少量的API,这些API学习起来还算轻松。不过在阅读此系列文章之前,应该有不少读者已经通过官方文档或者其他途径开始尝试学习React,并且在学习过程中遇到了困难。这些困境会给大家带来一些React难以攻克的假象。
用户6901603
2020/07/25
8250
一、环境搭建、以及聊聊更重要的...
Vue框架Element UI教程-安装环境搭建(一)
Element-Ul是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库,手机端有对应框架是Mint UI 。
王小婷
2025/05/18
5950
Vue框架Element UI教程-安装环境搭建(一)
Visual Studio Code搭建VUE开发环境
Vue.js 是一款易学易用,性能出色,适用场景丰富的 Web 前端框架。它基于标准 HTML、CSS 和 JavaScript 构建,提供容易上手的 API 和一流的文档。可以用来开启PC网页、移动端网页页面、小程序等等
SmileNicky
2024/12/23
3070
Visual Studio Code搭建VUE开发环境
一文带你快速使用Vue脚手架创建启动Vue项目!
本篇文章主要带你了解一下什么是前端工程化,并带你快速使用Vue脚手架创建和启动Vue项目。
reload
2024/03/22
6210
一文带你快速使用Vue脚手架创建启动Vue项目!
Vue开发环境搭建全过程,一步一个坑
Vue这里就不多作介绍了,首先我们要安装好整个开发环境,其实Windows和Mac的整个过程基本一样
一墨编程学习
2018/09/14
9790
Vue开发环境搭建全过程,一步一个坑
安装使用前端脚手架之前你可能遇到的问题
2、 键入set-executionpolicy remotesigned ,然后键入Y回车
马克社区
2022/06/22
2140
vue2.0 + element-ui 实战项目- 搭建环境(一)
vue2.0官方网站:http://caibaojian.com/vue/guide/installation.html element-ui官方网站:https://element.eleme.cn/#/zh-CN
王小婷
2020/10/30
6.9K0
vue2.0 + element-ui 实战项目- 搭建环境(一)
前端小技巧
刚开始前端的时候,工具得用好,就能事半功倍,咱们知道前端开发比较常用的包管理器有两种,那就是yarn和npm,那到底有什么区别呢?来看看。
希里安
2023/10/30
2270
前端小技巧
推荐阅读
相关推荐
浅谈vscode+react环境部署,运行第一个react框架
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档