vite构建vue项目目录简介

1.项目目录介绍

• public 下面的不会被编译 可以存放静态资源
• assets 下面可以存放可编译的静态资源
• components 下面用来存放我们的组件
• App.vue 是全局组件
• main ts 全局的ts文件
• vite-env.d.ts存放vite声明文件，由于typescript不认识.vue文件，此文件帮助做了一个声明
• index.html 非常重要的入口文件 （webpack，rollup 他们的入口文件都是enrty input 是一个js文件 而Vite 的入口文件是一个html文件，他刚开始不会编译这些js文件 只有当你用到的时候 如script src=“xxxxx.js” 会发起一个请求被vite拦截这时候才会解析js文件）
• tsconfig.json为ts配置文件
• vite.config.ts为vite配置文件，vite基于esbuild编译，打包是基于rollup.js进行打包的

2.开发插件安装

在进行vue3开发时，在插件搜索框中输入volar，安装Vue Language Features (Volar)和TypeScript Vue Plugin (Volar)两个插件，如果之间vscode中进行过vue2项目的开发，可能会装过vetur这个插件，在进行vue3开发时建议将此插件进行禁用。

3.vue组件中的语法规范(SFC 语法规范)

*.vue 件都由三种类型的顶层语法块所组成：