美文网首页
基于vscode搭建React运行框架

基于vscode搭建React运行框架

作者: Chasingcar_501 | 来源:发表于2019-01-05 23:14 被阅读0次

    1.下载gitbash
    2.在gitbash里安装webpack,报错。搜索webpack安装教程,发现要先安装node
    3.装好node之后安装eslint,全局安装出错,可能是因为环境变量,强行手动局部安装后成功,但是发现这个插件并不好用,于是一气之下删除整个node_module,结果再次运行有很多依赖包出错,下次不装eslint了
    eslint的作用:统一代码风格,用于检查常见的JavaScript代码错误
    4.装Debugger for chrome插件,可以不用输入命令点击三角符号启动,可打断点调试,要配置
    5.装react-router-dom
    输入 npm install react-router-dom --save

     npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):
    npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
    

    输入 npm i -f 解决


    • node和npm的关系:node.js是js的一个运行环境,是一个服务端的js的解释器。
      node中包含有npm,安装好node后,也会发现npm已安装。
      npm是node的包管理器。在要使用别人写好的js代码时,如果都根据名字搜索一下,下载源码,解压,再使用,会非常麻烦。于是就出现了包管理器npm。大家把自己写好的源码上传到npm官网上,如果要用某个或某些个,直接通过npm安装就可以了,不用管那个源码在哪里。并且如果我们要使用模块A,而模块A又依赖模块B,模块B又依赖模块C和D,此时npm会根据依赖关系,把所有依赖的包都下载下来并且管理起来。试想如果这些工作全靠我们自己去完成会多么麻烦!
    • TypeScript 是微软开发一款开源的编程语言,本质上是向 JavaScript 增加静态类型系统和对es6的支持。它是 JavaScript 的超集,所有现有的 JavaScript 都可以不加改变就在其中使用。它是为大型软件开发而设计的,它最终编译产生 JavaScript,所以可以运行在浏览器、Node.js 等等的运行时环境。
    • bash:Windows开发的一个缺点就是与shell结合的不好,Git Bash提供了一种方式可以在Windows下执行Linux命令
    • git git bash git shell的区别:
      1.git:版本管理工具,支持该工具的网站有Github、BitBucket、Gitorious、国内的osChina仓库、csdn仓库等等。
      2.shell:是linux,unix的外壳,也可以理解为命令行,就是输入并执行命令的地方,git通过命令行和图形界面两种方式使用shell。
      3.bash:最常用的shell之一
      4.git bash:方便你在windows环境下使用git命令的模拟终端(cmd的功能太弱),linux、unix可以直接使用git

    重新配置react环境

    1.安装git、vscode、npm
    下载git就有gitbash
    设置gitbash打开的默认路径,将属性的目标改为项目路径
    2.https://code.visualstudio.com/docs/nodejs/reactjs-tutorial
    根据tutoria:

    • 安装并使用命令create-react-app生成项目,会自动react应用和依赖
    • 在生成的项目下输入指令npm start即可打开react官网页面。保持它的运行,打开另一个终端,切刀项目下 ,输入“cd .”即可自动打开vscode该项目的代码
    • 查看markdown文件:Ctrl+Shift+P,输入markdown选择open preview
    • 将光标放在一个组件上,按F12弹出该组件的定义文件,按Alt+F12在当前页面显示该组件定义(按Esc退出)
    • 安装debugger for chrome插件,添加debug配置
    • Ctrl+shift+d:打开debug,点击齿轮添加debug 按F5直接弹出页面,并可调试

    相关文章

      网友评论

          本文标题:基于vscode搭建React运行框架

          本文链接:https://www.haomeiwen.com/subject/ojvrrqtx.html