二、创建第一个VUE项目

文章目录

• 一、先决条件
• 二、创建项目
• • 1、创建项目
  • 2、选择VUE版本
  • 3、选择依赖管理器
  • 4、创建成功
• 三、启动并访问
• • 启动项目
  • 访问
  • 结果

---

一、先决条件

确保已经安装了 Node.js 和 npm（一般安装 Node.js 时会自动安装 npm），并且通过 npm install -g @vue/cli 命令全局安装了 Vue CLI（命令行工具）。

二、创建项目

1、创建项目

• 打开命令行终端（在 Windows 系统中可以是命令提示符或 PowerShell，Mac 或 Linux 系统使用终端）。
• 切换到你想要创建项目的目录，例如，若想在 D:\Projects 目录下创建项目，可以使用命令 cd E:\vue-project。
• 在终端中输入 vue create demo，这里的 your-project-name 是你自定义的项目名称，例如 demo。之后按下回车键，便会启动项目创建流程。

此时，Vue CLI 可能会提供几种预设选项供你选择：

• 默认预设（default）：包含 Babel 和 ESLint，适用于快速上手搭建基础项目，它会自动配置一些常用的基础设置，对于初学者较为友好。
• 手动预设（manual）：如果你选择手动预设，就可以逐个挑选要安装的功能模块，比如 Vue Router（用于实现前端路由功能，方便页面导航和切换）、Vuex（用于管理 Vue 应用的状态，在复杂应用中协调数据流向）、CSS Preprocessors（如 Sass、Less 等 CSS 预处理工具，方便编写更具扩展性的样式）、Linter / Formatter（代码检查和格式化工具，确保代码风格统一）等，这种方式给予你对项目配置的最大掌控权，适合有一定经验的开发者根据项目需求精细定制。

2、选择VUE版本

3、选择依赖管理器

4、创建成功

出现下图所示，创建成功：

三、启动并访问

启动项目

npm run serve

访问

http://localhost:8080/

结果