建置vite vue 3 及 vuetify 3專案 紀錄

使用下面指令快速建立vite vue3專案：

$npm init vue@latest

或者使用vite官方文件中方法：(步驟會比較不同)

$yarn create vite

建置過程會詢問專案名稱及是否要安裝相關套件，可以造自己或團隊習慣進行選擇。

建置完成後再執行，安裝套件：

$yarn

安裝eslint 相關套件：

$yarn add -D @vue/eslint-config-standard
$yarn add -D eslint-plugin-import
$yarn add -D eslint-plugin-node
$yarn add -D eslint-plugin-promise
$yarn add -D eslint-plugin-standard

將.eslintrc副檔名更改套件才能抓到 .eslintrc.cjs => .eslintrc.js

.eslintrc.js內容如下：

require('@rushstack/eslint-patch/modern-module-resolution')

module.exports = {
    root: true,
    extends: [
        'plugin:vue/vue3-essential',
        'eslint:recommended',
        'plugin:@typescript-eslint/recommended',
        '@vue/standard',
        '@vue/typescript/recommended',
        'plugin:vue/essential'
    ],
    plugins: ['@typescript-eslint'],
    overrides: [
        {
            files: ['cypress/e2e/**/*.{cy,spec}.{js,ts,jsx,tsx}'],
            extends: ['plugin:cypress/recommended']
        }
    ],
    parserOptions: {
        ecmaVersion: 'latest'
    },
    rules: {
        quotes: ['error', 'single'],
        indent: ['error', 4],
        camelcase: 'off',
        'vue/no-v-model-argument': 'off',
        'no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
        '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
        'vue/html-indent': ['error', 4],
        'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
        'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
        '@typescript-eslint/explicit-module-boundary-types': 'off',
        '@typescript-eslint/no-explicit-any': 'off',
        'prefer-const': 'off',
        'space-before-function-paren': 'off',
        'no-use-before-define': 'off',
        'vue/multi-word-component-names': 'off',
        '@typescript-eslint/no-non-null-assertion': 'off'
    }
}

將extends加入剛剛安裝的套件，rules部分就依照個人或團隊習慣設定，存擋後，之後存擋就會根據rules部分自動format，若沒有可以從開vs code看看。

安裝vuetify：

執行指令：

$yarn vue add vuetify

choose a preset: 選擇 Vuetify 3 — Vite
Would you like to install Vuetify 3 nightly build?: 是否安裝Vuetify 3 每日建構？ 這邊是選擇否

安裝完成後再安裝icons相關套件：

$yarn add -D material-design-icons-iconfont

接著到plugins/vuetify.ts進行調整，載入剛安裝的套件（第一行），對icons部分進行設定。

import 'material-design-icons-iconfont/dist/material-design-icons.css'
import '@mdi/font/css/materialdesignicons.css'
import 'vuetify/styles'

import { createVuetify } from 'vuetify'
import { mdi } from 'vuetify/iconsets/mdi'
export default createVuetify(
    {
        icons: {
            defaultSet: 'mdi',
            sets: {
                mdi
            }
        }
    }
)

最後執行

$yarn dev

就可以看到成功畫面了