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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 如何入门网络安全_网络安全自学

    如何入门网络安全_网络安全自学由于我之前写了不少网络安全技术相关的故事文章,不少读者朋友知道我是从事网络安全相关的工作,于是经常有人在微信里问我:我刚入门网络安全,该怎么学?要学哪些东西?有哪些方向?怎么选?不同于Java、C/C++等后端开发岗位有非常明晰的学习路线,网路安全更多是靠自己摸索,要学的东西又杂又多,难成体系。常读我文章的朋友知道,我的文章基本以故事为载体的技术输出为主,很少去谈到职场、面试这些方面的内容。主要是考虑到现在大家的压力已经很大,节奏很快,公众号上是让大家放松的地方,尽量写一些轻快的内容。不

    2022年10月21日
    3
  • 微信小程序资源汇总

    微信小程序资源汇总微信小程序汇总(10月16日更新小程序100+个教程或资讯与50+个Demo)1:微信小程序官方工具:https://mp.weixin.qq.com/debug/w…tml?t=14764346784612:微信小程序简易教程:https://mp.weixin.qq.com/debug/wxadoc/dev/?t=14764346775993:微信小程序设计指南:http…

    2022年5月27日
    53
  • Pytest(13)命令行参数–tb的使用

    Pytest(13)命令行参数–tb的使用前言pytest使用命令行执行用例的时候,有些用例执行失败的时候,屏幕上会出现一大堆的报错内容,不方便快速查看是哪些用例失败。–tb=style参数可以设置报错的时候回溯打印内容,可以设置参

    2022年7月31日
    3
  • docker停止运行中的容器(docker关闭容器)

    问题描述:centos启动一个容器添加了-d参数,但是dockerps或者dockerps-a查看却已经退出了shell>dockerrun-dcentosa44b2b88559b68a2221c9574490a0e708bff49d88ca21f9e59d3eb245c7c0547shell>dockerps退出原因1、docker容器运行必须有一…

    2022年4月10日
    730
  • 单模光纤和多模光纤的波长_用立式光学计测量轴径结论

    单模光纤和多模光纤的波长_用立式光学计测量轴径结论熔接必备住友82C菲尼特熔接教程首先是介绍下多模光纤和单模光纤区别:1、多模光纤是光纤通信最原始的技术,这一技术是人类首次实现通过光纤来进行通信的一项革命性的突破。2、随着光纤通信技术的发展,特别是激光器技术的发展以及人们对长距离、大信息量通信的迫切需求,人们又寻找到了更好的光纤通信技术—-单模光纤通信。3、光纤通信技术发展到今天,多模光纤通信固有的很多局限性愈发显得突出:①多…

    2022年8月30日
    4
  • uniqueidentifier类型_unique用法及搭配

    uniqueidentifier类型_unique用法及搭配uniqueidentifier  全局唯一标识符 (GUID)。    注释  uniqueidentifier 数据类型的列或局部变量可用两种方法初始化为一个值:     使用 NEWID 函数。    将字符串常量转换为如下形式(xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx,其中每个 x 是 0-9

    2022年9月8日
    2

发表回复

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

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