Vue3开发环境配置

# 前言

• 记录 Vue3 + Vite + Ts + Pinia 相关开发环境配置，方便日后查找

# 安装 NVM

• NVM 全称 node.js version management，专门针对 node 版本进行管理的工具，通过它可以安装和切换不同版本的 node.js

• 下载安装 Nvm：https://github.com/coreybutler/nvm-windows/releases

• 修改 Nvm 安装目录下的 settings.txt ，添加淘宝镜像配置 node_mirror 和 npm_mirror

root: D:\DevelopmentTool\NVM

path: D:\DevelopmentTool\NVM\nodejs

node_mirror: https://npmmirror.com/mirrors/node/

npm_mirror: https://npmmirror.com/mirrors/npm/

• 在 NVM 安装目录下创建两个文件夹，npm 全局包安装目录 node_global ，npm 缓存目录 node_cache ，使用 Cmd 配置文件夹路径

npm config set prefix "D:\DevelopmentTool\NVM\node_global"

npm config set cache "D:\DevelopmentTool\NVM\node_cache"

• 配置 Nvm 环境变量， NVM_HOME 是 Nvm 安装目录， NVM_SYMLINK 是 Nvm 安装时选择的 Nodejs 目录， NODE_GLOBAL 是上面创建的目录

• 安装并切换 Nodejs 版本

nvm -v                  //查看NVM版本

nvm list available      //查看可安装的Nodejs版本

nvm list                //查看已安装的Nodejs版本

nvm install 22.11.0     //指定安装一个Nodejs的LST最新稳定版，NVM安装目录下会生成对应版本的文件夹

nvm use 22.11.0         //切换到安装好的Nodejs

node -v                 //查询当前的nodejs版本

• 配置和查看 Npm 淘宝镜像

npm config set registry https://registry.npmmirror.com

npm config get registry

# Vite 构建

• 使用 cmd 执行以下命令，cmd 所在路径下会生成对应的项目文件夹，然后用 vscode 打开

npm init vite@latest

• Project name 输入项目名

• Select a framework 选择 Vue

• Select a variant 选择 TypeScript

• vscode 打开上面创建的项目文件夹，然后打开 Terminal，安装一下 package.json 中的项目依赖

npm install

npm run dev         //启动开发环境

npm run build       //构建打包命令

npm run preview     //预览生产环境命令

# 安装 VSCode 插件

# 安装 Vue-Official

• vscode 扩展中搜索插件 Vue - Official 并安装，原名叫 Volar

# 为 Vue - Official 设置代码缩进

• 打开 Vue - Official 设置，往下拉找到配置项 Script: Initial Indent 勾选上就行

• 按下 Ctrl + K + F 后选择 Formater 为 Vue - Official 可以看到 ts 代码会缩进两个空格了

# 自定义代码模板

• 打开 设置 --> 代码片段 --> 搜索 vue.json 没有的话就新建一个

• prefix 是插入这套模板的前缀，在 vscode 中输入这个 prefix 后按下回车就能把 body 的内容快速插入到编辑器中

• $0 是插入模板后光标的初始位置

{

	"Print to console": {

		"prefix": "vue3",

		"body": [

			"<style scoped>",

			"",

			"</style>",

			"",

			"<template>",

			"",

			"</template>",

			"",

			"<script lang=\"ts\" setup>",

			"  import {ref,reactive} from 'vue';",

			"  $0",

			"</script>"

		],

		"description": "vue3+ts+setup模板"

	}

}

# 参考链接

• https://blog.csdn.net/sjp991012/article/details/134426007

• https://blog.csdn.net/qq1195566313/article/details/125027972

• https://www.jb51.net/article/278151.htm