Vue3快速上手（一）使用vite创建项目

最新推荐文章于 2025-06-03 15:01:40 发布

原创最新推荐文章于 2025-06-03 15:01:40 发布 · 1.3k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#vue3 #vite #vue创建项目 #npm create #vue

Vue 专栏收录该内容

21 篇文章

订阅专栏

本文指导如何在电脑上安装Node.jsv18.19.0，并通过npm创建Vue3项目，解决npmregistry问题，配置TypeScript、Vite等选项，最后完成项目安装和本地访问。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

一、准备

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

wangdy@mb 2024code % node -v
v18.19.0

二、创建

执行npm create vue@latest命令即可使用vite创建vue3项目
有的同学可能卡主不动，可能是npm的registry设置的问题
先看下，默认是https://registry.npmjs.org/

wangdy@mb 2024code % npm config get registry

https://registry.npmjs.org/

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

npm config set registry=https://registry.npmmirror.com

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

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 安装依赖

wangdy@mb vue3_study % npm install

added 92 packages in 2m

npm run dev 启动


  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，查看访问结果。
在这里插入图片描述