windows平台web前端环境搭建

背景

随着不同终端(Pad、Mobile、PC)的兴起,对开发人员的要求越来越高,纯浏览器端的响应式已经不能满足用户体验的高要求,我们往往需要针对不同的终端开发定制的版本。为了提升开发效率,前后端分离的需求越来越被重视,后端负责业务、数据接口,前端负责展现、交互逻辑,同一份数据接口,我们可以定制开发多个版本。

环境搭建

nodejs安装

1、下载:https://nodejs.org/en/download/  (windows的安装msi文件在过程中会直接添加path的系统变量,变量值是你的安装路径。)

2、安装完成后使用cmd测试下是否安装成功,方法:在cmd下输入node -v。

3、新版的Node已经集成npm,在安装node时npm也一并安装,验证方法:npm -v。

webpack安装

1、npm install webpack -g(-g 表示全局安装)

2、验证方法:webpack -v

sass安装

1、sass依赖于ruby环境,ruby下载地址:http://rubyinstaller.org/downloads

2、在安装的时候,请勾选Add Ruby executables to your PATH这个选项,添加环境变量。

3、安装完ruby之后,在开始菜单中,找到刚才我们安装的ruby,打开Start Command Prompt with Ruby。

4、直接在命令行中输入:gem install sass;更新已安装的sass:gem update sass;验证sass安装:sass -v

vue安装

1、vue-cli安装命令:npm install -g vue-cli

git安装

1、git下载地址:https://git-scm.com/downloads

webstorm安装

1、软件下载地址:http://www.jetbrains.com/webstorm/download/#section=windows-version

2、配置sass编译:打开配置(Tools - File Watchers)就可以见到了,点击“+”号就可以新建监听配置了。在新建一个 sass、scss、less 文件之后,webstorm 会智能的提示你新建一个 watcher 任务。

3、配置webpack打包

参考链接

1、sass:https://www.w3cplus.com/sassguide/install.html

2、webpack:http://www.ferecord.com/webpack-summary.html

3、前后端分离:http://frontenddev.org/link/full-stack-development-with-nodejs-1.html

4、git:http://jingyan.baidu.com/article/020278117cbe921bcc9ce51c.html

时间: 2024-08-12 10:49:33

windows平台web前端环境搭建的相关文章

Eclipse(RustDT) + Racer + Windows 平台Rust开发环境搭建

[ 声明:版权所有,转载请注明出处,请勿用于商业用途. 联系信箱:[email protected]] 1.Rust 1.1 安装Rust 前往Rust官网下载各Windows平台安装文件,这里推荐大家下载稳定版.如果下载速度较慢,大家也可以点击打开百度云盘进行下载.下载完成后即可开始安装.整个安装过程都比较简单,Windows用户打开.msi安装文件.这里建议大家选择 高级模式,这样更加灵活,同时可以开启安装完成后自动添加环境变量到系统的功能.如图: 安装完成后,可以打开控制台,输入rust

web前端环境搭建

第一部分:浏览器 浏览器推荐chrome浏览器.FireFox浏览器. 1. chrome浏览器因为集成了Google Developer Tools(谷歌开发者工具),因此大受欢迎. 下载地址:https://www.google.com/chrome/browser/ 除了学会如何使用JavaScript编程外,还需要了解如何调试代码.下面的这个链接是一个了解谷歌开发者工具的好教程 教程地址:https://developer.chrome.com/devtools/docs/javascr

《Node.js入门》Windows 7下Node.js Web开发环境搭建笔记

近期想尝试一下在IBM Bluemix上使用Node.js创建Web应用程序.所以须要在本地搭建Node.js Web的开发測试环境. 这里讲的是Windows下的搭建方法,使用CentOS 的小伙伴请參考:<Node.js入门>CentOS 6.5下Node.js Web开发环境搭建笔记 Node.js是什么? 我们看看百科里怎么说的? JavaScript是一种执行在浏览器的脚本,它简单,轻巧.易于编辑,这样的脚本通经常使用于浏览器的前端编程.可是一位开发人员Ryan有一天发现这样的前端式

Java Web开发环境搭建基础[Windows篇]

1. 准备软件: JDK:(jdk-6u10-rc2-bin-b32-windows-i586-p-12_sep_2008.exe) Tomcat:(apache-tomcat-7.0.54-windows-x86.zip) Eclipse:(eclipse-java-helios-SR1-win32.zip) MySQL:(mysql-5.5.20-win32.msi) MySQL JDBC:(mysql-connector-java-5.1.31.zip) Navicat for MySQL

windows下 nginx php 环境搭建

windows下配置nginx+php环境 刚看到nginx这个词,我很好奇它的读法(engine x),我的直译是“引擎x”,一般引“擎代”表了性能,而“x”大多出现是表示“xtras(额外的效果)”,那么整个词的意思就是类似“极致效果”,“额外性能”.当然这里不是要来唠嗑,以上是题外话. nginx相较于我们熟悉的apache.IIS的优势,就我浅入浅出的了解,在于“反向代理”和“负载均衡”.因此考虑到能够为Web服务器节省资源,它可以代替apache来提供Web服务.那么上正题了,ngin

windows server 2003 php 环境搭建

windows server 2003是目前国内比较主流的服务器操作系统,其搭建php的环境也是多种多样,其中IIS+Fastcgi+php+mysql安装时最简单的. 1.安装IIS 打开"开始"菜单,点击"管理您的服务器"(如图1所示),点击"添加或删除角色"选择应用程序服务器 打开"开始"菜单,点击"所有程序",进入"管理工具",点击"internet信息服务(IIS)管

《Python入门》Linux 下 Python Web开发环境搭建笔记

之前写过 Windows 7下Python Web开发环境搭建笔记,今天写一下在Linux系统下搭建Python Web的开发测试环境. 我使用的系统是:ubuntu 14.04 server,根据个人经验,CentOS 6.5 下也适用. 关于Python的版本 进入Python的网站,鼠标移到导航条上的下载,我们会发现提供两下主版本的下载链接! 这两个之间存在什么差别呢? 个人理解,2.7.x的版本为更加稳定的版本,而3.x的版本则是比较前卫的版本,包含了很多新功能新特性之类的: 但如果想要

Mac OS X上IntelliJ IDEA 13与Tomcat 8的Java Web开发环境搭建

这标题实在有点拗口,不知道怎么写好,但看了标题也就明白文本的内容.最近几天在折腾这些玩意儿,所以写写总结.除了环境搭建,本文还是一篇入门级的上手教程. 去下载一些东西 JDK安装 Tomcat安装 Tomcat的配置 配置管理员账号 配置Tomcat端口 配置HTTPS 添加web应用 IntelliJ的安装 创建Java Web项目 运行Java Web项目 打成war包 去下载一些东西 老样子,先废话几句,IntelliJ IDEA,这个名字不知道谁想出来的,也真够拗口的,发音大致如此:[i

Windows Phone 8 开发环境搭建

原地址:http://blog.csdn.net/md521/article/details/11015139 Windows Phone 8将采用与Windows 8相同的NT内核,这就意味着WP8将可能兼容Win8应用,开发者仅需很少改动就能让应用在两个平台上运行.由于内核变更,Windows Phone 7.x将不能升级到Windows Phone 8.Windows Phone 8兼容所有Windows Phone 7.5的应用程序,但Windows Phone 8的所有原生程序无法在W