前端开发环境的安装、搭建及配置

MycLambert 发布于2019-08-06 10:50 / 1641人阅读

摘要：干货填坑中待续官网下载地址下载默认安装目录为你也可以修改目录记住，一路都是下一步最后，等安装好在命令行里，看是否会出现一个版本号，出现了说明安装成功最后还要检查一下环境变量是否配置我的电脑此电脑右键，打开属性官网下载地址下载双击刚下载的

干货( Dry goods？)

node.js

brew(just for mac)

ruby

npm

cnpm

yarn

git

webpack

bower

browser-sync

express

gulp

grunt

sass

vue

angular

react

cutterman(填坑中)

待续...

node.js

Window

官网下载地址：下载 | Node.js

Node.js默认安装目录为 C:Program Files odejs, 你也可以修改目录

记住，一路都是 next（下一步）

最后install，等安装好

在命令行里： node -v，看是否会出现一个版本号，出现了说明安装成功！

最后还要检查一下环境变量是否配置：我的电脑（此电脑）右键，打开属性

Mac

官网下载地址：下载 | Node.js

双击刚下载的文件，按步骤默认安装就行

安装完成后打开终端，输入
npm -v
node -v
出现版本信息，说明安装成功。

brew(just for mac)

安装方式，直接在终端里输入：

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

官网地址：Homebrew-macOS 缺失的软件包管理器

ruby

Window

官网下载地址：下载 Ruby

点击 Next，继续向导，记得勾选 Add Ruby executables to your PATH，

直到 Ruby 安装程序完成

安装完成后，在命令行输入 ruby -v查看是否安装成功

出现版本号则成功，未出现你可能需要进行环境变量的配置

在path里面后面添加 %RUBY_HOME%bin

Mac

先安装好XCode，因为它会安装好Unix环境需要的开发包

安装RVM:
$ curl -L https://get.rvm.io | bash -s stable
期间可能需要输入密码，等待一段时间将安装好。

载入rvm（若打开新终端窗口则不用执行）
$ source ~/.rvm/scripts/rvm
然后检查是否安装好了
$ rvm -v

安装Ruby
列出已知的ruby版本
$ rvm list known

选择2.0.0版本进行安装
$ rvm install 2.0.0
等待下载(途中需要按回车确定安装路径、还要输入密码)、编译

检查是否安装好了
$ rvm -v
$ gem -v

将源替换为淘宝的:

$ gem source -r https://rubygems.org/
$ gem source -a https://ruby.taobao.org
$ gem sources -l  #查看打印是否替换成功

npm

Window

新版的 node.js已经集成了 npm，所以之前安装 node时 npm也一并安装好了，
可以通过输入 "npm -v" 来测试是否成功安装

升级 npm:
npm install npm -g
cnpm install npm -g

Mac

升级 npm:
$ sudo npm install npm -g

cnpm

命令行输入：

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

git

Window

官网下载地址：Downloading Git

另一个简单的方法是安装： GitHub for Windows。
网址为：https://desktop.github.com/

Mac

官网下载地址：https://git-scm.com/download/mac

Mac 版本好像在维护，如果下载没开始，请你手动点击。

webpack

Window

用npm 安装webpack

npm install webpack -g

Mac
mac下报错的话前面可能需要加sudo获取管理员权限

```
(sudo) npm install -g webpack
```

Bower-A package manager for the web

使用npm，打开终端，输入：

npm install -g bower

官网地址：Bower-A package manager for the web

Browser-sync

官网地址：http://www.browsersync.cn/

全局安装 BrowserSync

npm install -g browser-sync

在您需要构建的项目里安装：

npm install --save-dev browser-sync

启动 BrowserSync：
（1） 如果您想要监听.css文件, 您需要使用服务器模式
BrowserSync 将启动一个小型服务器，并提供一个URL来查看您的网站

   // --files 路径是相对于运行该命令的项目（目录） 
   browser-sync start --server --files "*.css"

（2）如果您需要监听多个类型的文件，您只需要用逗号隔开。例如我们再加入一个.html文件

// --files 路径是相对于运行该命令的项目（目录）
browser-sync start --server --files "*.css, *.html"
// 如果你的文件层级比较深，您可以考虑使用 **（表示任意目录）匹配，任意目录下任意.css 或.html文件
browser-sync start --server --files "*.css, *.html"

（3）外网可以访问（不用连同一个网，wifi）

browser-sync start --server --files "*.css, *.html" --tunnel

Express

全局安装：

npm install -g express-generator #4.0版本以上需先安装 express-generator
npm install -g express
npm install -g express@3.5.0     #按3.5版本安装就不需要安装 express-generator
express -V  #验证是否安装成功

安装 Express 并将其保存到依赖列表

npm install express --save

Gulp

