如何安装并开始使用 Vuetify 和 Vue.js 3

Question

在哪里可以找到与 Vue.js 3 兼容的新 Vuetify 版本文档以及如何使用 Vue cli 安装和设置它：

在 vue 2 中我们这样做：

vue create project-name

然后 ：

vue add vuetify

我们如何使用 Vue 3 做到这一点？

Answer 1

2023 年更新

\n

做就是了 ：

\n

npm init vuetify\n

\n

或者

\n

pnpm create vuetify\n

\n

老的

\n

您可以按照此处的新文档进行操作，并且可以按如下方式进行设置：

\n

创建新的 vue 项目：

\n

************************* VUE CLI ********************** *****

\n

vue create project-name\n

\n

然后将目录更改为新创建的项目以添加 vuetify

\n

cd project-name\n

\n

然后

\n

vue add vuetify\n

\n

选择 vuetify 3 预设Vuetify 3 - Vue CLI (preview 3)：

\n

npm init vuetify\n

\n

这会将main.js文件更改为：

\n

import { createApp } from \'vue\'\nimport vuetify from \'./plugins/vuetify\'\nimport App from \'./App.vue\'\n\nconst app = createApp(App)\napp.use(vuetify)\n\napp.mount(\'#app\')\n

\n

./plugins/vuetify

\n

import \'@mdi/font/css/materialdesignicons.css\'\nimport \'vuetify/lib/styles/main.sass\'\nimport { createVuetify } from \'vuetify\'\nimport * as components from \'vuetify/lib/components\'\nimport * as directives from \'vuetify/lib/directives\'\n\nexport default createVuetify({\n  components,\n  directives,\n})\n

\n

*************************视频************************ ****

\n

按照以下命令创建 Vue 3 项目：

\n

pnpm create vuetify\n

\n

然后回答不同的提示：

\n

vue create project-name\n

\n

最后安装 vuetify 3 并@mdi/font：

\n

npm i vuetify@next @mdi/font\n

\n

并按上述方式更改 main.js。

\n

您可以分叉此存储库来开始

\n