二、创建第一个VUE项目

文章目录


一、先决条件

确保已经安装了 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、创建成功

出现下图所示,创建成功:

三、启动并访问

启动项目

shell 复制代码
npm run serve

访问

html 复制代码
http://localhost:8080/

结果


相关推荐
JNU freshman22 分钟前
Element Plus组件
前端·vue.js·vue3
一只专注api接口开发的技术猿29 分钟前
容器化与调度:使用 Docker 与 K8s 管理分布式淘宝商品数据采集任务
开发语言·前端·数据库
我有一棵树34 分钟前
性能优化之前端与服务端中的 Gzip 压缩全解析
前端
魔术师卡颂37 分钟前
不就写提示词?提示词工程为啥是工程?
前端·人工智能·后端
訾博ZiBo1 小时前
【Vibe Coding】001-前端界面常用布局
前端
软件技术NINI1 小时前
MATLAB疑难诊疗:从调试到优化的全攻略
javascript·css·python·html
IT_陈寒1 小时前
《Redis性能翻倍的7个冷门技巧,90%开发者都不知道!》
前端·人工智能·后端
歪歪1001 小时前
React Native开发Android&IOS流程完整指南
android·开发语言·前端·react native·ios·前端框架
知识分享小能手1 小时前
uni-app 入门学习教程,从入门到精通,uni-app组件 —— 知识点详解与实战案例(4)
前端·javascript·学习·微信小程序·小程序·前端框架·uni-app
ZYMFZ2 小时前
python面向对象
前端·数据库·python