Vue3实战笔记（01）--- 使用vite初始化项目

---

前言

Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任，本系列笔记从零开始学习开发一套后台管理系统，从实战出发，记录开发过程中遇到的问题和心得，旨在掌握Vue3 的核心特性和开发技巧。前端UI框架使用Vuetify，以快速构建美观且功能强大的应用程序。构建工具使用vite，管理工具使用pnpm。

---

一、使用vite初始化项目

pnpm create vite@latest

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

你还可以通过附加的命令行选项直接指定项目名称和你想要使用的模板。例如，要构建一个 Vite + Vue 项目，运行:

# npm 7+, extra double-dash is needed:
npm create vite@latest my-vue-app -- --template vue

# yarn
yarn create vite my-vue-app --template vue

# pnpm
pnpm create vite my-vue-app --template vue

# bun
bunx create-vite my-vue-app --template vue

查看 create-vite 以获取每个模板的更多细节：vanilla，vanilla-ts, vue, vue-ts，react，react-ts，react-swc，react-swc-ts，preact，preact-ts，lit，lit-ts，svelte，svelte-ts，solid，solid-ts，qwik，qwik-ts。

二、工程配置

安装：

pnpm i eslint -D

生成配置文件：eslint.cjs

npx eslint --init

按照如下选项安装完就会会生成文件：

配置提交前自动格式化：

pnpm install -D husky

npx husky-init

三、使用Vuetify

下面引入需要使用的一个框架vuetify3

pnpm i vuetify

这是从一个已有的项目引入vuetify的做法，接下来换一种方案，直接创建一个完整的vuetify项目：

pnpm create vuetify

然后：

pnpm i

pnpm run dev

报错了：

原因是windows环境下不支持shell，解决方案：

替换脚本直接执行vite.js

因为.bin下的脚本也是去执行这个vite.js，再次运行dev：

vuetify就搭建好了。项目的初始化大功告成。