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


相关推荐

  • 华为裁员1100人!任正非痛批管理层:这种领导鼠目寸光

    华为裁员1100人!任正非痛批管理层:这种领导鼠目寸光Python实战社群Java实战社群长按识别下方二维码,按需求添加扫码关注添加客服进Python社群▲扫码关注添加客服进Java社群▲华为还是裁员了,一裁就是1100人。距离任正非4.2…

    2022年7月18日
  • SSL/TLS 双向认证(一) — SSL/TLS 工作原理

    SSL/TLS 双向认证(一) — SSL/TLS 工作原理本文部分参考:https://www.wosign.com/faq/faq2016-0309-03.htmhttps://www.wosign.com/faq/faq2016-0309-04.htmhttp://blog.csdn.net/hherima/article/details/52469674一:SSL/TLS介绍什么是SSL,什么是TLS呢?官话说SSL是安全套…

    2022年5月29日
  • AbstractMethodError报错

    AbstractMethodError报错2019独角兽企业重金招聘Python工程师标准>>>…

    2022年6月2日
  • 搭建rsyslog日志服务器_syslog服务器

    搭建rsyslog日志服务器_syslog服务器文章目录1.rsyslog介绍2.实验目的3.实验环境4.配置服务端5.配置客户端6.在服务端验证效果1.rsyslog介绍  rsyslog是一个快速处理收集系统日志的开源程序,提供了高性能、安全功能和模块化设计。rsyslog是syslog的升级版,它将多种来源输入输出转换结果到目的地,rsyslog被广泛用于Linux系统以通过TCP/UDP协议转发或接收日志消息。  rsyslog守护进程可以被配置成两种环境,一种是配置成日志收集服务器,rsysl

    2022年9月25日
  • MT60B1G16HC-48B:A美光内存颗粒FBGA代码D8BNK[通俗易懂]

    MT60B1G16HC-48B:A美光内存颗粒FBGA代码D8BNK[通俗易懂]MT60B1G16HC-48B:A美光内存颗粒FBGA代码D8BNK美光科技宣布已开始批量出货全球首款基于176层NAND技术的通用闪存UFS3.1移动解决方案。该产品为高端旗舰手机量身打造,与前代产品相比可实现高达75%的顺序写入和随机读取性能提升,从而解锁5G潜力—只需9.6秒即可下载一部2小时的4K电影。美光176层NAND的紧凑尺寸,完美契合移动设备的大容量和小体积需求。此前,美光于6月宣布已出货搭载176层NAND的PCIe4.0SS

    2022年6月22日
  • MT4安卓版官网下载[通俗易懂]

    MT4安卓版官网下载[通俗易懂]目前,mt4因为特有的优势,吸引了许多投资者使用。MT4是目前最受欢迎的外汇交易平台。如果你的手机是安卓手机,要使用mt4交易,首先就得下载一个安卓版的软件。那么安卓如何下载呢。

    2022年8月15日

发表回复

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

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