Vite+Vue快速搭建项目

Vite+Vue快速搭建项目 # 

npm init vite@latest

输入项目名，选择Vue  选择TypeScript  回车

> npx
> create-vite

│
◇  Project name:
│  ApmDataAnalytics
│
◇  Package name:
│  apmdataanalytics
│
◇  Select a framework:
│  Vue
│
◇  Select a variant:
│  TypeScript
│
◇  Use rolldown-vite (Experimental)?:
│  No
│
◇  Install with npm and start now?
│  Yes

再运行

npm install

-y 快速创建一个默认的包信息

npm init -y

-D开发环境中的依赖，加载vite

npm i vite -D

生成"devDependencies"，开发环境下的依赖

从工作区index.html为入口

项目入口文件 #

主入口： index.html

  • 这是整个项目的 HTML 入口文件

  • 包含一个

    容器，Vue 应用会挂载到这里

  • 通过 引入 TypeScript 主文件 JavaScript 入口： src/main.ts

  • 这是项目的 JavaScript/TypeScript 入口文件

  • 负责创建 Vue 应用实例、注册插件、挂载到 DOM

核心文件说明 配置文件 #

  • package.json : 项目依赖和脚本配置
  • vite.config.ts : Vite 构建工具配置
  • tsconfig.json : TypeScript 编译配置
  • .eslintrc.cjs : 代码规范检查配置 源码目录 ( src/ )
src/
├── App.vue              # 根组件
├── main.ts              # 项目入口文件
├── config.ts            # 配置文件（API地址
等）
├── style.css            # 全局样式
├── components/          # 组件目录
│   ├── ReportInfoPage.vue    # 报告信息页
面组件
│   ├── ComponentsSwitch.vue  # 组件切换器
│   └── common/               # 通用组件
└── tools/               # 工具类目录
    ├── interface.ts     # TypeScript 接口
    定义
    ├── store.ts         # 全局状态管理
    ├── page.ts          # 分页逻辑
    ├── process.ts       # 数据处理函数
    └── tools.ts         # 工具函数

文件加载机制 # 

1. 浏览器加载 index.html
2. index.html 引入 src/main.ts
3. main.ts 创建 Vue 应用实例
4. 挂载 App.vue 根组件到 #app 容器
5. App.vue 渲染其他子组件

Vue 文件加载 #

  • .vue 文件是 Vue 单文件组件（SFC）
  • 包含