Vue 项目创建与启动全流程指南

目录

Vue 项目创建与启动全流程指南

一、准备工作

二、创建 Vue 项目

三、安装项目依赖

四、项目目录结构介绍

五、启动 Vue 项目

在前端开发中，Vue.js 是一个非常流行的框架。今天，我们就来详细学习一下 Vue 项目的创建和启动过程。

一、准备工作

在开始创建 Vue 项目之前，需要确保已经安装了 Node.js，并且对其内置的包管理器 NPM 有一定的了解。因为后续的操作都依赖于 Node.js 环境和 NPM 工具。

二、创建 Vue 项目

1. 执行创建命令
   • 打开命令行工具（如 CMD 或终端），在想要创建项目的目录下执行命令：npm init vue@latest。
   • 执行该命令时，它会自动安装当前最新版本的交叉工具create-vue。
2. 项目配置选择
   • 执行命令后，会出现一系列提示项，用于配置项目：
     • Project name：项目名称，默认为vue-project，可以根据需求修改，这里我们先使用默认值，直接回车。
     • Add Typescript：是否添加 Typescript 组件，默认是No，我们本次使用默认值，回车。
     • Add JSX support：是否添加 JSX 支持，默认No，继续回车。
     • Add Vue Router：是否添加 Vue Router 路由管理组件，默认No，回车。
     • Add Pinia：是否添加 Pinia 状态管理，默认No，回车。
     • Add Vitest：是否添加 Vitest 单元测试，默认No，回车。
     • Add an end to end：是否添加端到端测试，默认No，回车。
     • Add ESLint for code quality：是否添加 ESLint 进行代码质量检查，默认No，回车。
   • 由于是第一次创建 Vue 项目，我们全部使用默认值，一路回车完成项目创建。创建完成后，会在当前目录下生成一个名为vue-project（如果使用默认名称）的项目文件夹。

三、安装项目依赖

1. 进入项目目录，在命令行中执行：cd vue-project（如果项目名称不是默认的，请将vue-project替换为实际的项目名称）。
2. 然后执行npm install命令，该命令会联网下载 Vue 项目所需的依赖包。这个过程可能需要几分钟时间，具体取决于网络速度，请耐心等待。

四、项目目录结构介绍

1. vue.config.js：可以在这个文件中编写 Vue 项目的配置信息，比如项目启动后的端口号等。
2. package.json：项目的配置文件，包含项目名、版本号、依赖包及版本等信息，类似于 Maven 项目的 pom 文件。
3. package-lock.json：也是项目的配置文件，其内容会自动生成，一般不需要手动修改。
4. index.html：项目的默认首页。
5. public：用于存放公共资源，如图片等。
6. node_modules：存放下载的第三方包，一般不需要关注。
7. src：源代码存放目录，我们写的代码 99% 都放在这里。
   • assets：静态资源目录，存放图片、字体等。
   • components：组件目录，存放通用组件。
   • App.vue：根组件。
   • main.js：入口文件。

五、启动 Vue 项目

1. 命令行启动方式
   • 在项目目录下（即包含package.json的目录），执行命令：npm run dev。
   • 项目启动成功后，会提示相关信息，例如默认绑定的端口号等。
   • 在浏览器中输入http://127.0.0.1:5173（如果端口号没有修改的话），即可访问 Vue 项目。如果浏览器能够正常展示页面，则证明项目启动成功。
   • 要停止项目运行，可以在命令行中按Ctrl + C强制停止。
2. 图形化界面启动方式（以 VS Code 为例）
   • 打开 VS Code，找到项目所在目录。
   • 在 VS Code 的侧边栏中找到 “NPM 脚本”，点击展开。
   • 找到dev脚本，后面有一个小按钮，点击该按钮即可启动项目。
   • 同样，启动成功后在浏览器中输入http://127.0.0.1:5173可以访问项目。

通过以上步骤，我们就完成了 Vue 项目的创建、依赖安装和启动。希望大家课后多多练习，熟练掌握这些操作，为后续的 Vue 项目开发打下坚实的基础。