有很多办法可以基于`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项目的办法。