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


相关推荐

  • windows 设置定时锁屏

    windows 设置定时锁屏设置间隔指定时间电脑自动锁屏CreateTime–2017年7月3日10:16:14Author:Marydon参考地址:电脑爱好者杂志举例:实现每间隔45分钟,电脑自动锁屏实现思路:  第一步:编写锁屏命令;  第二步:制定计划。实践:  1.编写锁屏命令    新建一个txt文件,重命名为:lockScreen(名字随意)–>打开该文件添…

    2022年7月21日
    55
  • 通过ReadProcessMemory读取进程内存「建议收藏」

    通过ReadProcessMemory读取进程内存「建议收藏」修改一个程序的过程如下:1、获得进程的句柄2、以一定的权限打开进程3、调用ReadProcessMemory读取内存,WriteProcessMemory修改内存,这也是内存补丁的实现过程。下面贴出的是调用ReadProcessMemory的例程#include<windows.h>#include<tlhelp32.h>BOOLCALLBACKEnum…

    2022年10月4日
    2
  • matlab 插值出错,MATLAB插值问题

    matlab 插值出错,MATLAB插值问题一、一元函数插值已知函数y=f(x)在区间[a,b]上的n+1个不同点的函数值为,若存在一个简单函数F(x),使,称F(x)为f(x)在区间[a,b]上的插值函数,称(xi,yi)为插值节点。若F(x)为多项式,称为多项式插值(或代数插值);常用的代数插值方法有:拉格朗日插值,牛顿插值。n次代数插值:已知f(x)在n+1个点x0,x1,…,xn处的函数值为y0,y1,…,yn,求一个n…

    2022年6月4日
    29
  • ICMP报文分析

    ICMP报文分析

    2021年11月14日
    52
  • 关于maven打包时, 资源文件没有被打包进来的问题

    关于maven打包时, 资源文件没有被打包进来的问题在之前的一篇文章mybatis看这一篇就够了当中,提到过,在使用mybatis时,有时候需要把编写了SQL语句的XML文件,和Java类文件放在一起,如如果不加配置,用maven进行打包时,默认不会将src/main/java目录下的XML文件打包进去。因为src/main/java被设定为了源码目录,默认只会将其中的Java文件进行编译打包。即,默认打包得到的结果如下可以看到com.example.mp.mappers包下没有XML文件我们可以配置pom.xml中的resources标签,指定

    2022年5月29日
    63
  • Jenkins(2)docker容器中安装python3[通俗易懂]

    Jenkins(2)docker容器中安装python3[通俗易懂]前言使用docker安装jenkins环境,jenkins构建的workspace目录默认是在容器里面构建的,如果我们想执行python3的代码,需进容器内部安装python3的环境。进jenki

    2022年7月28日
    6

发表回复

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

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