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

文章目录 写在前面1、创建vue3项目npm create vue@latestnpm i 2、项目结构.vscodevue3结构a、项目树结构b、package.jsonc、tsconfig.jsond、index.htmld、srce、main.tsf、App.vue

写在前面

开前请自行下载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”文件里面就是后续我们开发的主要内容 主要包含了三大块