Vite-Vue3构建工具

最新推荐文章于 2025-09-26 10:18:22 发布

原创最新推荐文章于 2025-09-26 10:18:22 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#Vue #Vue3

Vue3 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了使用Vite构建Vue3.0应用的基本步骤，包括创建项目、项目结构解析和构建过程。重点展示了如何通过npm命令运行开发服务器，并介绍了关键文件和目录的作用。

Vite-Vue3构建工具

Vite是Vue3.0新增的构建工具，目前仅支持Vue3.0。

1.创建项目

npm init vite-app myvitedemo
cd myvitedemo
npm install
npm run dev

执行过程如下：

D:\>npm init vite-app myvitedemo
Need to install the following packages:
  create-vite-app
Ok to proceed? (y)
npm WARN deprecated create-vite-app@1.21.0: create-vite-app has been deprecated. run `npm init @vitejs/app` or `yarn create @vitejs/app` instead.
Scaffolding project in E:\workspace_of_ws\demo\myvitedemo...

Done. Now run:

  cd myvitedemo
  npm install (or `yarn`)
  npm run dev (or `yarn dev`)


D:\>cd myvitedemo

D:\>npm install

added 285 packages, and audited 286 packages in 31s

33 packages are looking for funding
  run `npm fund` for details

3 moderate severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

D:\>npm run dev

> myvitedemo@0.0.0 dev
> vite

[vite] Optimizable dependencies detected:
vue

  Dev server running at:
  > Network:  http://192.168.56.1:3000/
  > Network:  http://192.168.31.112:3000/
  > Local:    http://localhost:3000/

项目启动后，在浏览器中访问，如下图：

2.项目结构

生成的项目结构如下图：

项目中文件及文件夹的用途

文件或文件夹	用途
node_modules	项目依赖包目录
public	项目公有文件
--favicon.ico	网站地址栏前面的小图标
src	源代码文件目录
--assets	静态文件目录，图片图标等
--components	Vue3的自定义组件目录
--App.vue	项目的根组件
--index.css	项目的通用css样式
--main.js	项目入口文件
.gitgnore	git的管理配置文件，设置哪些目录和文件不在管理范围内
index.html	项目的默认首页
package.json	项目配置文件，包管理、项目名称、版本和命令
package-lock.json	项目包的锁定文件，用于防止包版本不一致导致的错误