安装vscode，并新建Vue项目

本人小白一个，记录一下安装vscode并创建Vue项目的过程

安装vscode

1.首先打开vscode官网,下载地址：https://code.visualstudio.com/下载合适自己电脑的vscode可执行文件，在电脑上安装执行即可

2.按住Ctrl+shift+p在vscode软件就会出现一个搜索框，搜索configure display language进行设置

搜索框中会弹出zh-cn的选项，选择这个即可

如果上面没有这个选择可以在扩展中搜索Chinese language 进行安装

3.安装合适的插件（我安装的是vuter eslint Prettier）并在setting.json中进行配置（这一步可选，也可以不用配置）

我的setting.json的配置信息（这个是我在网上找到的可以根据自己的需要配置）

{
  "files.autoGuessEncoding": true,
  "files.autoSave": "afterDelay", //自动保存
  "editor.lineNumbers": "on", //打开行号
  "editor.quickSuggestions": {
    //开启自动显示建议
    "other": true,
    "comments": true,
    "strings": true
  },
  "editor.tabSize": 2, //制表符符号eslint
  "editor.formatOnSave": true, //保存时自动格式化


  "prettier.eslintIntegration": true, //让prettier使用eslint的代码格式进行校验
  "prettier.semi": false, //去掉代码结尾的分号
  "prettier.singleQuote": true, //使用带引号替代双引号
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true, //让函数(名)和后面的括号之间加个空格
  "vetur.format.defaultFormatter.html": "js-beautify-html", //格式化.vue中html
  "vetur.format.defaultFormatter.js": "vscode-typescript", //让vue中的js按编辑器自带的ts格式进行格式化
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "force-aligned" //属性强制折行对齐
    }
  },
 
  "emmet.triggerExpansionOnTab": true,
  "files.associations": {
    //要进行html补全的文件
    "vue-html": "html",
    "vue": "html",
    "*.js": "html",
    "*.vue": "html"
  },
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "vetur.grammar.customBlocks": {

    "docs": "md",
    "i18n": "json"
  }
}

安装node.js

下载地址：https://nodejs.org/en/download/下载运行文件并安装。
安装完成后使用cmd测试是否安装成功（下图表示成功）

创建vue项目

1.打开终端（快捷键Ctrl+~）
2.全局安装vue-cli，vue-cli可以帮助我们快速构建Vue项目

npm install -g vue-cli

3.安装webpack，它是打包js的工具

npm install -g webpack

4.安装完成之后就可以开始创建vue项目

vue init webpack firstedtestvue

运行后按照提示输入名称然后其他回车默认 在install vue-router时选择yes 下面几个选择no 然后回车等待下载完成

出现这样的提示表示下载完成

按照提示步骤运行程序

出现下图表示程序运行成功

按照提示访问http://localhost:8080/出现截图页面表示启动完成