Vue 3 创建项目（图文讲解）

更新时间 2023-11-28 20:20:24

前言

大家好，我是小哈~

上小节中，我们已经搭建好了 Vue 3 的开发环境。本文我将带着大家创建第一个 Vue 3 项目。

创建第一个 Vue 项目

首先，在 E 盘下创建一个 vue-workspace 工作空间文件夹，用于统一存放 Vue 项目，然后打开命令行，执行如下命令，进入到该文件夹中：

cd E:\vue_workspace\

接着，执行创建 Vue 项目命令：

npm create vue@latest

TIP: 该命令会安装并执行 create-vue, 它是 Vue 官方的项目脚手架工具。

创建第一个 Vue 项目

执行过程中，会让你先输入项目名称，以及相关选项是否开启，诸如是否使用 TypeScript 语法、是否引入 Vue Router 路由、是否引入 Pinia 状态管理等等，这里如果不确定，统一敲击回车键选择 No 即可。当你看到命令行中提示项目构建完成，则表示你已经创建好了第一个 Vue 应用了。

项目目录说明

创建好了第一个 Vue 应用后，进入该项目文件夹，看下目录结构：

Vue 3 应用目录结构

解释一下目录结构以及相关文件的作用：

node_modules : 项目依赖包文件夹，比如通过 npm install 包名 安装的包都会放在这个目录下；
public : 公共资源目录，用于存放公共资源，如 favicon.ico 图标等；
index.html : 首页；
package.json : 项目描述以及依赖；
package-lock.json : 版本管理使用的文件；
README.md : 用于项目描述的 markdown 文档；
src : 核心文件目录，源码都放在这里面；

进入 src 文件夹，目录如下：

src 目录

assets : 静态资源目录，用于存放样式、图片、字体等；
components: 组件文件夹，通用的组件存放目录；
App.vue: 主组件，也是页面的入口文件，所有页面都是在 App.vue 下进行路由切换的；
main.js : 入口 Javascript 文件；