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

忘是亡心i 2022-04-01 08:39 1073阅读 0赞

## 干货( Dry goods？) ##

*  [node.js][]
 *  [brew(just for mac)][brew_just for mac]
 *  [ruby][]
 *  [npm][]
 *  [cnpm][]
 *  [yarn][]
 *  [git][]
 *  [webpack][]
 *  [bower][]
 *  [browser-sync][]
 *  [express][]
 *  [gulp][]
 *  [grunt][]
 *  [sass][]
 *  [vue][]
 *  [angular][]
 *  [react][]
 *  [cutterman(填坑中)][cutterman]
 *  [待续...][...]

--------------------

## node.js ##

> **Window**

1.  官网下载地址：[下载 | Node.js][_ Node.js]
2.  Node.js默认安装目录为 *C:\\Program Files\\nodejs\\*, 你也可以修改目录

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

1.  最后install，等安装好
2.  在命令行里： node -v，看是否会出现一个版本号，出现了说明安装成功！
3.  最后还要检查一下**环境变量**是否配置：我的电脑（此电脑）右键，打开属性
4.  ![点击高级系统设置][bVQq8V_w_1199_h_726]
5.  ![点击环境变量][bVQq9N_w_420_h_442]
6.  ![变量值加入node安装地址][node]

> **Mac**

1.  官网下载地址：[下载 | Node.js][_ Node.js 1]
2.  双击刚下载的文件，按步骤默认安装就行
3.  ![列表项目][bVQrum_w_1464_h_1100]
4.  安装完成后打开终端，输入  
    npm -v   
    node -v   
    出现版本信息，说明安装成功。
5.  ![列表项目][bVQruo_w_802_h_200]

--------------------

## brew(just for mac) ##

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

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

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

## ruby ##

> **Window**

1.  官网下载地址：[下载 Ruby][Ruby]
2.  点击 Next，继续向导，记得勾选 Add Ruby executables to your PATH，

直到 Ruby 安装程序完成

1.  ![列表项目][bVQrnw_w_503_h_387]
2.  安装完成后， 在命令行输入 ruby -v查看是否安装成功
3.  出现版本号则成功，未出现你可能需要进行**环境变量**的配置
4.  ![点击高级系统设置][bVQq8V_w_1199_h_726]
5.  ![点击环境变量][bVQq9N_w_420_h_442]
6.  在path里面后面添加 %RUBY\_HOME%bin
7.  ![列表项目][bVQrop_w_414_h_189]
8.  ![列表项目][bVQrov_w_414_h_190]

> **Mac**

