首页 › 前端开发综合论坛 › 从零搭建Window前端开发环境

双手一摊 發表於 2020-3-13 19:14:00

从零搭建Window前端开发环境

<h1 id="前言">前言</h1>
<p>作为一个小前端，是否因为搭建环境烦恼过，是否因为npm等国外镜像踩坑过，不要怕，接下来跟着我一步步搭建适合自己的开发环境吧！！！</p>
<h1 id="node">node</h1>
<p>这个不用说了吧，我们经常和他打交道，无论是 <code>gulp</code>、<code>webpack</code>和<code>parcel</code>等打包工具，还是各种脚手架的工具，都离不开<code>node</code>环境的支持，接下来我就介绍一下我常用的一些工具和模块。</p>
<h2 id="nvm">nvm</h2>
<p>管理<code>node</code>版本，通过<code>nvm</code>我们可以同时安装/切换不同的<code>node</code>版本</p>
<p>不过,<code>nvm</code>不支持<code>window</code>版本,但是有替代方案,就是<code>nvm-window</code>,具体为什么<code>nvm</code>为何不支持<code>windows</code>平台?这里就不做谈论了...</p>
<blockquote>
<p>ps: nvm-window下载链接，如果网速快就不需要在这里下载了，github下载链接，建议下载<code>nvm-setup.zip</code>会帮你配置好环境变量</p>
</blockquote>
<h3 id="安装">安装</h3>
<p>如果没什么特别要求，无脑下一步即可</p>
<ol>
<li>
<p>如果之前已安装<code>node</code>,作者的建议是卸载原有的<code>node</code>版本,避免发生冲突</p>
</li>
<li>
<p>配置setting.txt文件,主要是配置为国内镜像源镜像源<br>
配置文件在：C:\Users\用户名\AppData\Roaming\nvm下（如果和我一下，无脑下一步的话）</p>
<pre><code>    node_mirror: https://npm.taobao.org/mirrors/node/
    npm_mirror: https://npm.taobao.org/mirrors/npm/
</code></pre>
</li>
</ol>
<blockquote>
<p>ps: 如果遇到<code>Powershell</code>下禁止执行脚本的问题,请用管理员打开<code>Powershell</code>执行<code>set-ExecutionPolicy RemoteSigned</code>，选择y即可</p>
</blockquote>
<h3 id="常用命令">常用命令</h3>
<ol>
<li>
<p>可列出已安装的node版本 nvm list/nvm ls</p>
<pre><code class="language-shell">nvm ls
</code></pre>
</li>
<li>
<p>安装指定版本的node nvm install <version> </version></p>
<pre><code class="language-shell">nvm install latest # latest表示安装最新版
</code></pre>
<blockquote>
<p>ps: arch为可选的平台架构项（32位/64位），，默认为系统平台对应的版本，若设置为all，则同时安装两个版本。</p>
</blockquote>
</li>
<li>
<p>卸载指定版本 nvm uninstall <version></version></p>
<pre><code class="language-shell">nvm uninstall 13.6.0 # latest表示安装最新版
</code></pre>
</li>
<li>
<p>设置镜像源 nvm node_mirror &lt;node_mirror_url&gt;</p>
<ul>
<li>设置<code>node</code>镜像源</li>
</ul>
<pre><code class="language-shell">nvm node_mirror https://npm.taobao.org/mirrors/node/
</code></pre>
<ul>
<li>设置<code>npm</code>镜像源</li>
</ul>
<pre><code class="language-shell">nvm npm_mirror https://npm.taobao.org/mirrors/npm/
</code></pre>
</li>
</ol>
<h2 id="nrm">nrm</h2>
<p>众所周知的一点，<code>npm</code> 日常会挂掉，还时不时丢包，所以我们需要一款切换源的工具，来帮我们解决这个问题。</p>
<blockquote>
<p>ps: 虽然可以手动切换源，但是相对来讲还是比较麻烦的，所以推荐使用工具来帮我们完成这件事</p>
</blockquote>
<h3 id="安裝">安裝</h3>
<pre><code class="language-bash">npm install -g nrm
</code></pre>
<h3 id="常用命令-1">常用命令</h3>
<ol>
<li>
<p>列出当前支持切换的源</p>
<pre><code class="language-bash">nrm ls

