Vue day1

一、Vue简介

1、渐进式JavaScript框架

Vue是一款用于构建用户界面的JavaScript框架,基于标准的HTML、CSS和JavaScript构建,并提供了一套声明式的、组件化的编程模型。

2、优势(VUE是一个框架、也是一个生态)

1、无需构建步骤,渐进式增强静态的HTML

2、在任何页面中作为Web Components嵌入

3、单页面应用(SPA)

4、全栈/服务端渲染(SSR)

5、Jamstack/静态站点生成(SSG)

6、开发桌面端、移动端、WebGL、甚至是命令行终端界面

官方文档:简介 | Vue.js

二、创建vue项目

1、步骤

1)打开命令行cmd窗口使用(cd 文件夹名称)导航到你要创建的项目地址

2)使用npm init vue@latest命令创建项目

3)通过命令npm run dev 运行项目

4)创建项目成功(复制 http://localhost:5173/到浏览器打开)显示如下界面说明项目创建成功

2、可能会遇到的问题

1、Node.js版本不兼容的问题

You are using Node.js 18.16.0. Vite requires Node.js version 20.19+ or 22.12+. Please upgrade your Node.js version.

error when starting dev server:

TypeError: crypto.hash is not a function

如果在创建过程中出现版本问题,那就要考虑更新node版本

更新方法:

1. 使用 NVM(推荐,尤其适合开发)

NVM 允许你在同一台机器上管理多个 Node.js 版本,

1)下载安装NVM,访问https://github.com/coreybutler/nvm-windows/releases 发布页面,下载 nvm-setup.exe并安装(傻瓜式安装)

2)安装完成后打开新的命令提示符,安装所需Node.js版本

复制代码
# 查看可用的版本列表
nvm list available

# 安装最新的 LTS 版本
nvm install lts

# 或者安装特定版本,如 20.19.0
nvm install 20.19.0

# 使用新安装的版本
nvm use 20.19.0

完成之后根据前面创建vue项目的步骤就可以正确完成创建啦!

相关推荐
抓不住时间的沙3 分钟前
butterfly主题美化,打造属于自己的个性博客
java·开发语言·前端·javascript·node.js·github
kyriewen14 分钟前
前端切图仔被 AI 新闻淹死的第 N 天,我用 TRAE Work 定时任务救了自己
前端·人工智能·trae
京东云开发者15 分钟前
【全栈实践】第一个 AI Agent 项目:从零搭建 AI 音频创作助手(高级篇)
前端·agent·音视频开发
AbrahamCS32 分钟前
从角色协同到可运行图:Graph Engineer 与多智能体编排
前端·人工智能·智能体
BigTopOne43 分钟前
VS Code IntelliSense 配置(解决 #include 找不到的报红)
前端
愚公搬代码1 小时前
【愚公系列】《Web应用安全》005-Visual Studio Code编辑器的使用
前端·安全·编辑器
用户921080262861 小时前
2. 以 Bubble 为例,看 Ant Design X Vue 组件是怎么设计的
前端
Liora_Yvonne1 小时前
Monorepo 里的 shared、services 和 ui 到底怎么划分?
前端
PedroQue991 小时前
uni-router v2.1.0 升级:导航守卫全面支持返回值模式
前端·uni-app
猫七先生1 小时前
从零到一:个人博客自动化部署踩坑全记录
前端