文章目录
- 一、先决条件
- 二、创建项目
- 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/
结果