Vue3+TS+Vite+NaiveUI搭建一个项目骨架实现

npm create vite@latest

npm i -D eslint eslint-plugin-vue eslint-define-config # eslink
npm i -D prettier eslint-plugin-prettier @vue/eslint-config-prettier # prettire
npm i -D @vue/eslint-config-typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser # 对ts的支持

const { defineConfig } = require('eslint-define-config')

module.exports = defineConfig({
  root: true,
  
  parser: 'vue-eslint-parser',
  
  parserOptions: {
    parser: '@typescript-eslint/parser',
    //模块化方案
    sourceType: 'module',
  },
  env: {
    browser: true,
    es2021: true,
    node: true,
    // 解决 defineProps and defineEmits generate no-undef warnings
    'vue/setup-compiler-Macros': true,
  },
  // https://eslint.bootCSS.com/docs/user-guide/configuring#specifying-globals
  globals: {},
  extends: [
    'plugin:vue/vue3-recommended',
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended', // typescript-eslint推荐规则,
    'prettier',
    'plugin:prettier/recommended',
  ],
  // Https://cn.eslint.org/docs/rules/
  rules: {
    // 禁止使用 var
    'no-var': 'error',
    semi: 'off',
    // 优先使用 interface 而不是 type
    '@typescript-eslint/consistent-type-definitions': ['error', 'interface'],
    '@typescript-eslint/no-explicit-any': 'off', // 可以使用 any 类型
    '@typescript-eslint/explicit-module-boundary-types': 'off',
    // 解决使用 require() Require statement not part of import statement. 的问题
    '@typescript-eslint/no-var-requires': 0,
    // https://GitHub.com/typescript-eslint/typescript-eslint/blob/main/packages/eslint-plugin/docs/rules/ban-types.md
    '@typescript-eslint/ban-types': [
      'error',
      {
        types: {
          // add a custom message to help explain why not to use it
          Foo: "Don't use Foo because it is unsafe",

          // add a custom message, AND tell the plugin how to fix it
          String: {
            message: 'Use string instead',
            fixWith: 'string',
          },

          '{}': {
            message: 'Use object instead',
            fixWith: 'object',
          },
        },
      },
    ],
    // 禁止出现未使用的变量
    '@typescript-eslint/no-unused-vars': [
      'error',
      { vars: 'all', args: 'after-used', ignoreRestSiblings: false },
    ],
    'prettier/prettier': [
      'error',
      { singleQuote: true, parser: 'flow', semi: false },
    ],
    'vue/html-indent': 'off',
    // 关闭此规则 使用 prettier 的格式化规则，
    'vue/max-attributes-per-line': ['off'],
    // 优先使用驼峰，element 组件除外
    'vue/component-name-in-template-casing': [
      'error',
      'PascalCase',
      {
        ignores: ['/^el-/', '/^router-/'],
        reGISteredComponentsOnly: false,
      },
    ],
    // 强制使用驼峰
    camelcase: ['error', { properties: 'always' }],
    // 优先使用 const
    'prefer-const': [
      'error',
      {
        destructuring: 'any',
        ignoreReadBeforeAssign: false,
      },
    ],
  },
})

module.exports = {
  // 结尾分号
  semi: false,
  // 单引号
  singleQuote: true,
  // 一行80字符
  printWidth: 80,
  // 尾逗号
  trailinGComma: 'all',
  // 箭头函数的括号
  arrowParens: 'avoid',
  // 换行符
  endOfLine: 'lf',
}

/node_modules/
/public/
.vscode
.idea

import { defineConfig } from 'vite'
import type { ConfigEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

// https://vitejs.dev/config/
export default defineConfig(({ mode }: ConfigEnv) => {
  return {
    resolve: {
      alias: {
        '/@': resolve(__dirname, 'src'),
      },
      extensions: ['.js', '.JSON', '.ts', '.vue'], // 使用路径别名时想要省略的后缀名，可以自己 增减
    },

    
    plugins: [vue()],
  }
})

"compilerOptions": {
  // 用于设置解析非相对模块名称的基本目录，相对模块不会受到baseUrl的影响
  "baseUrl": ".",
  "paths": {
    // 用于设置模块名到基于baseUrl的路径映射
    "/@
    server: {
      proxy: {
        '/api': {
          target: env.VITE_APP_API_BASE_URL,
          changeOrigin: true,
          rewrite: path => path.replace(/^\/api/, ''),
        },
      },
    },
  }
})

npm i -D unplugin-vue-components unplugin-auto-import

import { defineConfig, loadEnv } from 'vite'
import type { ConfigEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'

// https://vitejs.dev/config/
export default defineConfig(({ mode }: ConfigEnv) => {
  const env = loadEnv(mode, process.cwd())
  return {
    resolve: {
      alias: {
        '/@': resolve(__dirname, 'src'),
      },
      extensions: ['.js', '.json', '.ts', '.vue'], // 使用路径别名时想要省略的后缀名，可以自己 增减
    },

    
    plugins: [
      vue(),
      AutoImport({
        resolvers: [],
        // 自定引入 Vue VueRouter API,如果还需要其他的可以自行引入
        imports: ['vue', 'vue-router'],
        // 调整自动引入的文件位置
        dts: 'src/type/auto-import.d.ts',
        // 解决自动引入eslint报错问题 需要在eslintrc的extend选项中引入
        eslintrc: {
          enabled: true,
          // 配置文件的位置
          filepath: './.eslintrc-auto-import.json',
          globalsPropValue: true,
        },
      }),
      Components({
        resolvers: [
          // 需要自动导入的组件
        ],
        dts: 'src/type/components.d.ts',
      }),
    ],
  }
})

// 在.eslintrc.js中的extends配置项加入'./.eslintrc-auto-import.json',
extends: [
  'plugin:vue/vue3-recommended',
  'eslint:recommended',
  'plugin:@typescript-eslint/recommended', // typescript-eslint推荐规则,
  'prettier',
  'plugin:prettier/recommended',
  './.eslintrc-auto-import.json',
],

npm i -D naive-ui @vicons/ionicons5 # @vicons/ionicons5是icon的库

Components({
  resolvers: [
    // 需要自动导入的组件
    NaiveUiResolver()
  ],
  dts: 'src/type/components.d.ts',
}),

<script setup lang="ts">
import { zhCN, zhTW, dateZhCN, dateZhTW, darkTheme, lightTheme } from 'naive-ui'
import { Sunny, Moon } from '@vicons/ionicons5'
type LocaleType = 'zhCN' | 'zhTW'
const locale = ref<LocaleType>('zhCN')
const isDark = ref(false)
const lanGopt = [
  { label: '简体中文', key: 'zhCN' },
  { label: '繁体中文', key: 'zhTW' },
]
const langList = {
  zhCN: { locale: zhCN, label: '简体中文', dataLocale: dateZhCN },
  zhTW: { locale: zhTW, label: '繁体中文', dataLocale: dateZhTW },
}
const handleSelect = (e: LocaleType) => {
  locale.value = e
}
</script>
<template>
  <NConfigProvider
    :locale="langList[locale].locale"
    :date-locale="langList[locale].dataLocale"
    :theme="isDark === true ? darkTheme : lightTheme"
  >
    <NGlobalStyle />
    <!-- vue-router占位 -->
    <router-view/>
  </NConfigProvider>
</template>
<style></style>