1.  先安装好XCode，因为它会安装好Unix环境需要的开发包
2.  安装RVM:   
    $ curl -L [https://get.rvm.io][https_get.rvm.io] | bash -s stable  
    期间可能需要输入密码，等待一段时间将安装好。
3.  ![bVQrpe_w_926_h_381][]
4.  载入rvm（若打开新终端窗口则不用执行）  
    source /.rvm/scripts/rvm然后检查是否安装好了 rvm -v
5.  安装Ruby  
    列出已知的ruby版本  
    $ rvm list known
6.  ![图片描述][bVQrqT_w_575_h_193]
7.  选择2.0.0版本进行安装  
    $ rvm install 2.0.0  
    等待下载(途中需要按回车确定安装路径、还要输入密码)、编译
8.  检查是否安装好了  
    rvm−v gem -v
9.  将源替换为淘宝的:
    
        $ gem source -r https://rubygems.org/
        $ gem source -a https://ruby.taobao.org
        $ gem sources -l  #查看打印是否替换成功

--------------------

## npm ##

> **Window**

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

> **Mac**

1.  升级 npm:  
    $ sudo npm install npm -g

--------------------

## cnpm ##

命令行输入：

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

--------------------

## git ##

> **Window**

1.  官网下载地址：[Downloading Git][]
2.  另一个简单的方法是安装： GitHub for Windows。  
    网址为：[https://desktop.github.com/][https_desktop.github.com]

> **Mac**

1.  官网下载地址：[https://git-scm.com/download/mac][https_git-scm.com_download_mac]
2.  Mac 版本好像在维护，如果下载没开始，请你手动点击。

--------------------

## webpack ##

> **Window**

用npm 安装webpack

npm install webpack -g

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

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

--------------------

## Bower-A package manager for the web ##

1.  使用npm，打开终端，输入：
    
        npm install -g bower
2.  官网地址：[Bower-A package manager for the web][]

--------------------

## Browser-sync ##

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

1.  全局安装 BrowserSync
    
        npm install -g browser-sync
2.  在您需要构建的项目里安装：
    
        npm install --save-dev browser-sync
3.  启动 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 ##

1.  全局安装：
    
        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  #验证是否安装成功
2.  安装 Express 并将其保存到依赖列表
    
        npm install express --save

--------------------

## Gulp ##

1.  官网地址：[gulp-用自动化构建工具增强你的工作流程！][gulp-]
2.  全局安装 gulp
    
        npm install --global gulp
3.  作为项目的开发依赖（devDependencies）安装
    
        npm install --save-dev gulp

--------------------

## Grunt ##

1.  官网地址：[Grunt: JavaScript世界的构建工具][Grunt_ JavaScript]
2.  使用grunt，首先必须将grunt-cli安装到全局环境中
    
        npm install -g grunt-cli
3.  安装grunt
    
        npm install grunt --save-dev

--------------------

## yarn ##

1.  官网地址：[yarn - 一个可能取代npm的新型包管理器][yarn - _npm]
2.  官方下载地址：[https://yarn.bootcss.com/docs...][https_yarn.bootcss.com_docs...]

--------------------

## sass ##

1.  官网地址：[Sass世界上最成熟、稳定和强大的CSS扩展语言][Sass_CSS]
2.  window下安装SASS首先需要安装Ruby
    
        gem install sass # mac安装遇到权限问题需加 sudo gem install sass

--------------------

## Vue ##

1.  官网地址：[vue - 渐进式JavaScript 框架][vue - _JavaScript]
2.  安装vue:
    
        npm install vue
3.  Vue.js 官方命令行工具(**脚手架**)，可用于快速搭建大型单页应用:
    
        # 全局安装 vue-cli
        npm install --global vue-cli
        # 创建一个基于 webpack 模板的新项目
        vue init webpack my-project
        # 安装依赖
        cd my-project
        npm install
        npm run dev

--------------------

## Angular ##

1.  官网地址：[angular - 一套框架，多种平台同时适用手机与桌面][angular -]
2.  安装 angular:
    
        npm install angular
3.  安装 angular脚手架：
    
        npm install -g @angular/cli
        # 生成一个新项目
        ng new my-app
        # 进入项目目录，并启动服务器
        cd my-app
        ng serve --open

--------------------

## React ##

1.  官网地址：[React - 一种JAVASCRIPT库，用于构建用户接口][React - _JAVASCRIPT]
2.  使用 create-react-app（类似一个脚手架工具gongju快速构建 React 开发环境：
    
        $ cnpm install -g create-react-app
        $ create-react-app my-app
        $ cd my-app/
        $ npm start

--------------------

## 待续...... ##

[node.js]: https://segmentfault.com/a/1190000010081326#nodeJS
[brew_just for mac]: https://segmentfault.com/a/1190000010081326#brew
[ruby]: https://segmentfault.com/a/1190000010081326#ruby
[npm]: https://segmentfault.com/a/1190000010081326#npm
[cnpm]: https://segmentfault.com/a/1190000010081326#cnpm
[yarn]: https://segmentfault.com/a/1190000010081326#yarn
[git]: https://segmentfault.com/a/1190000010081326#git
[webpack]: https://segmentfault.com/a/1190000010081326#webpack
[bower]: https://segmentfault.com/a/1190000010081326#bower
[browser-sync]: https://segmentfault.com/a/1190000010081326#browser-sync
[express]: https://segmentfault.com/a/1190000010081326#express
[gulp]: https://segmentfault.com/a/1190000010081326#gulp
[grunt]: https://segmentfault.com/a/1190000010081326#grunt
[sass]: https://segmentfault.com/a/1190000010081326#sass
[vue]: https://segmentfault.com/a/1190000010081326#vue
[angular]: https://segmentfault.com/a/1190000010081326#angular
[react]: https://segmentfault.com/a/1190000010081326#react
[cutterman]: https://segmentfault.com/a/1190000010081326#cutterman
[...]: https://segmentfault.com/a/1190000010081326#more
[_ Node.js]: https://nodejs.org/zh-cn/download
[bVQq8V_w_1199_h_726]: /images/20220401/ffd373a9d1ec46d6828c93fdb9c07b61.png
[bVQq9N_w_420_h_442]: /images/20220401/9f79e76a44764f03b9e07ca4c1f50e70.png
[node]: /images/20220401/a71381fa42ca4cdeb99c13e768be78f9.png
[_ Node.js 1]: https://nodejs.org/en/download/
[bVQrum_w_1464_h_1100]: /images/20220401/06eb605eec434872b1b148336ef7ce13.png
[bVQruo_w_802_h_200]: /images/20220401/c95027075f314437a25696857ec888fc.png
[Homebrew-macOS]: https://brew.sh/index_zh-cn.html
[Ruby]: http://www.ruby-lang.org/zh_cn/downloads/
[bVQrnw_w_503_h_387]: /images/20220401/04f85be95cc343018c5b3133f787f289.png
[bVQrop_w_414_h_189]: /images/20220401/b68eb965c8774516af9a67cb2648327c.png
[bVQrov_w_414_h_190]: /images/20220401/ebe0d83981e440d8b9366fd6bcd47a56.png
[https_get.rvm.io]: https://get.rvm.io/
[bVQrpe_w_926_h_381]: /images/20220401/386fead7a31c431da24a1f459bdb6908.png
[bVQrqT_w_575_h_193]: /images/20220401/61c1e0ffc8b448b699dc18057bd1a090.png
[Downloading Git]: https://git-scm.com/download/win
[https_desktop.github.com]: https://desktop.github.com/
[https_git-scm.com_download_mac]: https://git-scm.com/download/mac
[Bower-A package manager for the web]: https://bower.io/
[http_www.browsersync.cn]: http://www.browsersync.cn/
[gulp-]: http://www.gulpjs.com.cn/
[Grunt_ JavaScript]: http://www.gruntjs.net/
[yarn - _npm]: https://yarn.bootcss.com/
[https_yarn.bootcss.com_docs...]: https://yarn.bootcss.com/docs/install.html
[Sass_CSS]: https://www.sass.hk/
[vue - _JavaScript]: https://cn.vuejs.org/
[angular -]: https://angular.cn/
[React - _JAVASCRIPT]: https://facebook.github.io/react/