从零搭建Windows前端开发环境

蓝胖子Teresa
2,794 阅读4分钟

最近因为换电脑，所以，前端开发环境的准备工作需要走一波了，那就借此机会，记录一下这个过程吧 ~

本文记录了这八个部分：

  • 一 nodejs安装
  • 二 npm配置 （可选）
  • 三 yarn安装
  • 四 Vs code 安装
  • 五 Vs code 配置
  • 六 Vs code 常用插件
  • 七 git安装
  • 八 SourceTree安装

一 nodejs安装

1.1 下载

官网下载：nodejs.org/zh-cn/downl…

图片.png

1.2 安装

默认是安装在C盘。（我这里选择安装到了D盘）

图片.png

一路next 安装。

1.3 检查安装情况

打开命令窗口：Win+R   cmd    

输入命令： node  -V    

显示相应的安装版本，说明node安装成功。

图片.png

二 npm配置 （可选）

node.js安装后会自动安装npm。

查看npm版本：npm -v

图片.png

因为npm安装的模块原本是默认安装在C盘xxx\AppData\Roaming\npm路径下，为了避免C盘随着后续安装内容的增多而被占用更多空间，可以将全局安装目录以及缓存目录配置到其他盘。当然也可以不配置。

具体配置方式如下：

2.1 在node.js安装目录下新建两个文件夹 node_global和node_cache

图片.png

2.2 打开命令行窗口输入以下两条命令：

npm config set prefix "D:\tools\nodejs\node_global"

npm config set cache "D:\tools\nodejs\node_cache"

2.3 配置环境变量

首先打开环境变量

图片.png

先配置环境变量-系统变量

①新建一个变量名为“NODE_PATH”， 值为“D:\tools\nodejs\node_global\node_modules”

图片.png

②双击path 新增一项，具体如下图：

图片.png

再配置环境变量-用户变量。将npm的默认安装路径修改为你自己新建的node_global文件夹的路径

图片.png

图片.png  

2.4 查看配置结果

查看npm全局安装目录

npm root -g

查看npm全局安装目录以及缓存目录配置

npm config ls

图片.png

