今天搞一下vue3环境，用这玩意看看好使不，工欲善其事、必先利其器。vue2早期的语法看起来真实够呛，嵌套比较深。以前看过一个妹子写的react代码，发现里面很多js在控制样式和html,三个东西揉在一块也是厉害了。不知道是不是react本身的风格。vue3本身风格要接近原生js了，提倡组合式API,但是还是有些距离。从语法使用上来说还是早期原生js风格统一，没有各种套路，都是拿来就用，纯组合。这组件方开发感觉看起来不直白，一个页面里面很多自定义组件，不看源码不知道时啥玩意。比如<MyComp/>这时啥玩意？你可能说这是自定义组件。那<scroll-nav>呢？你可能会说中间有-的是自定义的（这里就有两种写法了），那再来一个<nav>呢？这个是自定义标签还是原生html标签看容易造成困扰。thymleaf在这个方面做得比较好，使用的标准的或者或尽量靠近html的语法。个人认为除非很小的代码片段可以内联在一起，不然css、html、js不宜混在一起，如果自定义组件遵从html语法风格，或者从语法上完全符合html语法规范，看起来应该会爽很多，如果vue的文件可以直接用.html做后缀，符合html规则，那应该会很清晰，当然这只是我个人的一个看法。这个后面在和react对比看看。
1 nodejs安装
从官网下载需要windows版本的node-v24.11.1-x64.msi 安装包。一路点击安装即可。如果要自定义安装路径，则在安装界面中指定路径即可。
2 设置npm安装包路径
设置全局包路径
npm config set prefix "G:\programdata\nodejs\lib"
设置下载缓存路径
npm config set cache "G:\programdata\nodejs\cache"
这样做的目的是防止C盘默认用户目录下满。但是有很多安装软件的缓存和包下载地址都喜欢下载到用户目录下，所以创建一个新用户到其他比较大盘是一个很有远见的决定，以后就不怕用户目录堆满，影响系统运行。
3 配置镜像
设置好阿里镜像源 : npm config set registry https://registry.npmmirror.com
这个不是必须的，只是为了加快下载速度。
4 npm其他常用命令
查看配置和信息
npm config list
查看所有默认配置的详细信息
npm config ls -l
查看某个特定配置项的值
npm config get <key>
查看帮助
npm help install
查看全局安装包
npm list -g --depth=0
查看安装路径
npm root -g
查看项目根路径
npm list --depth=0
查看包信息
npm info <package-name>
查找特定包
npm list [packageName]
检查过时的包
npm outdated
5 安装vue客户端
安装命令：npm install -g @vue/cli
6 创建项目
执行命令：npm create vue@latest my-vue-app1，会出现如下面的界面
默认选这三个就可以。后满两个需要用的话可以通过IDE安装，后面这个两个工具要是直接用命令来检查，看输出，然后修改。我真不知道用起来时候啥体验。即使后面用到ESLint和Prettier，建议ESLint不要配置成自动修复，可能会修复出维问题来，或者不小心搞到别人代码。Prettier也是类似问题，可能一下格式化到不该格式化的带代码，特别是老项目。TypeScript可以使用，也可以不使用，有聊胜于无，但是确定要使用的话你就必须全盘了解他的规范.举个简单的例子就是js文件后缀都要是ts，这里我就不选了。js一出生就是弱类型语言，支持面向对象。类型声明，搞得有点不论不类的。python现在也是搞得有点不论不类的。语言一旦用广了，规模大了，强类型和面向对象就显得更有优势。弱类型语言到了后面没有办法，各种模仿，创造，美其名为简洁灵活，反正我就是记不住他们的简洁灵活。这让我想起当年scala，野心勃勃感觉要把java替换掉了，能和java能互调用，无缝集成 ，信了你就倒霉了。两种风格的东西搞在一起真实不伦不类。学了两遍scala，现在一点都记不住他那强大灵活的语法，估计不是经常用吧。
这后面一路按回车，其他的一样都不要选，保持项目干净，尽量保持用到啥就安装啥。
然后执行命令 npm install 安装项目本地依赖
7 安装VSCode
独立前端我建议用这个，当然IDEA也可以。如果是全栈开发，就建议用IDEA，Eclipse。
VSCode 去官网下载安装，是开源免费的软件。
8 导入项目
启动VSCode，然后在左上角File-->Open Folder 找到刚才创建的文件夹my-vue-app1打开即可
下面有个vue插件支持，点击install即可。旁边有个Coplit机器人，有钱的可以买个账号玩玩，在公司的最好不要玩这个东西，免得泄露信息，要合规。
9 关键配置说明
package.json sctipt下面的dev就是开发环境下运行服务的命令
10 运行服务与验证
在VSCode最上面一排的工具栏Terminal-->new terminal打开一个新终端，运行npm run dev 服务就起来了，你可以在浏览器熵输入地址 http://localhost:5173/ 就可以看到欢迎页面了。到此为止，整个开发环境就搞起来了。
11 配置模板快捷方式
1 点击配置按钮
左下角齿轮
图标->选择snippets
2 创建配置文件
初次的时候是没有配置文件的，创建的文件有全局模式和项目本地模式，建议配置文件为全局模式。选择全局模式后，再输入框输入vue，按下回车，就会创建一个名为vue.code-snippets配置文件
3 编写配置
这个配置是有 相关规范的，可以去网上查看使用说明，prefix前缀的作用就是在vue文件中输入vue前缀时会出现提示选择模板代码
{
"Vue3 template": {
// "scope": "javascript,typescript",
"prefix": "vue3",
"body": [
"<!-- note: -->",
"<!-- Author: 隔壁老王 -->",
"<!-- Created: ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE} -->",
"",
"<script setup>",
"$1",
"</script>",
"",
"<template>",
"$2",
"</template>",
"",
"<style scoped>",
"$3",
"</style>"
],
"description": "Vue3 template with script setup and scoped style"
}
}4 使用
在vue文件中输入vue3 就会出现模板选项，效果如下图，比较方便
12 禁止更新设置
一般可以设置禁用更新，设置按钮-settings 然后输入update mode 设置成none
