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.jso