web前端开发环境搭建

web前端开发 之 Windows下安装前端环境

一、谷歌浏览器

1- 下载谷歌浏览器
2- 谷歌浏览器的地址输入栏里如果想输入内容都可以搜索的话，得进行设置。
3- vue-t—o–o----l
4- 谷歌zhu-sou
链接：https://pan.baidu.com/s/1ATmxrZ8JDvCbstNIj0PeRQ
提取码：1931

二、node

1- 在官网下载node，下载完成后node -v 和 npm -v，看有没有版本信息，有的话就成功了。

三、cnpm

1-在命令行中输入
npm install -g cnpm --registry=http://registry.npm.taobao.org

cnpm -v 查看是否成功 以下情况就是成功了

四、git

五、webpack

npm install webpack -g

六、vscode

1- 安装的扩展插件

2- settings.json配置文件（比较简单的版本）

{
    "workbench.iconTheme": "vscode-icons",
    // "files.autoSave": "afterDelay",
    "liveServer.settings.CustomBrowser": "chrome",
    "editor.formatOnSave": true,
    "html.format.indentInnerHtml": true,
    "html.format.indentHandlebars": true,
    "eslint.format.enable": true,
    "prettier.requirePragma": true,
    "[vue]": {
        "editor.defaultFormatter": "octref.vetur"
    },
    //分号
    "prettier.semi": false,
    //单引号包裹字符串
    "prettier.singleQuote": true,
    //html格式化依赖  默认为none
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    //函数前加空格
    // "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
    //没有下边这个 上边不生效
    "vetur.format.defaultFormatter.js": "vscode-typescript",
    "open-in-browser.default": "Chrome",
    "explorer.confirmDelete": false,
    "window.zoomLevel": -1,
    // 以下是5-6号看完小滴课堂后添加的内容
    "eslint.autoFixOnSave": true,
    // 写闭合标签
    "emmet.includeLanguages": {
        "javascript": "javascriptreact"
    }
    // 添加 vue ⽀持
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "vue",
            "autoFix": true
        }
    ],
}

3- 设置vscode默认打开浏览器为谷歌设置
输入框里面应该直接输入 Chrome , 别写 {“open-in-browser.default”:“Chrome”}

七、Postman

八、网易有道词典

黑窗口里面的英文无法复制，网易可以帮助搜索。