3、vue_配置开发环境安装开发工具

一、安装Node.js
1、下载地址：https://nodejs.org/zh-cn/ ，win10可直接下载最新稳定版，如v16.17.1；注意：server 2008R2服务器上只能安装v13及以下Node.js版本，可以网站以往的版本中下载相应版本的msi文件进行安装。
2、node.js集成npm，npm不需要单独安装
3、安装好后cmd命令检测是否成功：

• node -v --查看node版本 ；
• npm -v --查看npm版本

4、如果有警告：npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.

       打开node.js安装目录，用记事本打开npm.cmd文件，将文件里的 prefix -g 改为 prefix --location=global

二、安装VS Code
1、下载官网：code.visualstudio.com/，注意有User Installer和System Installer版本，下载System Installer（系统安装）版本；如果下载较慢，将下载网址中的 az764295.vo.msecnd.net 更换为 vscode.cdn.azure.cn ，使用国内的镜像服务器加速。
2、安装过程中勾选：将"通过 Code 打开"操作添加到 windows 资源管理器文件上下文菜单、将"通过 Code 打开"操作添加到 windows 资源管理器目录上下文菜单，其他默认下一步。
3、安装插件：VS Code有非常多的插件，代码补全，格式修正，颜色高亮，版本控制等。点击「扩展」添加

• 1、Chinese (Simplifi-----------ed) (简体中文) Language Pack for Visual Studio Code，适用于 VS Code 的中文（简体）语言包
• 2、Volar，随着 Vue3 正式版发布，官方推荐 Volar 插件来代替 Vetur 插件，不仅支持 Vue3 语言高亮、语法检测，还支持 TypeScript 和基于 vue-tsc 的类型检查功能
• 3、Prettier - Code formatter，Prettier Formatter for Visual Studio Code。配置如下：ctrl+, ，搜索save，勾选Editor：Format On Save，保存时格式化文件。右键“使用…格式化文档”，选择为默认程序。ps，在实际项目中配置.prettierrc.js文件，在根目录下创建.prettierrc文件，内容如下：

{
  "semi": false,          //分号检查，不使用分号
  "singleQuote": true,    //使用单引号
  "trailingComma": "none"  //是否使用尾逗号
}

 4、解决vscode禁止运行脚本

以管理员身份运行PowerShell，运行：set-ExecutionPolicy RemoteSigned （签名或运行这些脚本）

三、VSCode添加vue3.2setup语法糖代码模板，用户片段，代码片段

1.打开用户片段
文件->首选项->用户片段->搜索vue
2.进入vue.json
点击进入vue.json(vue)
3.修改vue.json

{
    "vue3模板": {
      "prefix": "vue",
      "description": "vue3.2模板",
      "body": [
        "${BLOCK_COMMENT_START}",
        " * ${1:new page}",
        " * @author: ${2:zhou}",
        " * @since: ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE}",
        " * ${TM_FILENAME}",
        "${BLOCK_COMMENT_END}",
        "<template>",
        "  <div class=\"container\"></div>",
        "</template>",
        "",
        "<script setup></script>",
        "",
        "<style lang=\"scss\" scoped></style>",
        ""
      ]
    }
}

4.测试
至此，已经完成了模板添加。打开一个刚创建的vue文件，输入vue，系统自动提示刚才创建的模板，直接Tab键或回车，完成。