VUE3+TS+element-plus项目从0开始入门 - 创建项目、认识基本结构

写在前面

开前请自行下载vs code、node.js, 在vs code里面安装Vue - Official插件。本文使用的是vue3、ts、element，windows系统。

本文是 VUE3+TS+element-plus项目从0开始入门 系列的第一章
下一章 ： VUE3+TS+element-plus项目从0开始入门 - 02

1、创建vue3项目

打开vscode，选择一个你希望项目保存的位置

再打开vs code的终端

npm create vue@latest

输入npm指令 npm create vue@latest ， 后面依次按要求输入就行
这里Vue Router、和ESLint我们都选了了否，是为了更方法的入门vue3项目，在实际的工程中一般选是。

npm i

输入npm i 安装项目依赖

注意这里要先切换到项目的根目录下
npm i 是npm install的简写

npm i 执行完成之后会多一个项目依赖目录

2、项目结构

.vscode

.vscode 里面主要放vscode的工程配置文件。

.vscode里面的内容修改之后，关闭vscode再重新打开一下才会显示效果

vue3结构

a、项目树结构

这里面主要关注src, 后续前端写的大多数内容都在里面

├─node_modules                  # 存放项目依赖
├─public
│      favicon.ico              # 网站图标，浏览器标签栏显示的小图标
└─src
    │  App.vue                  # 根组件，Vue顶级组件，其他组件通常嵌套在其中
    │  main.ts                  # 应用入口文件，初始化Vue实例并挂载到DOM上
    │  
    ├─assets
    │      base.css             # 基础样式文件，定义全局通用样式
    │      logo.svg             # 项目Logo的SVG文件，通常用于品牌展示
    │      main.css             # 主样式文件，可能包含项目的主要CSS规则
    │      
    └─components
        │  HelloWorld.vue       # 示例组件，通常用于演示或测试目的
│  .gitignore                   # Git忽略规则文件
│  env.d.ts                     # TS类型声明文件,若没有，import时会报错
│  index.html                   # 项目HTML入口，Vue会被挂载到此文件中
│  package-lock.json            # 记录npm安装的依赖版本信息，确保不同环境中依赖一致性
│  package.json                 # 项目配置文件，包含项目基本信息、依赖和脚本命令
│  README.md                    # 项目的说明文档，通常包含项目介绍、使用方法等内容
│  tsconfig.app.json            # TypeScript配置文件，专门针对应用程序代码的TS编译选项
│  tsconfig.json                # 主要的TypeScript配置文件，定义了整个项目的TS编译规则
│  tsconfig.node.json           # TypeScript配置文件，专门针对Node.js环境的代码编译选项
│  vite.config.ts               # Vite构建工具的配置文件，用于自定义构建行为

b、package.json

项目中有package-lock.json和package.json

• package-lock.json通常不需要手动编辑
  每次运行 npm install 或其他相关命令时，npm 会根据 package.json 中定义的依赖范围（如 ^1.0.0 或 ~1.0.0），解析并安装具体的依赖版本，并更新 package-lock.json 文件。

• package.json 可以手动编辑
  里面包含了项目名称、版本、证书、依赖等

package.json示例

