前端环境的安装与配置

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端环境的安装与配置相关的知识,希望对你有一定的参考价值。

前端环境的安装与配置?一、工具安装
1.编辑器
2.Git(分布式的代码管理工具)
3.Photoshop
4.Nodejs链接
二、 环境配置
1.配置git:

1.1 设置Git的user name和email:
$ git config --global user.name "name"
$ git config --global user.email "xxxx@vchangyi.com"
1.2 生成SSH密钥过程:(看需求配置)
$ ssh-keygen -t rsa -C "xxxx@vchangyi.com"

3个回车,密码为空。
Your identification has been saved in /home/tekkub/.ssh/id_rsa.
Your public key has been saved in /home/tekkub/.ssh/id_rsa.pub.
The key fingerprint is:

………………

最后得到了两个文件:id_rsa和id_rsa.pub

添加密钥到ssh:

登陆gitlab, Profile Settings -> SSH Keys -> ADD SSH KEYS ,找到本地的id_rsa.pub文件,复制出里面的内容,添加到 key 内,此时 Title 会自动填上你的邮箱,没有的话手动填写, ADD KEY
1.3 拉取代码到本地(权限)

创建一个存放项目的文件夹,在该文件夹下,单击右键,选择git bash,打开git命令框,编写命令:git clone git@gitlab.vchangyi.com:xx/xx.git(可以在gitlab项目中找到存放地址,gitlab地址:http://gitlab.vchangyi.com ),按回车,就可以从gitlab上clone代码到本地文件夹
1.4 手动安装nodejs,如果是pc端安装的话,nodejs版本不能过低。

安装最新版的话npm安装项目依赖会有问题,手机端gulp无法启动,所以建议安装nodejs V6。
1.5 测试node是否安装成功

在git 命令窗或者node 命令窗中输入命令 :node -v
1.6 同理,测试npm是否安装成功npm -v
1.7安装gulp

在项目下打开git 命令窗,从淘宝源上自行安装,这个时间需要等待和耐心,也会有网络原因导致安装失败,如果安装失败可以多来几次,直到成功为止。
如果是pc端:npm install --registry=http://registry.npm.taobao.org --phantomjs_cdnurl=http://cnpmjs.org/downloads

npm 安装时候 持久使用淘宝源 设置:
npm config set registry https://registry.npm.taobao.org
配置后可通过下面方式来验证是否成功
npm config get registry


npm info express
参考技术A 前端环境的安装与配比,其实前端的安装是非常有麻烦的,但是他的配比看看是不是一样,如果要不一样的话,他俩操作系统也是不一样的。 参考技术B 前端环境的安装与配置这是很很重要的,如果是前端的产品都没有安装和配置好的话,那么它后续的一些情况就就会产生一些不好的这个因素了。 参考技术C 这个安装的话必须要你提前设置好各种服务,然后才可以进行安装配置,而且这个配置起来的时候比较繁琐。 参考技术D 前端环境的安装与配置,你可以详细的阅读书,根据泄露书里面的介绍,进行这方面的一个改装就可以了。

前端环境配置与搭建

一、工具下载安装

 

1.编辑器WebStorm

 

2.Git(分布式的代码管理工具)

 

3.Photoshop

 

4.Nodejs

 
 

二、 环境配置

 
 

1.安装git 与 webStorm

 
 

2.配置git:

 
 
设置Git的user name和email:
 
 

打开git.exe,输入命令:

 

$ git config --global user.name "name"

 

$ git config --global user.email "[email protected]"

 
生成SSH密钥过程:
 
 

查看是否已经有了ssh密钥:cd ~/.ssh

 

如果没有密钥则不会有此文件夹,有则备份删除

 

生成密钥:

 

$ ssh-keygen -t rsa -C "[email protected]"

 

按3个回车,密码为空。

 

Your identification has been saved in /home/tekkub/.ssh/id_rsa.

Your public key has been saved in /home/tekkub/.ssh/id_rsa.pub.

The key fingerprint is:

………………

 

最后得到了两个文件:id_rsa和id_rsa.pub

 

添加密钥到ssh:

 

登陆gitlab, Profile Settings -> SSH Keys -> ADD SSH KEYS ,找到本地的id_rsa.pub文件,复制出里面的内容,添加到 key 内,此时 Title 会自动填上你的邮箱,没有的话手动填写, ADD KEY

 

3.webStorm 连接git

 
 

打开webStorm: File -> Setting -> Version Control ->Git : D:\Git\bin\git.exe

 

4.拉取代码到本地

 
 

创建一个存放项目的文件夹,在该文件夹下,单击右键,选择git bash,打开git命令框,编写命令:git clone [email protected]:xx/xx.git(可以在gitlab项目中找到存放地址,gitlab地址:http://gitlab.vchangyi.com ),按回车,就可以从gitlab上clone代码到本地文件夹

 

5.手动安装nodejs,如果是pc端安装的话,nodejs版本不能过低。

 

ps:亲自踩过的坑,由于我们手机端的项目是比较早的了,所以如果跑手机端的话,nodjs不可安装最新版,安装最新版的话npm安装项目依赖会有问题,手机端gulp无法启动,所以建议安装nodejs V6。

 

6.测试node是否安装成功

 
 

在git 命令窗或者node 命令窗中输入命令 : node -v

 

7.同理,测试npm是否安装成功 npm -v

 
 

8.安装gulp

 
 

在项目下打开git 命令窗,从淘宝源上自行安装,这个时间需要等待和耐心,也会有网络原因导致安装失败,如果安装失败可以多来几次,直到成功为止。

 

如果是移动端: npm install -g gulp --registry=http://registry.npm.taobao.org --phantomjs_cdnurl=http://cnpmjs.org/downloads

npm install --registry=http://registry.npm.taobao.org --phantomjs_cdnurl=http://cnpmjs.org/downloads

 

如果是pc端:npm install --registry=http://registry.npm.taobao.org --phantomjs_cdnurl=http://cnpmjs.org/downloads

 

npm 安装时候 持久使用淘宝源 设置:

 

npm config set registry https://registry.npm.taobao.org

 

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

npm config get registry

// 或

npm info express

 

9.移动端启动gulp

 
 

打开webStorm,点击底部的 Terminal 打开输入窗,输入命令 : gulp serve

ps:如果手机端gulp无法启动,请检查nodejs版本,参考本wiki的第五条nodejs的安装。

同理,pc端启动:npm run serve

以上是关于前端环境的安装与配置的主要内容,如果未能解决你的问题,请参考以下文章

前端开发需要配置啥环境

ThingsBoard前端项目的安装与启动

TensorFlow的环境配置与安装以及在Pycharm的使用

python环境变量的安装与配置

Conda安装与环境配置

现代前端开发环境之基本配置