1. 首页
  2. IT资讯

web前端软件的安装与配置

Node.js 的安装与配置

安装了 Node.js 之后便可以在 Git Bash 里面使用 node 和 npm 这两个命令了(node自带npm,不用安装npm):
运行which node/ which npm,得到node/npm的位置
运行node -v/ npm -v,得到node/npm的版本号

  • Node的两种使用方式:
    1.进入git bash,运行node,直接进入node环境,就可以直接写js了,按回车键运行
    2.先创建一个JS文件,然后让node运行,node main.js
  • npm 安装命令行小工具:
    感受一下npm的威力——运行npm i -g fanyi安装词典,运行fanyi 检索的单词 得到相应的中文释义

Git Bash

Git Bash 给我们提供了一个虚拟的 Linux 环境,这样我们就不用忍受 Windows 里面垃圾一般的命令行体验了。可以认为Git Bash是一个小型的操作系统,可以用Windows做什么就可用Git Bash做。Git Bash有自带编辑器,运行vi file(写好了:write保存,:quit退出)。Git Bash也可以浏览网页,运行curl -L website(看到的是代码) (>表示 保存)

Git Bash的快捷键:
crtl+d 退出
ctrl+c 中断
shift+insert 粘贴
ctrl+insert
~/ == /c/Users/Administrator/


VSCode

  • VSCode 的配置
    VSCode 的配置方式就是写编辑一个配置文件,打开「文件 – 首选项 – 设置」,对应快捷键为 Ctrl + ,(逗号),左侧为系统默认配置项,右侧为你要覆盖的配置项。把你要修改的项从左边拷贝到右边,然后保存,即可生效。设置字体时,若没有对应字体,要先安装。
  • 插件安装
    VSCode 自带 Emmet、Git 继承和 JS 调试功能(后续会讲到),已经十分完善了,但是还是有一些特殊的需求,这个时候我们就可以安装第三方插件了。由于第三方插件不是微软生产的,所以质量良莠不齐,请注意甄别。
  • 安装 open in browser
    按 Ctrl + Shift + X 打开扩展面板,然后输入 open in browser,点击第一个结果的「安装」按钮,稍等片刻就安装好了(相比之下 Sublime 的插件安装体验就差很多)。
    然后你在任意 HTML 文件右键,就可以看到 Open In Default Browser 这个按钮了,点就试试看。
  • Git操作
    要在 VSCode 里面操作 Git,前提是你已经配置好了 Git,如果你没有配置过,那么就在 Git Bash 里输入以下命令:
    git config –global user.name 你的英文名
    git config –global user.email 你的邮箱
    git config –global push.default matching
    git config –global core.quotepath false
    git config –global core.editor “vim”
  • VSCode操作 Git
    条件:目录里有.git这个文件
    侧边栏的源代码管理–填写提交内容&commit–推送

  • 用VSCode写代码的一些小提示:
  1. 一开始给文件设置好语言,写的时候才可以用Emmet,也才可使用简写。
  2. 拆分编辑器,可同时写js/css/html
  3. 写代码之前,要养成先新建一个文件夹放到熟悉的地方的好习惯,再把目录拉到vscode编辑,防止找不到代码。
  • 用VSCode写代码的一些快捷方式:(即Emmet ,参考D盘/jirengu的Emmet作弊表)
    比如:
    div.red
    div.red10
    div.red
    10>a
    div.red*10>a[href=#page] div.red*10>a[href=#page]{链接$}

总结

俗话说,工欲善其事,必先利其 编辑器、浏览器、路由器…等各种器。

学习前端必备的软件有:科学上网软件、colorpix(colorpix取色,QQ测量宽高)、VSCode(文本编辑器一般都是先建一个目录再写代码)、Sublime Text 3(没有提示/Emmet)、WebStorm(收费的IDE)、Node.js、Git

快捷键:alt+tab 切换(用不了??)


写代码啦:
html:link将html与CSS联系起来

 

本文来自投稿,不代表程序员编程网立场,如若转载,请注明出处:http://www.cxybcw.com/198038.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code