Windows下配置前端开发环境

一、安装Nodejs

官网地址   https://nodejs.org/en/  下载对应版本node推荐下载: 

PS：node 安装完包含了node 和 npm；可以使用控制台输入测试：  node -v  以及  npm -v 

附件：npm 安装镜像链接不稳定，所以需要翻墙 附件 LT.exe 蓝灯，双击即可。

二、国内优秀npm镜像推荐及使用

npm全称Node Package Manager，是node.js的模块依赖管理工具。由于npm的源在国外，所以国内用户使用起来各种不方便。下面整理出了一部分国内优秀的npm镜像资源，国内用户可以选择使用。

国内优秀npm镜像

淘宝npm镜像

搜索地址：http://npm.taobao.org/

registry地址：http://registry.npm.taobao.org/

cnpmjs镜像

搜索地址：http://cnpmjs.org/

registry地址：http://r.cnpmjs.org/

如何使用

有很多方法来配置npm的registry地址，下面根据不同情境列出几种比较常用的方法。以淘宝npm镜像举例：

临时使用

           npm --registry https://registry.npm.taobao.org install express

持久使用

          npm config set registry https://registry.npm.taobao.org （推荐）

          // 配置后可通过下面方式来验证是否成功

          npm config get registry

         // 或

         npm info express

通过cnpm使用

          npm install -g cnpm --registry=https://registry.npm.taobao.org

          // 使用

         cnpm install express

三、开启本地服务 http-server (127.0.0.1:8080 或者 localhost:8080 或者 本地局域网IP地址)

npm install http-server -g --registry=https://registry.npm.taobao.org

npm install [‘插件名称’] -g(全局安装) --registry(设置国内淘宝镜像，原地址需要翻墙才可以拉取，现在修改源指向国内淘宝npm)

安装完成后 进入 项目根目录 > http-server     即可启动服务玩耍！有图：

预览

四、配置本地Chrome支持跨域

需要在Chrome浏览器的桌面快捷方式》 右击 》 属性 》 目标值后面添加（有个空格）

--args --disable-web-security --user-data-dir

完事后 记得重启Chrome，成功的话 打开chrome回头提示。

五、windows7 开启虚拟Wifi （有测试网络的同学就不用看了）

1、以管理员身份运行 CMD.exe

2、输入'netsh wlan set hostednetwork mode=allow ssid=ld_guest key=qweqwe123'

3、打开网络和共享中心，右击本地链接 - 共享 - 选中共享给虚拟wifi选项 - 确定

4、输入'netsh wlan start hostednetwork' ok!

六、Nginx搭建本地可跨域环境（不支持手机扫码预览的跨域形式，但是可以本机多浏览器预览）（windows环境）

1、下载Nginx（Download）--- 解压 放到你喜欢的目录下 改名（nginx）

2、启动Nginx：在nginx.exe的目录下，执行DOS命令：start nginx

3、

 回车 会出现有个窗口一闪而过 ，就成功了！

4、验证nginx服务，一般有3个方法

     1).在nginx.exe的目录下，执行DOS命令：nginx -V

     2).打开任务管理器，查看nginx进程

     3).直接访问 http://127.0.0.1

5.关闭nginx进程

   在nginx.exe的目录下，执行DOS命令：nginx -s stop

6、每次修改config文件都需要重启服务：nginx -s reload

7、具体配置如下：

打开conf->nginx.conf文件，修改server这块

server {

listen 3002; #监听的端口

server_name localhost; #服务器名

location / {

    proxy_pass http://10.1.8.80:3002;#实际本地域名

}

location /apis/ {   #添加访问目录为/apis的代理配置

    proxy_pass http://m.leadfund.com.cn;#实际要调的线上接口

}

error_page 500 502 503 504 /50x.html;

location = /50x.html {

   root html;

}

图例：（标红就是本地预览的时候配置的域名和监听端口一般端口为 80 即可，就可以直接 localhost/#/访问了！）

好了，去体验吧，有疑问大家交流下！

持续更新·····