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

相关推荐
酉鬼女又兒2 小时前
SQL113+114 更新记录(一)(二)+更新数据知识总结
java·服务器·前端
无风听海2 小时前
AngularJS中 then catch finally 的语义、执行规则与推荐写法
前端·javascript·angular.js
利刃大大2 小时前
【Vue】组件化 && 组件的注册 && App.vue
前端·javascript·vue.js
Whisper_Sy2 小时前
Flutter for OpenHarmony移动数据使用监管助手App实战 - 周报告实现
开发语言·javascript·网络·flutter·php
Anastasiozzzz2 小时前
leetcodehot100--最小栈 MinStack
java·javascript·算法
一起养小猫2 小时前
Flutter for OpenHarmony 实战:按钮类 Widget 完全指南
前端·javascript·flutter
css趣多多2 小时前
Vux store实例的模块化管理
前端
我是伪码农3 小时前
Vue 1.26
前端·javascript·vue.js
晚霞的不甘4 小时前
Flutter for OpenHarmony 创意实战:打造一款炫酷的“太空舱”倒计时应用
开发语言·前端·flutter·正则表达式·前端框架·postman