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项目的步骤就可以正确完成创建啦!

相关推荐
Penge6661 小时前
《Go 后端开发者学 TypeScript:keyof关键字》
javascript
Penge6661 小时前
《Go 后端开发者学 TypeScript:extends关键字》
javascript
张张123y1 小时前
DSH 插件调试避坑:client.js 设置面板、热重载与高频报错排查表
开发语言·javascript·人工智能·开源·ecmascript·后端开发·ai agent
去伪存真2 小时前
AI Agent Harness 深度测评与技术选型实战
前端·agent
FRing034 小时前
vue2干货总结7(自定义指令、插槽、单页应用程序、路由的使用(VueRouter))
开发语言·前端·vue.js·vue2
Penge6666 小时前
《Go 后端开发者学 TypeScript:typescript 类型断言》
javascript
Penge6666 小时前
《Go 后端开发者学 TypeScript:Symbol》
javascript
疯华整猫7 小时前
被杀掉之后:我把 Android 的「唤起 + 常驻」重做了一遍
前端·面试·架构
ruanno_top8 小时前
点全选,已选的被清空了:Transfer 三态复选框的三个 bug
vue.js
三*一8 小时前
Mapbox‑GL JS 多边形折点编辑工具:实现原理、功能拆解与踩坑总结
开发语言·javascript·ecmascript