vue-element-plus-admin

The application is initialized using an asynchronous setupAll function that orchestrates the mounting of various plugins, stores, and core services. To replicate the application setup or understand the initialization sequence, ensure the following plugins are applied to the Vue app instance in order:

1. i18n: setupI18n(app)
2. State Management: setupStore(app)
3. Global Components: setupGlobCom(app)
4. UI Framework: setupElementPlus(app)
5. Routing: setupRouter(app)
6. Permissions/Directives: setupPermission(app)

Finally, call app.mount('#app') to mount the application to the DOM element with ID app.

import { createApp } from 'vue'
import App from './App.vue'

const setupAll = async () => {
  const app = createApp(App)

  await setupI18n(app)
  setupStore(app)
  setupGlobCom(app)
  setupElementPlus(app)
  setupRouter(app)
  setupPermission(app)

  app.mount('#app')
}

setupAll()

The project uses a flat configuration file (eslint.config.mjs) that integrates TypeScript, Vue, and Prettier. It targets .ts, .tsx, and .vue files within the src directory.

Key configuration features include:

• Parsers: Uses vue-eslint-parser for .vue files and typescript-eslint for TypeScript syntax.
• Presets: Extends eslint.configs.recommended, tseslint.configs.recommended, and pluginVue.configs['flat/essential'].
• Prettier Integration: Uses eslint-plugin-prettier to treat Prettier formatting issues as ESLint errors.

import pluginVue from 'eslint-plugin-vue'
import eslint from '@eslint/js'
import tseslint from 'typescript-eslint'
import vueParser from 'vue-eslint-parser'
import prettier from 'eslint-plugin-prettier'

export default tseslint.config({
  files: ['src/**/*.ts', 'src/**/*.tsx', 'src/**/*.vue'],
  extends: [
    eslint.configs.recommended,
    ...tseslint.configs.recommended,
    ...pluginVue.configs['flat/essential']
  ],
  plugins: {
    prettier
  },
  languageOptions: {
    parser: vueParser,
    parserOptions: {
      parser: tseslint.parser,
      sourceType: 'module',
      ecmaVersion: 2020,
      ecmaFeatures: {
        jsx: true
      }
    }
  },
  rules: {
    'prettier/prettier': 'error',
    // ... other rules
  }
})

The project uses Prettier for code formatting. The following configuration is applied to maintain consistent code style across the repository:

• printWidth: 100
• tabWidth: 2
• useTabs: false
• semi: false
• vueIndentScriptAndStyle: false
• singleQuote: true
• quoteProps: 'as-needed'
• bracketSpacing: true
• trailingComma: 'none'
• jsxSingleQuote: false
• arrowParens: 'always'
• insertPragma: false
• requirePragma: false
• proseWrap: 'never'
• htmlWhitespaceSensitivity: 'strict'
• endOfLine: 'auto'
• rangeStart: 0

module.exports = {
  printWidth: 100,
  tabWidth: 2,
  useTabs: false,
  semi: false,
  vueIndentScriptAndStyle: false,
  singleQuote: true,
  quoteProps: 'as-needed',
  bracketSpacing: true,
  trailingComma: 'none',
  jsxSingleQuote: false,
  arrowParens: 'always',
  insertPragma: false,
  requirePragma: false,
  proseWrap: 'never',
  htmlWhitespaceSensitivity: 'strict',
  endOfLine: 'auto',
  rangeStart: 0
}