【全栈】SprintBoot+vue3迷你商城-扩展：vue3项目创建及目录介绍

【全栈】SprintBoot+vue3迷你商城-扩展：vue3项目创建及目录介绍

往期的文章都在这里啦，大家有兴趣可以看一下
【全栈】SprintBoot+vue3迷你商城（1）
【全栈】SprintBoot+vue3迷你商城（2）
【全栈】SprintBoot+vue3迷你商城-扩展：利用python爬虫爬取商品数据
【全栈】SprintBoot+vue3迷你商城（3）
【全栈】SprintBoot+vue3迷你商城（4）
【全栈】SprintBoot+vue3迷你商城（5）
【全栈】SprintBoot+vue3迷你商城（6）
【全栈】SprintBoot+vue3迷你商城-扩展：vue的基本用法

1.创建vue3项目

在熟悉目录之前首先需要创建项目

1.1. npm init vue@latest

使用 npm init vue@latest 命令来简化项目初始化过程：

npm init vue@latest

在创建过程中，你会被提示选择一些预设或手动配置项目选项。

1.2. 进入项目根目录

cd my-vue3-app

1.3.安装相应依赖

npm install

1.3. 启动开发服务器

npm run dev

2.目录结构

在进行前端开发之前，还需要熟悉vue3项目的目录及结构及功能
下面是本次迷你商城前端开发的目录结构：

my-vue-app/
├── node_modules/                # 项目依赖的第三方库
├── public/                      # 静态资源文件夹
│   ├── favicon.ico              # 网站图标
│   └── index.html               # 主页面模板
├── src/                         # 源代码文件夹
│   ├── assets/                  # 静态资源（如图片、样式表等）
│   ├── components/              # 可复用的Vue组件
│   ├── router/                  # 路由配置
│   │   └── index.js             # Vue Router 实例化文件
│   ├── stores/                   # Vuex状态管理仓库
│   │   └── index.js             # Vuex Store 实例化文件
│   ├── views/                   # 页面级别的组件（视图）
│   ├── App.vue                  # 根组件
│   ├── main.js 				 # 应用入口文件，创建 Vue 实例	
|	├── api/					 # 存放与后端接口交互的函数
│   └── utils/					 # 存放一些工具函数，如request.js
├── .gitignore                   # Git 忽略规则
├── index.html					 # 应用程序的入口点
├── package.json                 # 项目包信息及脚本命令
├── README.md                    # 项目说明文档
└── vue.config.js                # Vue CLI 的配置文件（可选）

3.目录和文件的具体解释

node_modules/

存放所有通过 npm 或 yarn 安装的第三方库和依赖项。

public/

放置不经过构建过程直接被复制到输出目录的静态资源文件。通常包括 index.html 和其他公共资产（例如 favicon.ico）。

src/

这是应用程序的主要源代码所在位置。

• assets/：包含非 JavaScript 文件，如图片、字体或样式表。
• components/：存放可以跨页面使用的通用组件。
• router/：用于定义应用中的路由逻辑，特别是当使用 Vue Router 时。
• stores/：如果你的应用使用 Vuex 进行状态管理，那么这里会包含 Vuex store 的配置。
• views/：页面级别的组件通常放在这个目录下，它们代表了不同的“页面”。
• App.vue：根组件，它是所有其他组件的容器。
• main.js：应用的入口文件，在这里初始化 Vue 实例，并引入必要的插件和服务。
• api/：存放与后端接口如登录、注册等交互的函数，使得前端能够访问后端接口
• utils/：存放各种实用工具函数和辅助功能，如request.js来制定统一请求入口以及请求、响应拦截器。

其他重要文件

• .gitignore：列出哪些文件和目录不应提交到 Git 版本控制系统中。
• index.html： 整个应用程序的入口点，当浏览器加载应用时，它首先会请求并解析这个 HTML 文件。
• package.json：描述项目的元数据以及包含安装和运行项目的脚本命令。
• README.md：项目的说明文档，通常包括项目简介、安装指南等信息。
• vue.config.js：Vue CLI 的自定义配置文件，允许你覆盖默认的行为（例如修改输出路径、代理设置等）。这是一个可选文件，只有在需要时才创建。