{
  "name": "vue3-ts-element-plus-app", // 项目名称
  "version": "1.0.0",                // 版本号
  "description": "A Vue 3 + TypeScript + Element Plus project", // 项目描述
  "private": true,                   // 是否为私有项目
  "scripts": {                       // 脚本命令
    "serve": "vite",                 // 启动开发服务器
    "build": "vite build",           // 构建生产代码
    "preview": "vite preview",       // 预览构建结果
    "lint": "eslint src --ext .ts,.tsx,.js,.vue" // 代码检查
  },
  "dependencies": {                  // 运行时依赖
    "vue": "^3.4.0",                 // Vue 3 核心库
    "vue-router": "^4.2.4",          // Vue 3 路由管理
    "pinia": "^2.1.7",               // Vue 3 状态管理
    "axios": "^1.5.0",               // HTTP 请求库
    "element-plus": "^2.4.0"         // Element Plus UI 库
  },
  "devDependencies": {               // 开发时依赖
    "@vitejs/plugin-vue": "^4.3.0",  // Vite 插件支持 Vue 单文件组件
    "typescript": "^5.2.2",          // TypeScript 支持
    "vite": "^4.4.9",                // Vite 开发服务器
    "eslint": "^8.53.0",             // ESLint 检查工具
    "sass": "^1.65.1",               // CSS 预处理器（Element Plus 使用 Sass）
    "@types/node": "^20.8.0",        // Node.js 类型定义
    "@rushstack/eslint-patch": "^1.3.3" // 解决 ESLint 和 TypeScript 兼容问题
  },
  "browserslist": [                  // 目标浏览器范围
    "> 1%",                          // 全球使用量 >1% 的浏览器
    "last 2 versions",               // 最近两个版本
    "not dead"                       // 排除已停止更新的浏览器
  ],
  "type": "module"                   // 使用 ES 模块
}

c、tsconfig.json

• tsconfig.json : ts配置文件，整个项目的TS编译规则

{
  "compilerOptions": {
    "target": "ESNext",              // 目标 ECMAScript 版本
    "module": "ESNext",              // 模块系统
    "strict": true,                  // 启用所有严格类型检查选项
    "esModuleInterop": true,         // 允许与 CommonJS 模块互操作
    "skipLibCheck": true,            // 跳过对第三方库的类型检查
    "forceConsistentCasingInFileNames": true, // 强制文件名大小写一致
    "moduleResolution": "Node",      // 使用 Node.js 模块解析策略
    "resolveJsonModule": true        // 支持导入 JSON 文件
  },
  "include": ["src"],                // 包含的文件目录
  "exclude": ["node_modules"]        // 排除的文件目录
}

• tsconfig.app.json : ts配置文件, 程序代码的TS编译选项, tsconfig.json的扩展

{
  "extends": "./tsconfig.json",      // 继承主配置文件
  "compilerOptions": {
    "outDir": "./dist/client",       // 输出目录
    "rootDir": "./src",              // 根目录
    "composite": true                // 启用项目引用（Project References）
  },
  "include": ["src/**/*.ts", "src/**/*.vue"] // 包含的文件
}

• tsconfig.node.json : ts配置文件，针对Node.js环境的代码编译选项, tsconfig.json 的扩展

{
  "extends": "./tsconfig.json",      // 继承主配置文件
  "compilerOptions": {
    "outDir": "./dist/server",       // 输出目录
    "composite": true,               // 启用项目引用
    "module": "CommonJS"             // 使用 CommonJS 模块系统（适合 Node.js）
  },
  "include": ["vite.config.ts", "server/**/*.ts"] // 包含的文件
}

tsconfig.app.json 和 tsconfig.node.json 都通过 extends 继承自 tsconfig.json，从而复用全局配置。

tsconfig.json：全局配置，适用于整个项目。
tsconfig.app.json：客户端代码专用配置。
tsconfig.node.json：服务端或构建工具代码专用配置。

如果启用了 composite: true，可以通过 TypeScript 的项目引用功能实现更高效的增量编译。
例如，tsconfig.app.json 和 tsconfig.node.json 可以分别作为独立的子项目，共享 tsconfig.json 的基础配置。

d、index.html

index.html 项目入口，里面引用了index.ts。
index.ts 里面引入App.vue。

d、src

以后的主战场都在这里，
后续完整的src目录结构可能是这样的

src/
├── assets/              # 静态资源（图片、字体等）
├── components/          # 可复用的全局组件
├── views/               # 页面级组件（路由对应的页面）
├── router/              # 路由配置
├── store/               # 状态管理（如 Pinia 或 Vuex）
├── utils/               # 工具函数和公共方法
├── services/            # API 请求相关代码（如 Axios 封装）
├── styles/              # 全局样式文件
├── types/               # TypeScript 类型定义
├── App.vue              # 根组件
└── main.ts              # 应用入口文件

e、main.ts

f、App.vue

“.vue”文件里面就是后续我们开发的主要内容
主要包含了三大块