Vue3快速上手(一)使用vite创建项目

一、准备

在此之前,你的电脑,需要安装node.js,我这边v18.19.0

csharp 复制代码
wangdy@mb 2024code % node -v
v18.19.0

二、创建

执行npm create vue@latest命令即可使用vite创建vue3项目

有的同学可能卡主不动,可能是npm的registry设置的问题

先看下,默认是https://registry.npmjs.org/

csharp 复制代码
wangdy@mb 2024code % npm config get registry

https://registry.npmjs.org/

改为:https://registry.npmmirror.com,执行如下命令:

csharp 复制代码
npm config set registry=https://registry.npmmirror.com

然后再执行npm create vue@latest命令就正常了,按提示和自己的需求一步步操作即可。

bash 复制代码
wangdy@mb 2024code % npm create vue@latest                                 
Need to install the following packages:
create-vue@3.9.1
Ok to proceed? (y) y

Vue.js - The Progressive JavaScript Framework

✔ 请输入项目名称: ... vue3_study
✔ 是否使用 TypeScript 语法? ... 否 / 是
✔ 是否启用 JSX 支持? ... 否 / 是
✔ 是否引入 Vue Router 进行单页面应用开发? ... 否 / 是
✔ 是否引入 Pinia 用于状态管理? ... 否 / 是
✔ 是否引入 Vitest 用于单元测试? ... 否 / 是
✔ 是否要引入一款端到端(End to End)测试工具? › 不需要
✔ 是否引入 ESLint 用于代码质量检测? ... 否 / 是

正在构建项目 /Users/heqi/Documents/2024code/vue3_study...

项目构建完成,可执行以下命令:

  cd vue3_study
  npm install
  npm run dev

项目结构如下:

三、启动

npm install 安装依赖

csharp 复制代码
wangdy@mb vue3_study % npm install

added 92 packages in 2m

npm run dev 启动

csharp 复制代码
  VITE v5.0.11  ready in 1184 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

四、访问

浏览器输入http://localhost:5173,查看访问结果。

END

相关推荐
fcm191 天前
(6) tauri之前端框架性能对比
前端·javascript·rust·前端框架·vue·react
王者鳜錸1 天前
方言普通话识别大模型,支持中英+202种方言识别
java·vue·语音识别
瓯雅爱分享2 天前
基于Java后端与Vue前端的MES生产管理系统,涵盖生产调度、资源管控及数据分析,提供全流程可视化支持,包含完整可运行源码,助力企业提升生产效率与管理水平
java·mysql·vue·软件工程·源代码管理
邂逅星河浪漫3 天前
【Spring AI】Ollama大模型-智能对话实现+项目实战(Spring Boot + Vue)
java·人工智能·spring boot·vue·prompt·agent·ollama
知识分享小能手3 天前
React学习教程,从入门到精通,React Router 语法知识点及使用方法详解(28)
前端·javascript·学习·react.js·前端框架·vue·react
路光.3 天前
统一配置管理根据不同域名展现不同信息或相近信息 Vue3类单例模式封装
前端·单例模式·typescript·vue3
中杯可乐多加冰3 天前
高校迎新管理系统:基于 smardaten AI + 无代码开发实践
人工智能·低代码·语言模型·llm·vue·管理系统·无代码
别看我只是一直狼3 天前
用模块联邦(Module Federation)优雅共享组件
vite
这是个栗子3 天前
(二)Vue.js 指令、事件与计算属性
前端·javascript·vue
光影少年8 天前
vite打包优化有哪些
前端·vite·掘金·金石计划