* npm -------- https://registry.npmjs.org/
yarn ------- https://registry.yarnpkg.com/
cnpm ------- http://r.cnpmjs.org/
taobao ----- https://registry.npm.taobao.org/
nj --------- https://registry.nodejitsu.com/
npmMirror -- https://skimdb.npmjs.com/registry/
edunpm ----- http://registry.enpmjs.org/
</code></pre>
</li>
<li>
<p>使用taobao源作为默认的npm源</p>
<pre><code class="language-shell">nrm use taobao
    Registry has been set to: https://registry.npm.taobao.org/
</code></pre>
</li>
<li>
<p>测试源速度</p>
<ul>
<li>测试一个源</li>
</ul>
<pre><code class="language-shell">nrm test npm
</code></pre>
<ul>
<li>测试所有源</li>
</ul>
<pre><code class="language-shell">nrm test
</code></pre>
</li>
<li>
<p>访问源的主页</p>
<pre><code class="language-bash">nrm home taobao
</code></pre>
<blockquote>
<p>ps: 此命令会在默认浏览器中打开淘宝源的主页：https://registry.npm.taobao.org/</p>
</blockquote>
</li>
<li>
<p>添加/刪除 一个源</p>
<ul>
<li>添加源：nrm add <registry> <url> ，home参数主要用于访问源的主页（可选）</url></registry></li>
</ul>
<pre><code class="language-shell">nrm add gating http://npm.gatings.com/http://gatings.cn/   
</code></pre>
<ul>
<li>刪除源：nrm del <registry></registry></li>
</ul>
<pre><code class="language-shell">nrm del gating
</code></pre>
<blockquote>
<p>ps: nrm del 命令不能删除nrm自己内置的源。</p>
</blockquote>
</li>
</ol>
<h2 id="实用模块推荐">实用模块推荐</h2>
<h3 id="anywhere">anywhere</h3>
<p>朴灵大佬的 <code>anywhere</code>, 随时随地可以创建一个静态服务器，用于查看 <code>vue</code> 或 <code>react</code> 打包后的代码，或者局域网内资源共享</p>
<pre><code class="language-bash">npm i -g anywhere
anywhere
</code></pre>
<h3 id="cloc">cloc</h3>
<p>快速统计某文件夹下代码的数据量</p>
<pre><code class="language-bash">npm i -g cloc
cloc --exclude-dir=node_modules . --exclude-ext=json,html # 排除node_modules,排除json,html文件
</code></pre>
<h1 id="git">Git</h1>
<p>这个也不用我多说了吧，目前世界上最先进的分布式版本控制系统，也是最常用的版本控制工具，这里就不过多说明了，鉴于各位同学的网速文本，这里就放一下下载链接，另外，修改<code>git bash</code>主题可以参考我博客的这篇文章:GitBash主题风格</p>
<blockquote>
<p>ps: Git蓝奏云链接,Git官网链接，网速快的小伙伴可以在这里下载，同样是无脑下一步安装</p>
</blockquote>
<h1 id="vs-code">VS Code</h1>
<p>个人觉得最适合前端开发的一款编辑器了，没有之一</p>
<h2 id="安装-1">安装</h2>
<p>这个就不多介绍了，注意修改下安装路径和添加Code到环境变量即可。</p>
<blockquote>
<p>ps: 添加都环境变量主要是为了在终端输入 <code>code .</code> 或 <code>code xxx</code> 就能直接打开目录或文件。</p>
</blockquote>
<h2 id="编程字体firacode">编程字体（FiraCode）</h2>
<p><code>Fira Code</code>是<code>Fira Mono</code>字体的扩展，其中包含一组用于常见编程多字符组合的连字。</p>
<p>比如把输入的「!=」直接显示成「≠」或者把「&gt;=」变成「≥」等等，以此来提高代码的可读性。</p>
<p>再比如，..或//，连字允许我们校正间距。下面是官方的对比图</p>
<p><img src="https://cdn.JsDelivr.net/gh/GATING/blog_imgs//2020-01-17/all_ligatures.png" alt="FiraCode" loading="lazy"></p>
<blockquote>
<p>ps: FiraCode蓝奏云链接,FiraCode官方链接,同上，网速慢的就下载蓝奏云的即可</p>
</blockquote>
<h2 id="快捷键">快捷键</h2>
<p>熟练使用快捷键是程序员的必备技</p>
<h3 id="常用快捷键">常用快捷键</h3>
<ol>
<li><code>ctrl + p</code> 根据关键字快速打开一个文件</li>
<li><code>ctrl + ,</code> 打开配置项</li>
<li><code>ctrl + d</code> 快速选取多个相同的内容块</li>
<li><code>ctrl + h</code> 选取所有相同的内容块</li>
<li><code>alt + 鼠标左键</code> 选取多个</li>
<li><code>ctrl + g</code> 跳到指定行</li>
<li><code>ctrl + b</code> 切换侧边栏</li>
<li><code>shift + alt + 上下箭头</code> 复制当前行</li>
<li><code>ctrl + shift + k</code> 快速删除行</li>
<li><code>alt + 数字键</code> 快速切换标签（数字键不是小键盘的数字键）</li>
<li><code>shift + alt + f</code> 代码自动格式化</li>
<li><code>ctrl + shift + p</code> 显示所有命令</li>
<li><code>ctrl + tab</code> 切换不同的文件</li>
</ol>
<h3 id="修改左侧边栏快捷键">修改左侧边栏快捷键</h3>
<pre><code class="language-json">({
"key": "cmd+1",
"command": "workbench.view.explorer"
},
{
"key": "cmd+2",
"command": "workbench.view.search"
},
{
"key": "cmd+3",
"command": "workbench.view.scm"
},
{
"key": "cmd+4",
"command": "workbench.view.debug"
},
{
"key": "cmd+5",
"command": "workbench.view.extensions"
},
{
    "key": "ctrl+6",
    "command": "workbench.view.extension.gitlens"
})
</code></pre>
<p>这里主要是针对于和<code>Chrome</code>切换tab栏的快捷键保持一致，方便记忆</p>
<blockquote>
<p>ps: <code>ctrl+6</code> 是因为我安装了 <code>GitLens</code> 这个拓展，可根据自己的需求把最后一个去掉</p>
</blockquote>
<h2 id="插件推荐">插件推荐</h2>
<p>这里介绍一下我常用的插件</p>
<ul>
<li><code>Auto Close Tag</code> 自动闭合 HTML 标签</li>
<li><code>Auto Rename Tag</code>修改 HTML 标签时,自动修改匹配的标签(虽然有时候有bug)</li>
<li><code>Bracket Pair Colorizer</code> 用不同颜色高亮显示匹配的括号</li>
<li><code>Code Spell checker</code> 单词拼写检查</li>
<li><code>GitLens</code> 显示文件最近的 commit 和作者，显示当前行 commit 信息</li>
<li><code>HTML CSS Support</code> css提示</li>
<li><code>IntelliSense for css class names</code> html中class输入提示</li>
<li><code>JavaScript (ES6) code snippets</code> ES6语法代码段</li>
<li><code>jQuery Code Snippets</code> jQuery语法代码片段</li>
<li><code>npm Intellisense</code> 导入模块时，提示已安装模块名称</li>
<li><code>open in browser</code> 浏览器中查看</li>
<li><code>Path Intellisense</code> 路径完成提示</li>
<li><code>px2rem</code> px转rem，主要是用flexible.js 和响应式做适配使用</li>
<li><code>Settings Sync</code> 同步设置和插件到Gist,还可以分享第三方Gist共他人同步（下载）</li>
<li><code>vetur</code> Vue 语法高亮</li>
<li><code>vscode-icons</code>文件图标</li>
<li><code>Vue VSCode Snippets</code> vue的代码片段</li>
<li><code>vscode wxml</code>VS Code 提供 wxml 语法支持及代码片段</li>
<li><code>WakaTime</code> 记录你一天码代码的时间</li>
</ul>
<blockquote>
<p>附上一份vsc插件整理的pdf：点我下载</p>
</blockquote>
<h2 id="vscode-设置">VSCode 设置</h2>
<p>这里附上个人的 <code>VSCode</code> 设置,并且已经加上注释</p>
<pre><code class="language-json">{
    // 自动保存
    "files.autoSave": "afterDelay",
    "fileheader.Author": "gating",
    "fileheader.LastModifiedBy": "gating",
    // 控制资源管理器是否在把文件删除到废纸篓时进行确认。
    "explorer.confirmDelete": false,
    // 启用后，按下 TAB 键，将展开 Emmet 缩写。
    "emmet.triggerExpansionOnTab": true,
    // 在默认不支持 Emmet 的语言中启用 Emmet 缩写功能。
    "emmet.includeLanguages": {
      "javascript": "javascriptreact",
      "vue-html": "html",
      "vue": "html",
      "wxml": "html"
    },
    // 为指定的语法定义配置文件或使用带有特定规则的配置文件。
    "emmet.syntaxProfiles": {
      "vue-html": "html",
      "vue": "html"
    },
    // 配置语言的文件关联
    "files.associations": {
      "*.wxss": "css",
      "*.html": "html",
      "*.wpy": "vue"
    },
    // 控制编辑器是否显示控制字符。
    "editor.renderControlCharacters": true,
    // 设置vscode默认的终端
    "terminal.integrated.shell.windows": "C:\\windows\\System32\\WindowsPowerShell\\v1.0\\powershell.exe",
    "px2rem.rootFontSize": 75,
    "px2rem.isNeedNotes": false,
    // 控制在将设置编辑为 json 时，使用拆分 json 编辑器。
    "workbench.settings.useSplitJSON": true,
    // 使用 json 文件编辑器。
    "workbench.settings.editor": "json",
    //当在 VS Code 中重命名或移动文件时，始终自动更新路径。
    "javascript.updateImportsOnFileMove.enabled": "always",
    "vetur.format.defaultFormatter.html": "prettier",
    "html-css-class-completion.includeGlobPattern": "**/*.{css,html,vue,jsx}",
    "vetur.format.options.tabSize": 4,
    // 配置图标主题
    "workbench.iconTheme": "vscode-icons",
    // 配置缩放等级
    "window.zoomLevel": 1,
    // 配置主题
    "workbench.colorTheme": "Dracula",
    // 配置字体
    "editor.fontFamily": "Fira Code",
    // 配置字体连字。
    "editor.fontLigatures": true,
    "sync.gist": "",
    // 控制是否在搜索中跟踪符号链接。
    "search.followSymlinks": false,
    // 控制在资源管理器内拖放移动文件或文件夹时是否进行确认。
    "explorer.confirmDragAndDrop": false,
    // 在保存时格式化文件。
    "editor.formatOnSave": true,
    // 设置路径别名
    "path-intellisense.mappings": {
      "@": "${workspaceRoot}/src/",
    }
}
</code></pre>
<blockquote>
<p>如果觉得复制麻烦，并且也不想一个个安装插件，可以同步我的<code>Gist ID</code>，直接使用我的配置即可。。。ID：<code>9d1c53501e76056a81fb1e2c9a6f181b</code></p>
</blockquote>
<h3 id="同步设置">同步设置</h3>
<ol>
<li>
<p>安装 Settings Sync 插件</p>
</li>
<li>
<p>快捷键<code>ctrl + shift + p</code>,输入Sync，选择高级选项</p>
</li>
<li>
<p>选中打开设置</p>
</li>
<li>
<p>复制<code>9d1c53501e76056a81fb1e2c9a6f181b</code>到<code>Gist ID</code>栏，选择自动下载即可</p>
</li>
</ol>
<h1 id="chrome">Chrome</h1>
<p>使用人数最多，最强大的浏览器，也是前端开发必备的浏览器，丰富的拓展，搭配谷歌的同步功能，可以说一个账号走天下</p>
<h2 id="快捷键-1">快捷键</h2>
<p>还是那句话,熟练使用快捷键是程序员的必备技...下面还是介绍我常用的快捷键</p>
<ul>
<li><code>ctrl + j</code> 新标签页中打开"下载内容"页</li>
<li><code>ctrl + h</code> 新标签页中打开"历史记录"页</li>
<li><code>ctrl + n</code> 打开新窗口</li>
<li><code>ctrl + t</code> 打开一个新的Tab</li>
<li><code>ctrl + u</code> 查看页面源代码</li>
<li><code>ctrl + w</code> 关闭当前窗口</li>
<li><code>ctrl + 数字键</code> 快速跳转到和数字键对应的Tab，ctrl+9为最后一个</li>
<li><code>ctrl + shift + n</code> 以无痕模式打开新窗口（可用于多个窗口的cookie不共享，便于调试）</li>
<li><code>ctrl + tab</code> 切换不同的tab页</li>
<li><code>ctrl + g</code> 查找栏中搜索字词相匹配的下一条内容</li>
<li><code>ctrl + shift + g</code> 查找栏中搜索字词相匹配的上一条内容</li>
<li><code>shift + esc</code> 任务管理器</li>
</ul>
<h2 id="拓展插件">拓展插件</h2>
<ul>
<li><code>AdBlockPlus</code> 屏蔽烦人的广告（必装插件）</li>
<li><code>Charset</code> 修改当前页面的编码，因谷歌升级了 55 以上之后，精简编码功能</li>
<li><code>CSS Used</code> 用来获取某个元素渲染后的styles（样式），即computed后的样式，扒代码小能手</li>
<li><code>JSON-handle</code> 格式化JSON文件,访问JSON文件（数据）时获得更愉悦的体验</li>
<li><code>xxxxxxx-xxxxx</code> 管理和切换多个代理设置（小飞机必备插件）,具体怎么使用还是百度下吧，这里就不教学了</li>
<li><code>Tampermonkey</code> 有猴子插件，用于管理用户自定义的脚本（必装插件）</li>
<li><code>React Developer Tools</code> 开发React应用时必装的一款拓展</li>
<li><code>Vue.js devtools</code> 同上，都是辅助开发的拓展</li>
<li><code>Wappalyzer</code> 当前网站所使用技术栈(图个新鲜，挺有意思的)</li>
</ul>
<blockquote>
<p>ps: 油猴子脚本下载：https://greasyfork.org/zh-CN</p>
</blockquote>
<h1 id="postman">Postman</h1>
<p>作为前端，最常打交道的就是后端了，所以我们需要一个调试<code>API</code>的工具，而<code>Postman</code>就是一款非常优秀的API接口调试工具。</p>
<blockquote>
<p>ps: 如果还没用过 <code>Postman</code> 的，赶紧下载下来体验吧</p>
</blockquote>
<h2 id="安装-2">安装</h2>
<p>1.众所周知，Postman最早是chrome浏览器的插件，所以你可以通过Chrome商店搜索下载即可。</p>
<p>2.Postman提供了独立的安装包，不再依赖于Chrome浏览器了，所以也可通过安装包直接安装。</p>
<blockquote>
<p>ps：众所周知的原因，2018年初Chrome停止对Chrome应用程序的支持。所以这里建议使用独立安装包下载</p>
</blockquote>
<p>下载也是直接安装即可，这里同样提供下载链接</p>
<blockquote>
<p>Postman蓝奏云链接,Postman官网链接，网速快的小伙伴可以在这里下载</p>
</blockquote>
<h2 id="简单使用">简单使用</h2>
<h3 id="配置多个环境">配置多个环境</h3>
<p>一般正式的开发项目都会有<code>测试环境</code>和<code>线上环境</code>之分，而前端同学拿到这两个地址后，每次都要请求不同的环境都要去修改主机名，造成不必要的时间浪费，而<code>Postman</code>就提供了多个环境的选择，方便我们无缝链接不同环境的接口</p>
<p>1.设置环境变量</p>
<p>点击右上角设置图标</p>
<p><img src="https://cdn.JsDelivr.net/gh/GATING/blog_imgs//2020-01-17/postman01.jpg" alt="设置环境变量" loading="lazy"></p>
<p>添加环境变量</p>
<p><img src="https://cdn.JsDelivr.net/gh/GATING/blog_imgs//2020-01-17/postman02.jpg" alt="设置环境变量" loading="lazy"></p>
<p>添加key/value值，不同环境的key值需一致</p>
<p><img src="https://cdn.JsDelivr.net/gh/GATING/blog_imgs//2020-01-17/postman03.jpg" alt="设置环境变量" loading="lazy"><br>
<img src="https://cdn.JsDelivr.net/gh/GATING/blog_imgs//2020-01-17/postman04.jpg" alt="设置环境变量" loading="lazy"></p>
<p>2.设置对应的key值</p>
<p><img src="https://cdn.JsDelivr.net/gh/GATING/blog_imgs//2020-01-17/postman05.png" alt="设置环境变量" loading="lazy"></p>
<h3 id="配置重复header">配置重复header</h3>
<p>很多时候，当后端写完一个新接口时，我们每次测试请求，<code>header</code>头很有可能是一样的，比如说，每个接口都需要<code>token</code>，这时候就需要<code>Postman</code>来帮我们设置<code>header</code>头的变量，避免复制重复的<code>header</code>头，做无用功</p>
<p>1.设置headers</p>
<p><img src="https://cdn.JsDelivr.net/gh/GATING/blog_imgs//2020-01-17/postman06.jpg" alt="" loading="lazy"></p>
<p><img src="https://cdn.JsDelivr.net/gh/GATING/blog_imgs//2020-01-17/postman07.jpg" alt="" loading="lazy"></p>
<p>2.使用headers</p>
<p><img src="https://cdn.JsDelivr.net/gh/GATING/blog_imgs//2020-01-17/postman08.jpg" alt="" loading="lazy"></p>
<p>好了，到这里，基础的使用已经回了，当然，这不是<code>Postman</code>的全部功能，它还可以做单元测试、回归测试、自动化测试等等，这就需要你们自己去体验一番了。。。</p>
<blockquote>
<p>ps: <code>Postman</code>还有个兄弟款Postwoman，开源免费，也很不错</p>
</blockquote>
<h1 id="前端开发小提示">前端开发小提示</h1>
<h2 id="使用map代替ifelse">使用Map代替if/else</h2>
<p>开发的时候，经常会用到判断，然后根据判断返回不同的值或方法,这里以微信开发为例,微信接受用户消息时会有 <code>image</code>、<code>text</code>、<code>voice</code>等等EventKey,这时候我们就需要根据这几个Key写不同的方法：</p>
<pre><code class="language-js">function handleEvent(key){
    if(key === 'image'){
      // 处理用户发送图片的方法
    }else if(key === 'text'){
      // 处理用户发送文本的方法
    }else if(key === 'voice'){
      // 处理用户发送声音
    }else{
      // 处理其他事件
    }
    // ...
}
</code></pre>
<p>我们观察上面代码，随着我们业务的增加，可能会获取用户的地理位置、扫码什么的，这个if/else就会越来越多，代码就会变得越来臃肿，可读性也越来越差。。。接下来我们就通过Map来优化下我们的代码</p>
<pre><code class="language-js">const map = {
    `image`:message =&gt;{
      // 处理用户发送图片的方法
    },
    `text`:message =&gt;{
      // 处理用户发送文本的方法
    },
    `voice`:message =&gt;{
      // 处理用户发送声音
    },
    `default`:{
      // 处理其他事件
    }
}
function handleEvent(key){
    key = map.hasOwnProperty(key) ? key : 'default'
    return map
}
</code></pre>
<blockquote>
<p>ps: 推荐观看 JavaScript 复杂判断的更优雅写法</p>
</blockquote>
<h2 id="性能测试">性能测试</h2>
<p><code>Chrome DevTools</code>（控制台），我想各位前端小伙伴应该不陌生吧，经常用它来调试页面，<code>element</code>、<code>console</code>和<code>network</code>都是要天天打交道的，不过你可知道他还有个可以测试当前页面性能的面板?没错，他就是 <code>Audits</code> 面板。。。</p>
<p>chrome 60之后，他引入了Google自家开源的一个项目：<code>LightHouse</code>。</p>
<blockquote>
<p>LightHouse 是Google开源的一个自动化测试工具，之前是以 chrome 插件 和 命令行cli的方式使用，现在可以直接通过开发者面板使用了，所以不推荐在单独安装插件或者cli工具。。。</p>
</blockquote>
<p>这里以测试百度为例：</p>
<p>1.首先打开百度,然后打开控制面板，点击右边的双箭头</p>
<p><img src="https://cdn.JsDelivr.net/gh/GATING/blog_imgs//2020-01-17/Audits01.jpg" alt="Chrome DevTools控制台" loading="lazy"></p>
<p>2.选中 <code>Audits</code> 面板</p>
<p><img src="https://cdn.JsDelivr.net/gh/GATING/blog_imgs//2020-01-17/Audits02.jpg" alt="Audits面板" loading="lazy"></p>
<p>3.选择桌面设备（就是测试pc版），然后点击<code>run audits</code>，之后就会根据这几项指标生产一份报告，如下图</p>
<p><img src="https://cdn.JsDelivr.net/gh/GATING/blog_imgs//2020-01-17/Audits03.jpg" alt="测试" loading="lazy"></p>
<p>4.通过点击右侧菜单可以保存整个测试报告</p>
<p><img src="https://cdn.JsDelivr.net/gh/GATING/blog_imgs//2020-01-17/Audits04.jpg" alt="保存" loading="lazy"></p>
<blockquote>
<ul>
<li>同时也有个中文版的线上版本 https://developers.google.com/speed/pagespeed/insights/</li>
<li>移动端兼容性测试：https://search.google.com/test/mobile-friendly</li>
<li>结构化网页数据：https://search.google.com/structured-data/testing-tool/#</li>
<li>(貌似都需要魔法上网才可以访问...)</li>
</ul>
</blockquote>
<h1 id="总结">总结</h1>
<p>至此，本次搭建也已经全部结束了，希望你能从文中收所获，也能搭建属于自己适合自己的开发环境</p>
<p>最后，感谢各位观众老爷观看啦O(∩_∩)O</p><br><br>
来源：https://www.cnblogs.com/gating/p/12488433.html

查看完整版本: 从零搭建Window前端开发环境