使用 vuetify

Vuetify 是一个非常优秀的前端组件库，天生的响应式和 Material Design 风格。2022.11.01 终于迎来了 Vuetify 3.0，完整支持了 Vue 3 语法。对于现有使用 VueCLI 和 Webpack 的项目，通过以下命令引入 Vuetify：

yarn add vuetify@next @mdi/font vue-i18n@next
yarn add --dev webpack-plugin-vuetify

main.js 示例如下：

import { createApp } from 'vue'
import { createVuetify } from 'vuetify'

import '@mdi/font/css/materialdesignicons.css'
import 'vuetify/styles'
import zhHans from 'vuetify/lib/locale/zh-Hans'
import en from 'vuetify/lib/locale/en'

const vuetify = createVuetify({
  ssr: true,
  icons: {
    defaultSet: 'mdi',
  },
  locale: {
    messages: { zhHans, en },
    locale: 'zhHans',
    fallback: en,
  },
  theme: {
  },
})

import { createI18n } from 'vue-i18n'
import zh_cn from './locales/zh_cn'
import en_us from './locales/en_us'

const i18n = createI18n({
  locale: 'zh_cn',
  fallbackLocale: 'en_us',
  messages: {
    zh_cn,
    en_us
  },
})

import App from './App.vue'
const app = createApp(App)

app.config.productionTip = false
app.use(vuetify).use(i18n).mount('#app')

vue.config.js 配置如下：

const { defineConfig } = require('@vue/cli-service')
const { VuetifyPlugin } = require('webpack-plugin-vuetify')
module.exports = defineConfig({
  // Configuration Reference: https://cli.vuejs.org/zh/config
  productionSourceMap: false,
  // Use relative path for static resources
  publicPath: 'auto',
  transpileDependencies: true,
  configureWebpack: {
    resolve: {
      // https://webpack.js.org/configuration/resolve/#resolvefallback
      fallback: {}
    },
    optimization: {
      // https://webpack.js.org/plugins/split-chunks-plugin
      splitChunks: {}
    },
    plugins: [
      new VuetifyPlugin({ autoImport: true }),
    ],
  },
})