2.5 更换镜像地址(可选）

npm config set registry https://registry.npmmirror.com/

2.6 可能遇到的问题

① 执行npm i 报错：

图片.png

解决办法：

修改npm 所在的文件夹的权限，具体操作步骤见下图：

图片.png

图片.png

给该用户添加修改权限 ，点击确定。就可以顺利npm install xxx -g了。

三 yarn安装

3.1 安装命令：npm install -g yarn

图片.png

3.2 检查yarn是否安装好：

查看版本号：yarn -v

图片.png 

3.3 配置（可选）

和npm配置方式一样，可参考上面，执行的命令如下：

yarn config set global-folder "D:\tools\nodejs\yarn_global"

yarn config set cache-folder "D:\tools\nodejs\yarn_cache"

3.4 配置环境变量

图片.png

3.5 更换镜像地址：

yarn config set registry https://registry.npmmirror.com/

四 Vs code 安装

4.1 下载

官网：code.visualstudio.com/Download

图片.png

4.2 安装

①安装路径的选择，我是放到D盘的。

②如需自动创建桌面上的快捷打开方式，则勾选。其他默认不动，next

图片.png

4.3 汉化（可选）

图片.png

至此，开发工具就安装成功啦~

4.4 拓展：VS Code User和System版区别

如想了解可戳这里 StakOverflow看看。  

五 Vs code 配置

新版的vscode设置默认为UI的设置，而非之前的json设置。

如果你想切换为json 设置，如下操作:

文件>首选项>设置 > 搜索workbench.settings.editor，选择json，关闭设置的窗口。
再次：文件>首选项>设置。就会看到一个json 文件。然后可以在json文件中加入你自己的配置即可。
如果你想从json切换成UI设置。只需将文件的第一行配置由json改为ui,保存，关闭该文件，原路径再进入就切换回UI设置了。

图片.png 我使用的配置内容如下：

{

    "workbench.settings.editor": "json",

    "files.autoSave": "onFocusChange",

    "editor.fontSize": 16,

    "eslint.alwaysShowStatus": true,

    "eslint.format.enable": true,

    "prettier.configPath": ".prettierrc.js",

    "prettier.endOfLine": "lf",

    "prettier.printWidth": 110,

    "prettier.requireConfig": true,

    "prettier.singleQuote": true,

    "prettier.vueIndentScriptAndStyle": true,

    "prettier.jsxSingleQuote": true,

    "prettier.jsxBracketSameLine": true,

    "editor.formatOnSave": true,

    "javascript.updateImportsOnFileMove.enabled": "always",

    "prettier.htmlWhitespaceSensitivity": "strict",

    "files.associations": {

        "*.md": "gitignore"

    },

    // 在使用搜索功能时，将这些文件夹/文件排除在外

    "search.exclude": {

        "**/node_modules": true,

        "**/bower_components": true,

        "**/target": true,

        "**/logs": true,

    },

    // #让vue中的js按"prettier"格式进行格式化

    "vetur.format.defaultFormatter.html": "js-beautify-html",

    "vetur.format.defaultFormatter.js": "prettier",

    "vetur.format.defaultFormatterOptions": {

        "js-beautify-html": {

            // #vue组件中html代码格式化样式

            "wrap_attributes": "force-aligned", //也可以设置为“auto”，效果会不一样

            "wrap_line_length": 200,

            "end_with_newline": false,

            "semi": false,

            "singleQuote": true

        },

        "prettier": {

            "semi": false,

            "singleQuote": true

        }

    }

}

六 Vs code 常用插件

我目前安装的是这些插件，欢迎朋友们安利你们喜欢的实用的插件呀~

图片.png

图片.png

七 git安装

7.1 下载

官网地址：git-scm.com/download/wi…

图片.png

7.2 安装

默认是装在C盘的，我这里改为了D盘

图片.png

一路 next 、 install

图片.png

Finish。

7.3  检查是否安装成功

①按下键盘键 win+r 调出运行框

②输入cmd 调出命令提示符

③输入 git --version
出现如下图相应版本信息号，则证明Git已安装成功

图片.png

八 SourceTree安装

非必须，看个人需要。  

8.1 下载

官方地址：www.sourcetreeapp.com/

图片.png

8.2 安装

图片.png

注意： Bitbucket服务器 和 Bitbucket 都需要账户登录，但打开需要外网连接，故无法进行登录注册。

免注册，如下操作：

关闭SourceTreeSetup-3.4.9.exe

找到SourceTree所在路径

C:\Users{你自己电脑用户名}\AppData\Local\Atlassian\SourceTree

注：若找不到AppData文件，点击文件资源管理器的查看，勾选隐藏的项目.

创建accounts.json文件，并复制以下代码至accounts.json：

[

  {

    "$id": "1",

    "$type": "SourceTree.Api.Host.Identity.Model.IdentityAccount, SourceTree.Api.Host.Identity",

    "Authenticate": true,

    "HostInstance": {

      "$id": "2",

      "$type": "SourceTree.Host.Atlassianaccount.AtlassianAccountInstance, SourceTree.Host.AtlassianAccount",

      "Host": {

        "$id": "3",

        "$type": "SourceTree.Host.Atlassianaccount.AtlassianAccountHost, SourceTree.Host.AtlassianAccount",

        "Id": "atlassian account"

      },

      "BaseUrl": "https://id.atlassian.com/"

    },

    "Credentials": {

      "$id": "4",

      "$type": "SourceTree.Model.BasicAuthCredentials, SourceTree.Api.Account",

      "Username": "",

      "Email": null

    },

    "IsDefault": false

  }

]

  重新点击SourceTreeSetup-3.0.8.exe安装，点击跳过或者下一步，然后找到C:\Users\Teresa\AppData\Local\Atlassian\SourceTree.exe_Url_xazeglpd5ismf0voomvcwp3w3pd0qyhe\3.4.9.0   下的 user.config文件   添加以下代码：

<setting name="AgreedToEULA" serializeAs="String">

    <value>True</value>

</setting>

<setting name="AgreedToEULAVersion" serializeAs="String">

    <value>20160201</value>

</setting>

继续回到SourceTree界面，下一步，输入你的邮箱，然后就安装完成了。之后会自动打开这个界面：

图片.png

安装完成。

目前先安装了这些，后续再补充吧~ 站起来，动一动吧~

b5af6672b1d6444da871404b629b2c90.gif

avatar
文章
阅读
粉丝