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

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

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

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • MySQL删除约束_mysql查看表字段

    MySQL删除约束_mysql查看表字段一、字段操作1.添加字段(add)altertableadd字段名数据类型;desc;2.修改字段数据类型(modify)altertablemodify;3.字段重命名(change)#新字段名后要加上字段的数据类型,否则报错altertablechange;#可用来修改字段数据类型#也可以在修改数据类型后添加默认值或其它约束条件#可以在最后修改字段位…

    2022年10月12日
  • Class类的getClassLoader()方法

    Class类的getClassLoader()方法packageminglu;importjava.lang.reflect.InvocationTargetException;importjava.lang.reflect.Method;publicclassHelloWorld{ publicstaticvoidmain(String[]args)throwsInstantiationException,

  • 数据库概念设计与逻辑设计[通俗易懂]

    数据库概念设计与逻辑设计[通俗易懂]一、概念设计概念设计的目的就是为了建立概念数据模型,概念数据模型也称为高级数据模型,之所以称为高级数据模型是因为它更接近于人的思维,而不是机器的思维,相比于关系模型更容易理解,此处的高级和低级的概念,与程序语言领域的高低级是一样的。我们通常称Java语言为高级语言,汇编语言为低级语言,是因为高级语言对于我们而言要比汇编语言更容易理解。关于概念数据模型,我们一般都会采用E-R图进行描述。E-R图的规则如下:1.实体采用矩形框,联系采用菱形框,属性采用椭圆形框。2.实体、联系、属性必须使用文字描

  • ClientHeight_offsetheight获取高度不对

    ClientHeight_offsetheight获取高度不对clientHeight:包括padding但不包括border、水平滚动条、margin的元素的高度。对于inline的元素这个属性一直是0,单位px,只读元素。offsetHeight:包括padding、border、水平滚动条,但不包括margin的元素的高度。对于inline的元素这个属性一直是0,单位px,只读元素。style.height//返回元素的高度(包括元素高度,不包括内边距、边框和外边距)clientHeight//返回元素的高度(包括元素高度、

  • 监督学习,非监督学习,半监督学习和增强学习

    监督学习,非监督学习,半监督学习和增强学习根据机器学习可以解决的问题,可以将机器学习分为:分类和回归如果根据机器学习的算法分类,可以将机器学习分为:

  • 输入内容,出现像Atom + activate-power-mode插件的彩色粒子效果

    输入内容,出现像Atom + activate-power-mode插件的彩色粒子效果最近在看python,然后看到tendcode的评论有个很好玩的效果输入框输入后,会有个彩色的粒子效果,觉得很好看,在网上找了一下,可是没找到对应的案例和实现方法,只看到了Atom编辑器的activate-power-mode插件有同样的效果,最后只有自己看源码,看了半天代码,终于让我把实现代码给找到了,案例在GitHub地址Color-particles里,喜欢的可以下载,下面展示成果…

发表回复

您的电子邮箱地址不会被公开。

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