【记账本实战】01 使用 Vite 创建一个 Vue 项目

使用 Vite 创建一个 Vue 项目

三种创建 Vue 项目的方式

创建 Vue 项目的有以下三种方式：

1. Vue-Cli
2. Vite
3. Webpack

Vue CLI 现已处于维护模式！现在官方推荐使用 create-vue 来创建基于 Vite 的新项目。我之前写过一篇使用 Vue CLI 脚手架创建一个企业级项目的教程，具体可以查看这篇文章：使用 Vue CLI 创建项目。

Webpack 是一个现代 JavaScript 应用程序的静态模块打包器（module bundler），在众多打包工具中，webpack 是大哥大的存在，但是它的配置极其复杂，在本项目中，我们不用这个打包器，之后我会写一篇用 webpack 从 0 开始搭建一个企业级的 Vue 项目，小伙伴们可以关注一下，期待我的更新。

在本项目中，我们将采用 vite 创建项目，这也是 Vue 官网目前推荐使用构建工具。我们按照官方文档给的教程来初始化项目。

使用 Vite 来创建 Vue 项目

兼容性注意

Vite 需要 Node.js 版本 18+，20+。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。

Vite 官方文档的教程提供了多个包管理器来初始化项目，有 NPM，Yarn，PNPM，Bun 四种包管理器，这里我们选择使用 NPM，这是 Node.js 自带的包管理器。

npm create vite@latest

我们在终端上执行上诉命令

这里需要我们输入项目的名称 daily-cost，回车继续下一步：

这里需要我们选择框架，我们直接选择 Vue ，回车继续下一步：

这里需要我们选择编程语言，我们选择 JavaScript，回车继续下一步：

当你看到和上诉图片一样的提示之后，就说明项目初始完成了。

安装依赖

我们根据上面的提示，进入项目根目录，执行下面的命令来安装依赖

cd daily-cost
npm run install

运行项目

当我们完成依赖的安装之后，就可以使用下面的命令来启动项目了。

npm run dev

然后我们在浏览器地址栏上输入 http://localhost:5173/，就可以访问项目了。

当我们需要关闭项目的时候，只需要在终端中输入 q，然后回车，即可关闭项目。