在vite项目中添加Vuetify 2

Question

我的团队在Vue 2开发了基于类的组件和类型记录的应用程序。

现在，我们想迁移到Vite --因为它所具有的所有优点。

我遵循了这个指南(我只能推荐) https://vueschool.io/articles/vuejs-tutorials/how-to-migrate-from-vue-cli-to-vite/

总之-不管用。浏览器甚至不能从index.html中获取"/src/main.js“，但是如果我将"/src/main.ts”放在“/src/main.ts”中，它会获取它，但会显示错误，表明Vuetify甚至没有安装。我知道.ts文件不能被浏览器读取，我只是在调试了2个小时之后才试过它。

另外，我在Vuetify文档中看到，“第一党的支持”仍有待发布。https://vuetifyjs.com/en/introduction/roadmap/#in-development

我的问题是-是否可以在Vite 应用程序中添加Vuetify？

package.json (仅依赖项)

  "dependencies": {
    "vue": "^2.6.12",
    "vue-class-component": "^7.2.6",
    "vue-property-decorator": "^9.1.2",
    "vuetify": "^2.4.0",
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^4.18.0",
    "@typescript-eslint/parser": "^4.18.0",
    "@vitejs/plugin-vue": "^1.6.1",
    "@vue/cli-plugin-typescript": "^4.5.15",
    "@vue/eslint-config-typescript": "^7.0.0",
    "eslint": "^8.9.0",
    "eslint-plugin-vue": "^8.5.0",
    "sass": "~1.32.0",
    "typescript": "~4.1.5",
    "vite": "^2.6.13",
    "vite-plugin-vue2": "^1.9.2",
    "vue-cli-plugin-vuetify": "^2.4.5",
    "vue-template-compiler": "^2.6.14",
    "vuetify-loader": "^1.7.0"
  },

tsconfig.json

{
  "compilerOptions": {
    // ...
    "target": "esnext",
    "module": "esnext",
    "isolatedModules": true,
    "useDefineForClassFields": true,
    "types": [
      "webpack-env",
      "vite/client"
    ],

vite.config.js

import { defineConfig } from "vite";
import { createVuePlugin as vue } from "vite-plugin-vue2";
const path = require("path");

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
});

在顶部呈现空html，当我将.ts导入到index.html中时，出现"no vuetify“错误指示符

<script type="module" src="/src/main.ts"></script>

​

​

Answer 1

有对Vuetify 2 链接的支持

首先安装插件

npm i unplugin-vue-components -D

然后在您的vite.config.ts文件中：

import { defineConfig } from 'vite'
import { createVuePlugin } from 'vite-plugin-vue2'
import { VuetifyResolver } from 'unplugin-vue-components/resolvers';
import Components from 'unplugin-vue-components/vite';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    createVuePlugin(/* options */),
    Components({
      resolvers: [
        // Vuetify
        VuetifyResolver(),
      ],
    }),
  ]
})

Answer 2

我创建了startar模板。

https://github.com/logue/vite-vue2-vuetify-ts-starter

最初是为使用vue-property-decorator的项目创建的，它还支持组合api。

如果您想使用复合api访问vuetify函数，可以使用useVuetify()访问它。

Answer 3

Intall 解插件-vue-组件.

npm install -D unplugin-vue-components

然后在vite.config.ts中添加插件

import { defineConfig } from 'vite'
import vue2 from '@vitejs/plugin-vue2'
import Components from 'unplugin-vue-components/vite'
import { VuetifyResolver } from 'unplugin-vue-components/resolvers'

defineComponent({
  plugins: [
     vue2(),
     Components({
        resolvers: [VuetifyResolver()],
     })
  ]
})

如果您也使用vuetify 自定义sass变量

defineComponent({
  plugins: [
    vue2(),
    Components({
      resolvers: [VuetifyResolver()],
    }),
  ],
  css: {
    // https://vitejs.dev/config/#css-preprocessoroptions
    preprocessorOptions: {
      sass: {
        additionalData: [
          // vuetify variable overrides
          '@import "@/styles/variables.scss"',
          '',
        ].join('\n'),
      },
    },
  },
})

您可以使用Vite 3+ Vuetify 2+ Vue 2.7参考我的初学者模板，它还包括TypeScript支持和Vuetify 2组件中的intellisense

https://github.com/kingyue737/vitify-admin