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

文章目录一、安装node二、配置淘宝镜像三、配置vscode(win10)四、全局安装脚手架五、创建项目一、安装node请在官网下载安装:https://nodejs.org/zh-cn/vscode中点击(ctrl+`)调出终端输入指令node-v,能显示版本号,说明node已经装好了输入指令npm-v,能显示版本号,说明npm可以使用了点击链接查看图文教程https://blog.csdn.net/qq_45677671/article/detail

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

一、安装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图标,选择属性,选择兼容性,勾选以管理员身份运行此程序,最后点击确定
    在这里插入图片描述
  2. vscode 中 点击 ctrl + ` 调出终端
  3. 输入命令:get-ExecutionPolicy
  4. 输入命令:set-ExecutionPolicy RemoteSigned
  5. 输入命令: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是项目名,可以自己取)

在这里插入图片描述

  • 出现下面的界面,表示创建项目成功:
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即可运行项目

  • 生成项目的目录结构如下:
├── README.md			使用方法的文档
├── node_modules		所有的依赖安装的目录
├── package-lock.json	锁定安装时的包的版本号,保证团队的依赖能保证一致。
├── package.json					
├── public				静态公共目录
└── src					开发用的源代码目录

编写第一个 react 程序教程

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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

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

(0)
上一篇 2022年4月12日 下午2:00
下一篇 2022年4月12日 下午2:00


相关推荐

  • SpringBoot源码解析之注解

    SpringBoot源码解析之注解本文的代码基于1.5.9版本启动类中都需要添加@SpringBootApplication注解,该注解中包含了三个重要注解:1、@SpringBootConfiguration标记为springBoot应用,在这个注解中又有@Configuration表示是个注解配置。2、@EnableAutoConfiguration该注解中又包含@AutoConfigurationPackage…

    2022年6月3日
    79
  • OSI模型「建议收藏」

    OSI模型「建议收藏」定义开放式系统互联通信参考模型(OpenSystemInterconnectionReferenceModel,缩写为OSI),简称为OSI模型。该模型是由ISO(国际标准化组织)定义,是个灵活稳健和可互操作的模型。目的规范不同系统的互联标准,使两个不同的系统能够较容易通信,而不需要改变底层的硬件和软件的逻辑。优点每层功能简单单一,标准化允许各种类型的网络硬件和软件相互通信…

    2025年8月14日
    3
  • gis中char是什么字段_gis中字段类型char

    gis中char是什么字段_gis中字段类型char维护一个字符串集合,支持两种操作:I x 向集合中插入一个字符串 x;Q x 询问一个字符串在集合中出现了多少次。共有 N 个操作,输入的字符串总长度不超过 105,字符串仅包含小写英文字母。输入格式第一行包含整数 N,表示操作数。接下来 N 行,每行包含一个操作指令,指令为 I x 或 Q x 中的一种。输出格式对于每个询问指令 Q x,都要输出一个整数作为结果,表示 x 在集合中出现的次数。每个结果占一行。数据范围1≤N≤2∗104输入样例:5I abcQ abcQ ab

    2022年8月8日
    7
  • 初试JqueryEasyUI(附Demo)[通俗易懂]

    初试JqueryEasyUI(附Demo)[通俗易懂]写在前面准备布局Layout菜单树Tree内容页Tabs右键菜单Menu表单Form对话框Dialog示例Demo下载关于easyui不多说,对于我们这样没有美术功底的程序员来说,简直是大大的福利,

    2022年7月1日
    21
  • 估值400亿,小米愿打谁愿挨?

    估值400亿,小米愿打谁愿挨?

    2021年12月14日
    43
  • javascript 弹出确认 取消对话框

    javascript 弹出确认 取消对话框在网页中经常会让用户提交一些事件 然后在事件处理之前会弹出 确定 取消 对话框 待用户确定后再利用程序处理事件 下面是如何利用 JavaScript 实现弹出 确定 取消 对话框的方法 functionremo id type isThird varisRemove confirm 删除是不可恢复的 n n 您确认要删除吗 console l

    2026年3月26日
    2

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号