vue新手环境安装基础配置、vscode环境的配置

本文链接：https://blog.csdn.net/qq_42266115/article/details/127590536

电脑换了，需要重新配置下工作的环境，在此做个记录（也是因为百度出来的安装教程全是N年前的，还要自己去修改path，那还不如趁此机会记录下）

1、node

官网下载node，下载后，双击，一路next(当然软件安装位置选择下，不要安装在c盘)
在cmd中输入node -v，出现版本号为成功

2、git

官网下载git，跟装node一样，一路next
在桌面右键出现git菜单为成功

3、淘宝镜像

cmd中输入 npm install -g cnpm --registry=https://registry.npmmirror.com
这个可要可不要，不是必须，只是想下载的时候快点。配置后就能用cnpm来下载插件啥的，比较快

4、vue前期配置

在cmd中输入npm install -g @vue/cli
现在百度推荐的教程一堆下载这下载那的，咱就是说看官方文档好吗。改革开放都多少年了，还用那古老的配置流程！
检查cli是否配置完成就在cmd中输vue --version，有输入版本号就ok了

5、新建vue项目

新建个vue项目试试，进入项目文件，输入vue create XX回车
这边我选择自己配置，我选了vue3，hash路由模式，less，配置数据在package.json中，不额外产生配置文件

6、vscode配置

官网下载软件，一路next安装（注意要在桌面创建快捷方式）。
打开后软件是英文版，去插件那下载中文，重启后软件就是中文的了

在这里插入图片描述

插件的话我下载了这些，可以看看这篇文章，里面有列举其他常用插件
非重要提示哈，c盘很大的人不需要关注，插件下载默认是放在c盘的，所以可以优化的点就是下载插件放的目录放到其他地方，引流下，参考我的这篇文章
打开vsode配置，直接复制我原来的配置(用习惯了)

在这里插入图片描述
我的配置是（仅作参考哈哈哈）:

{
  "[javascript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  "[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
  },
  "[json]": {
    "editor.defaultFormatter": "HookyQR.beautify"
  },
  "editor.fontFamily": "Source Code Variable,Consolas, 'Courier New', monospace",
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  "workbench.startupEditor": "newUntitledFile",
  "eslint.validate": [],
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "files.associations": {
    "*.vue": "vue"
  },
  "security.workspace.trust.untrustedFiles": "open",
  "javascript.updateImportsOnFileMove.enabled": "always",
  "editor.fontSize": 16,
  "vetur.validation.template": false,
  "editor.tabSize": 2,
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "auto"
    },
    "prettyhtml": {
      "printWidth": 200,
      "wrapAttributes": false,
      "sortAttributes": false
    },
    "prettier": {
      "semi": true,
      "singleQuote": true
    }
  },
  "search.followSymlinks": false,
  "git.autorefresh": true,
  "explorer.confirmDelete": false,
  "workbench.sideBar.location": "left",
  "editor.largeFileOptimizations": false,
  "editor.wordWrap": "bounded",
  "editor.wordWrapColumn": 180,
  "workbench.colorTheme": "One Dark Pro",
  "diffEditor.wordWrap": "on",
  "editor.suggestSelection": "first",
  "[less]": {
    "editor.defaultFormatter": "Wscats.eno"
  },
  "[css]": {
    "editor.defaultFormatter": "HookyQR.beautify"
  },
  "previewServer.port": 8081,
  "references.preferredLocation": "view",
  "[javascriptreact]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "emmet.triggerExpansionOnTab": true,
  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
  },
  "workbench.iconTheme": "vscode-icons",
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.defaultFormatter": "HookyQR.beautify"
  },
  "javascript.format.semicolons": "insert",//加上分号
  "terminal.integrated.enableMultiLinePasteWarning": false,
  "javascript.validate.enable":false,//vue3部分语法检测成ts语法
}