用最快捷的方法创建vuetify3项目

有很多办法可以基于vue3创建vuetify3项目，本文介绍我认为最快捷的创建方式。

vuetify3是成熟的vue3框架：

• 严格遵循 Google 的 Material Design 规范，提供一致的设计语言和视觉体验，适合需要现代、简约风格的项目。
• 提供了超过 80 个功能强大的 UI 组件，例如按钮、表格、对话框、菜单等，能够满足大多数应用的开发需求，减少了第三方依赖。
• 完全重构以支持 Vue 3 的 Composition API 和其他新特性，与 Vue 3 的生态系统无缝集成。
• 提供动态主题和深色模式支持，允许开发者轻松自定义颜色、字体和其他主题元素，满足品牌化需求。

准备环境

1. 安装nodejs 可以到 nodejs官网 下载nodejs，我下载的是V18.20.5(LTS)。

不建议下载最新版本。
因为nodejs是整个生态系统的基座，在nodejs新版本发布后，基于它的相关包和组件在此新版本上可能有未知的bug，严重者甚至不能运行，这些生态系统下游的产品通常要在nodejs发布后的后续版本才稳定可靠。

2. 安装pnpm

npm install -g pnpm

在使用vuetify3开发时，pnpm比npm更方便些。

新建veutify项目

1. 搭建脚手架

pnpm create vuetify

在向导中，Project name可以输入gallery，其余的按默认值选就行。我个人习惯使用npm安装依赖。

2. 启动vuetify 至此，已经搭建完毕程序脚手架，通过运行以下命令启动 vite 开发服务器：

cd gallery
pnpm dev

可以在vs code的terminal中输入上述命令： 在浏览器中打开网址http://localhost:3000/，可以看到启动页面：

初探脚手架代码

通过以上步骤创建的脚手架代码包含了主要功能，基于它我们可以快速构建vuetify应用。

1. 程序入口是index.html，它引用了/src/main.js，在/src/main.js中注册了vuetify控件。

注册以后在应用的各个位置可以直接使用vuetify控件，非常方便。

2. 在/src/main.js中import了/src/App.vue，在/src/App.vue中使用了router-view，在router-view中可以动态加载pages文件夹里面的页面。
3. 当打开网址http://localhost:3000/时，router-view会自动路由到/pages/index.vue，在/pages/index.vue中加载了/components/HelloWorld.vue，我们看到的首页的实际内容都在/components/HelloWorld.vue中。

下图概括了调用过程：

关于router-view router-view 是 Vue Router 提供的一个组件，用于根据当前路由渲染对应的视图组件。
每个 router-view 会检测路由配置中匹配的 component，然后动态渲染。
具体来说，我们可以在pages文件夹增加一个页面，比如叫做test.vue，不用配置路由就可以访问http://localhost:3000/test了。

使用这个脚手架在做一般的引用时，大量重复的代码就不用再写了，棒！

总结

到这里，我们已经有一个好的开端，马上可以做具体的产品了。
这是我知道的最快捷的创建vuetify3项目的办法。

🪐祝好运🪐