vue3 + vite

项目搭建

vite模板https://github.com/vitejs/awesome-vite#templates请求

axios

路由

vue-router

状态

pinia

vite.config配置

   别名配置 

安装 @types/node

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
const resolve = (dir: string) => path.join(__dirname, dir)

// https://vitejs.dev/config/
export default defineConfig({
	plugins: [vue()],
	resolve: {
		alias: {
			'@': resolve('src')
		}
	}
})

添加 css 预处理器 sass

npm install -D sass sass-loader

获取 .env 配置的环境变量 

 

添加env环境变量文件, import.meta.env获取声明变量

// .env.development
// 声明变量
VITE_GLOBAL_REPLACE=true

//其他文件获取
import.meta.env.VITE_GLOBAL_REPLACE

 vite.config.ts 添加env配置文件目录   envDir: './env', 

 return defineConfig({
        plugins: [vue()],
        envDir: './env',
        resolve: {
            alias: {
                '@': resolve('src')
            }
        },
       ...
    })

添加全局 TS 类型声明 types/global.d.ts

declare global {

  export interface ViteEnv {
    VITE_ENV_NAME: string
  }
}

修改 tsconfig.json 配置项 typeRoots 和 include

{
  compilerOptions:{
    ...
     "typeRoots": ["./node_modules/@types/", "./types"],// 声明文件目录，默认时node_modules/@types
     "include": [
      "src/**/*.ts",
      "src/**/*.d.ts",
      "src/**/*.tsx",
      "src/**/*.vue", 
      "mock/**/*.ts",
      "types/**/*.d.ts",
      "types/**/*.ts",
    ]
  }
}

eslint

eslinthttps://juejin.cn/post/7022248381095510030

依赖 

npm install --save-dev --save-exact prettier

npm install --save-dev eslint eslint-plugin-vue eslint-config-prettier

npm install @typescript-eslint/parser
 

文件配置

module.exports = {
    env: { browser: true, es2021: true, node: true },
    extends: [ 
        // 应用哪种eslint规范
        'standard',
        'prettier',
        'plugin:vue/vue3-essential',
        'plugin:vue/vue3-recommended',
        'plugin:vue/vue3-strongly-recommended'
    ],
    parserOptions: {
        ecmaVersion: 12,
        parser: '@typescript-eslint/parser',
        sourceType: 'module'
    },
    plugins: ['vue'],
    // 部分自定义规则
    rules: {
        'no-console': process.env.NODE_ENV === 'production' ? 'off' : 'error',
        'no-debugger': process.env.NODE_ENV === 'production' ? 'off' : 'error',
        'vue/max-attributes-per-line': 'off',
        'vue/html-closing-bracket-newline': 'off',
        'vue/html-closing-bracket-spacing': [
            'error',
            {
                startTag: 'never',
                endTag: 'never',
                selfClosingTag: 'always'
            }
        ]
    },
    // 全局文件声明
    globals: {
        COperationRow: 'readonly',
        Store: 'readonly',
        CAutoForm: 'readonly',
        HRRouter: 'readonly',
        NodeJS: 'readonly',
        IResponse: 'readonly',
        CSvgIcon: 'readonly',
        CStatusTabs: 'readonly',
        IWSMessage: 'readonly',
        IResponseList: 'readonly',
        ICustomAddType: 'readonly',
        IDragAndDropTarget: 'readonly',
        IRouteMeta: 'readonly',
        dayjs: 'readonly',
        ICustomExcludeType: 'readonly',
        Columns: 'readonly',
        cordova: 'readonly',
        Nullable: 'readonly',
        ElRef: 'readonly',
        ComponentRef: 'readonly',
        Recordable: 'readonly',
        EmitType: 'readonly',
        Fn: 'readonly',
        defineProps: 'readonly'
    }
}