VS-Code中Vue3项目创建vite方式
作者：玉米蛋挞
用户详细说明了使用Node.js和Vite创建Vue3项目的过程,包括安装依赖、项目结构解析（如src/main.ts、App.vue、components、assets等）,以及VSCode插件配置建议,强调核心插件安装和依赖管理的重要性
准备
node.js下载才可以使用npm命令 => 脚手架安装
vite项目创建步骤
让项目比较好找，所以我就创建在桌面了，右击桌面=> 选择在终端打开
输入命令
npm create vue@latest
有一个install的话直接y就行，然后根据自己选择创建
这样就是成功了
从桌面vue3项目点进去，解释项目文件
.vscode里面有extension.json里面装着插件，推荐Vue - Official但是我发现我的code版本不兼容，按需求选择
- Vue - Official（官方核心支持，必装）
- Prettier（代码格式化，必装）
- Auto Close Tag + Auto Rename Tag（标签处理，必装）
- Live Server（实时预览，必装）
- Chinese Language Pack（中文界面，国内开发者必装）
- vscode-icons（文件图标，推荐）
- Path Autocomplete（路径补全，推荐）
- HTML CSS Support（HTML/CSS 增强，推荐）
- Vue 3 Snippets + Vue TypeScript Snippets（Vue 3/TS 开发，推荐）
- Fitten Code（AI 辅助，可选，按需安装）
public：就是脚手架的根目录里面放了一个页签图标
src：源代码文件
- main.ts引入创建应用和引入组件；创建一个App组件并将App组件挂载到id为app的容器上面
- App.vue 这是 Vue 应用的根组件，所有其他组件都将被嵌套在这个组件中
- components 此文件夹用来存放可复用的 Vue 组件。这些组件能够在不同页面或者其他组件里使用
assets此文件夹用于存放静态资源，像图片、字体、样式文件等
其他：
- >.gitignore:git的忽略文件
- >env.d.ts目的是为了让ts认识.jpg和.txt文件(点进去发现飘红，在VScode终端输入npm i 安装所有依赖 目录就会出现依赖包node_modules)
- >index.html 入口文件把src里面main.ts引入了；还有一个id为app的div标签
- >后面的package就是包的依赖声明文件之类的
- >tsconfig那个就是ts的配置文件
- >vite.config.ts:整个工程的配置文件，里面可以安装插件配置代理之类的
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。