前端开环境搭建

1. 安装包管理工具 npm 或者yarn

npm install -g yarn

yarn基于node,并且速度更快,能自动缓存你下载过的包,让你在离线、重复下载时不需要通过去网上拉取文件,直接在本地就可以安装你需要的包!并且,yarn分离的各个包的安装过程,合理排队,不产生高频请求,单个包安装失败并不影响其他包的安装,有效的重试机制等.

2. 目前最流行的前端开发工具或者IDE或者编辑器:vscode、sublime、各种Storm!还有Hbuilder(这个是完美支持Vue的特供、还支持特有小程序等N端转化插件,如果需要多端覆盖这个绝对的强大!

3. VS code 插件

  • Auto Rename Tag
  • Beautify, 该插件支持js、josn、css、sass和html的代码美化
  • CSS Peek, 支持css的快速跳转
  • 图标库Material Icon Theme 对当前流行语言和后缀名进行单独匹配好看又丰富的图标!
  • view in Browser 静态网页可以支持直接在默认浏览器预览
  • Quokka.js支持js文件内的部分代码直接计算并返回计算结果
  • JavaScript (ES6) code snippets支持最新的ES6语法,支持很多代码快捷公式
  • GitLens — Git superchargedGit History
  • Markdown All in One插件,支持所有markdown语法,同时支持快捷键操作进行修改
  • Bracket Pair Colorizer 这个插件会自动根据你的代码块的括号、大括号等判断作用域块,并用border连线进行明显的区分
  • auto import
  • eslint  可用于检查语法错误规范代码

4. VS code 快捷键

Ctrl + P快速切换文件,根据历史是由最近原则排序,

Alt + ↑ | ↓ 快速移动当前行代码,

Shift + Alt + ↑ | ↓,快速复制当前行,

Ctrl + K , Ctrl + Q快速定位上次编辑的位置…

5. vsocde的一些配置

6. VS code 快速编辑html

  • 第一行输入!并回车,!,然后按下tab键,会直接出现编写html语言的基本框架标签
  • Shift  +  Alt  + F     实现代码的对齐
  • 注释:ctrl+k+c   取消注释:ctrl+k+u

7. React 环境配置:

插件: Simple React Snippets : imrc 快速生成代码

创建本地文件夹,即保存项目的文件夹,在文件夹下打开控制台我这里使用git bash直接在文件夹下右键找到git bash启动即可
在控制台输入 npm install -g create-react-app 使用npm安装 create-react-app

安装完 create-react-app 之后 继续输入 create-react-app my-app 来创建一个项目 my-app 是创建出来的 React 项目,等待一段时间(这里需要下载一些依赖包),即可看到创建完成的整个文件结构

换控制台目录到项目目录下 运行 npm start 检测当前项目是否创建成功 正常情况下当输入命令之后 会直接打开默认浏览器预览 http://localhost:3000/ 此时会看到一个react的页面

原文地址:https://www.cnblogs.com/padingdun/p/12289317.html

时间: 2024-10-13 15:37:07

前端开环境搭建的相关文章

前端开发环境搭建以及如何跨域

前端本地开发环境搭建总结: 安装nodejs环境(推荐6.0以后的LTS版本),安装完之后打开终端(mac平台),windows平台可以 WIN+R 打开运行,输入cmd,打开命令窗口,输入npm --version,如果能看到版本,说明已经安装成功: 在本地电脑的工作目录下面,执行 "git clone" + gitlab仓库的地址,把项目克隆下来: 使用编辑器(推荐webstorm或者vs code,功能强大,当然如果有其他熟悉的IDE也可以,前提是熟悉)打开项目,找到node的s

Windows 环境下vue+webpack前端开发环境搭建

一.开发环境搭建 1.前端框架一般依赖node.js,我们首先要安装node.js. 2.由于许多npm 的源都在国外的地址,安装起来特别慢,所以我们这里利用淘宝的镜像服务器. 安装命令为:npm install -g cnpm --registry=https://registry.npm.taobao.org 之后回车等待命令 3.接着安装全局的vue-cli脚手架,用于帮助你快速搭建所需的Vue的开发模板框架 $ cnpm install -g vue-cli 回车,等待安装, 安装完成后

转 ShowSlow+Yslow页面前端性能测试环境搭建

----//工具介绍 Yslow:YSlow是Yahoo发布的一款基于FireFox的插件. YSlow可以对网站的页面进行分析,并告诉你为了提高网站性能,如何基于某些规则而进行优化. ShowSlow: ShowSlow平台用来收集页面性能测试工具Yslow的测试结果,并对测试结果进行分析展示.互联网上有一个在线的showSlow平台,免费提供Yslow的测试结果收集与展示.考虑到企业的某些系统可以存在商业机密,我们会搭建自己的环境. 在线的ShowSlow平台:http://www.show

前端开发环境搭建

一直以来都或多或少遇到需要Html5,js,php,css之类的来完成某些小的效果,但是基本上没有认真看过,更不知道还有专业开发工具了,不过对于编译语言来讲既然有IDE,相信这种网页语言也不会缺少,知乎和知道告诉我答案了,一个是webstom,要想用好,竟然还得破解,算了,选择国产的吧,发现好评也很多啊,不够实际测试了下,效果还真不错.简单过程记录下 1.hbuilder下载与解压道C根目录,运行即可 2.做首次配置.配置外部服务器,指定localhost 3.配置浏览器,可以chrome没安装

前端开发环境搭建 Grunt Bower、Requirejs 、 Angular

现在web开发的趋势是前后端分离.前端采用某些js框架,后端采用某些语言提供restful API,两者以json格式进行数据交互. 如果后端采用node.js,则前后端可以使用同一种语言,共享某些可重用的Js代码,并共享构建工具.但很多时候我们可能采用别的语言,如ruby/java/scala等,此时前后端代码基本上是完全独立的.虽然大家都在同一个项目中,但可以分成互相独立的两块,并且前后端通常使用不同的构建工具. 比如当后端使用Scala时,我们会使用sbt进行项目构建,对scala代码进行

前端开发环境搭建 grunt bower、requirejs 、 anjular

现在web开发的趋势是前后端分离.前端采用某些js框架,后端采用某些语言提供restful API,两者以json格式进行数据交互. 如果后端采用node.js,则前后端可以使用同一种语言,共享某些可重用的Js代码,并共享构建工具.但很多时候我们可能采用别的语言,如ruby/java/scala等,此时前后端代码基本上是完全独立的.虽然大家都在同一个项目中,但可以分成互相独立的两块,并且前后端通常使用不同的构建工具. 比如当后端使用Scala时,我们会使用sbt进行项目构建,对scala代码进行

bootstrap前端开发框架环境搭建

<!DOCTYPE html> <html> <head> <title>bootstrap框架搭建</title> <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <script src=&q

grunt 前端开发环境搭建

1.找管理员(汤严敏)开通gitlab权限 2.下载并安装git工具 3.下载并安装nodejs 4.安装cnpm 5.安装kulor-cli cnpm install -g kulor-cli cnpm install -g grunt-cli cnpm install 6.安装nginx并运行 7.进入到工作目录  运行 grunt 补充如何从远程拉代码,在本地配置环境并运行 1.到https://code.wz-inc.com/找到相对应的项目路径,复制下来, 2.git clone 到本

gulp前端自动化环境搭建详解

1.安装 nodejs Grunt和所有grunt插件都是基于nodejs来运行的, https://nodejs.org/ 安装完成之后在终端 node -v 查看安装版本  npm -v 查看npm版本 选装cnpm 1.1.说明:因为npm安装插件是从国外服务器下载,受网络影响大,可能出现异常, 如果npm的服务器在中国就好了,所以我们乐于分享的淘宝团队干了这事.来自官网: "这是一个完整 npmjs.org 镜像,你可以用此代替官方版本(只读),同步频率目前为  10分钟 一次以保证尽量