VS-Code中Vue3项目创建vite方式

准备

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:整个工程的配置文件，里面可以安装插件配置代理之类的

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

最新评论