项目搭建

# vite安装脚手架工程
npm init vue@latest

# 确定要安装以下软件包吗?
Need to install the following packages:
  create-vue@latest
Ok to proceed? (y) 

# Vue.js -渐进式JavaScript框架
Vue.js - The Progressive JavaScript Framework

# 请输入你的项目名
? Project name: › vue-project

# 是否安装TypeScript?
? Add TypeScript? › No / Yes

# 是否添加对JSX语法的支持?
? Add JSX Support? › No / Yes

# 是否为单页应用程序开发安装Vue路由器?
? Add Vue Router for Single Page Application development? › No / Yes

# 是否为状态管理安装Pinia?
? Add Pinia for state management? › No / Yes

# 是否为单元测试安装Vitest?
? Add Vitest for Unit Testing? › No / Yes

# 是否安装端到端测试解决方案? 
? Add an End-to-End Testing Solution? › - Use arrow-keys. Return to submit.
❯   No
    Cypress
    Playwright
    
# 是否安装ESLint进行代码校验?
? Add ESLint for code quality? › No / Yes

# 是否安装Prettier统一代码规范?
? Add Prettier for code formatting?

# 脚手架工程已在本地安装完成，现在请执行以下命名：
Scaffolding project in /Users/suxingxing/Desktop/project/my-project...
Done. Now run:
	# 进入到项目目录下
  cd my-project
  # 安装依赖
  npm install
  # 开启代码校验
  npm run lint
  # 本地启动项目
  npm run dev

目录结构

node_modules-------------------第三方依赖
public-------------------------公共文件夹
src----------------------------项目页面目录
.eslintrc.cjs------------------配置 Eslint 代码校验规则
.gitignore---------------------配置 Git 忽略目录或文件
.prettierrc.json---------------配置代码规范，统一代码风格
env.d.ts
index.html---------------------项目挂载的 html 页面
package-lock.json--------------主要用于记录了上一次安装的依赖的版本号（为升级后不兼容，提供回退参考）
package.json-------------------该项目包必要的说明文件
README.md----------------------该项目说明文件
tsconfig.app.json
tsconfig.config.json
tsconfig.json------------------ts编译器配置文件
tsconfig.vitest.json
vite.config.ts-----------------vite配置文件