官网地址：gulp-用自动化构建工具增强你的工作流程！

全局安装 gulp

npm install --global gulp

作为项目的开发依赖（devDependencies）安装

npm install --save-dev gulp

Grunt

官网地址：Grunt: JavaScript世界的构建工具

使用grunt，首先必须将grunt-cli安装到全局环境中

npm install -g grunt-cli

安装grunt

npm install grunt --save-dev

yarn

官网地址：yarn - 一个可能取代npm的新型包管理器

官方下载地址：https://yarn.bootcss.com/docs...

sass

官网地址：Sass世界上最成熟、稳定和强大的CSS扩展语言

window下安装SASS首先需要安装Ruby

gem install sass   # mac安装遇到权限问题需加 sudo gem install sass

Vue

官网地址：vue - 渐进式JavaScript 框架

安装vue:

npm install vue

Vue.js 官方命令行工具(脚手架)，可用于快速搭建大型单页应用:

# 全局安装 vue-cli
npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
vue init webpack my-project
# 安装依赖
cd my-project
npm install
npm run dev

Angular

官网地址：angular - 一套框架，多种平台同时适用手机与桌面

安装 angular:

npm install angular

安装 angular脚手架：

npm install -g @angular/cli
# 生成一个新项目
ng new my-app
# 进入项目目录，并启动服务器
cd my-app
ng serve --open

React

官网地址：React - 一种JAVASCRIPT库，用于构建用户接口

使用 create-react-app（类似一个脚手架工具gongju快速构建 React 开发环境：

$ cnpm install -g create-react-app
$ create-react-app my-app
$ cd my-app/
$ npm start

待续......

云服务器超融合服务器前端开发环境搭建 java开发环境的配置 java开发环境的搭建 php开发环境的搭建

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/61135.html

vue + vuex + koa2开发环境搭建及示例开发

摘要：开发既是一个练习如何在开发环境中写代码的过程，反过来，也是一个验证环境搭建的对不对好不好用的过程。前端调用后端接口示例为突出重点，排除干扰，方便理解。写在前面这篇文章的主要目的是学会使用koa框架搭建web服务，从而提供一些后端接口，供前端调用。搭建这个环境的目的是：前端工程师在跟后台工程师商定了接口但还未联调之前，涉及到向后端请求数据的功能能够走前端工程师自己搭建的http路径...

xioqua 2019-08-22 13:56 评论0 收藏0
超详细动手搭建一个Vuepress站点及开启PWA与自动部署

摘要：五一之前就想写一篇关于的文章结果朋友结婚就不了了之了。记得最后一定要看注意事项更新仓库介绍官网类似一个极简的静态网站生成器用来写技术文档不能在爽。当然搭建成博客也不成问题。构建与自动部署用的或者的都可以也可以搭建在自己的服务器上。五一之前就想写一篇关于Vuepress的文章,结果朋友结婚就不了了之了。记得最后一定要看注意事项！更新：coding仓库：https://git.dev...

zhoutk 2019-05-29 17:50 评论0 收藏0
NodeJS+Express搭建个人博客-环境搭建（一）

摘要：本项目持续更新中，开源免费与各位爱好技术达人共勉，注现阶段仍在开发中。。。。。 NodeJS+Express+MongoDb开发的个人博客 NodeJS+Express搭建个人博客-环境搭建（一）NodeJS+Express搭建个人博客-gulp自动化构建工具使用（二）NodeJS+Express搭建个人博客-Express+Mongodb组合架构介绍（三）NodeJS+Express...

Clect 2019-06-26 17:47 评论0 收藏0
一键搭建基于docker的nodejs、php开发环境（开源项目）

摘要：最近写了个新项目，一键部署，开发环境，，，，，，因为最近开始同时写，项目，还要部署到测试预发布线上环境，其他同事也需要一套相同的环境。不同平台下搭建一整套开发环境又很繁琐，因此有了这个项目。最近写了个新项目，一键部署nodejs，php开发环境（docker，nodejs，php，nginx，mongo，mysql，redis）因为最近开始同时写nodejs，php项目，还要部署到...

TwIStOy 2019-08-01 14:08 评论0 收藏0
公司项目NODEJS实践0.1[ ubuntu,nodejs,nginx...]

摘要：创建成功后进入文件夹执行执行作用创建文件，维护项目的依赖文件解释创建文件执行作用用系统的编辑器打开文件。我的技术新群上一篇前后端分离项目实践分析下一篇公司项目实践一、前言前端如何独立用nodeJs实现一个简单的注册、登录功能，是不是只用nodejs+sql就可以了？其实是可以实现，但离实际应用还有距离，那要怎么做才是实际可用的。网上有很多nodeJs的示例，包括和 sql /...

cppprimer 2019-07-25 13:31 评论0 收藏0