vue3+TS 项目规范与初始化

vue3+TS 项目规范与初始化

配置eslint

pnpm i eslint -D

• 解决prettier冲突 ,Vue3 环境代码插件

pnpm i -D eslint-plugin-import eslint-plugin-vue eslint-plugin-node  eslint-plugin-prettier eslint-config-prettier eslint-plugin-node @babel/eslint-parser  

• 初始化eslint 文件

// 需要在.eslintrc.cjs 文件中
module.exports = {
    env:{
        browser: true,
        es2021: true,
        node: true,
        jest: true
    },
    parser:'vue-eslint/parser',
    parserOptions:{
        ecmaVersion: 'latest',
        sourceType:'module',
        parser:"@typescript-eslint/parser",
        jsxPragma:"React",
        ecmaFeatures:{
            jsx: true
        }
    },
    extends:[
        'eslint:recommended',
        'plugin:@typescript-eslint/recommended',
        'plugin:vue/vue3-essential',
        'plugin:prettier/recommended',
    ],
    plugins:['vue','@typescript-eslint'],
    rules:{
        'no-console': process.env.NODE_ENV === 'production'? 'warn' : 'off',
        'no-debugger': process.env.NODE_ENV === 'production'? 'warn' : 'off',
        'no-var':'error',
        'no-multiple-empty-lines':['warn',{max:1}],  //不允许多个空行
        'no-unexpected-multiline': 'error', // 禁止空余多行
        'no-useless-escape':'off', // 禁止不必要的转义字符

        '@typescript-eslint/no-explicit-any': 'off',
        '@typescript-eslint/no-unused-vars': 'error',
        '@typescript-eslint/prefer-ts-expect-error':"error",
        '@typescript-eslint/no-non-null-assertion': 'off',
        '@typescript-eslint/no-namespace': 'off',
        '@typescript-eslint/semi': 'off',

        'vue/multi-word-component-names': 'off',
        'vue/script-setup-uses-vars':'error',
        'vue/no-mutating-props':'off',
        'vue/attribute/hyphenation':"off"
    }
}

配置perttier

pnpm i -D eslint-plugin-prettier prettier eslint-config-prettier

• 初始化

{
    "singleQuote":true,
    "semi":false,
    "bracketSpacing":true,
    "htmlWhitespaceSensitivity":"ignore",
    "endOfLine":"auto",
    "trailingComma":"all",
    "tabWidth":2
}

创建环境变量文件

• .env.devlopment
• .env.production
• .env.test

• 通过 import.meta.env 进行访问

svg 图标配置

pnpm i vite-plugin-svg-icons -D

• 在vite.config.ts下配置

import { createSvgIconsPlugin } from "vite-plugin-svg-icons";
export default defineConfig({
  plugins: [
  	..., // 自己配置的插件
    createSvgIconsPlugin({
      // 指定需要缓存的图标文件夹
      iconDirs: [path.resolve(process.cwd(), "src/assets/icons")],
      // 指定symbolId格式
      symbolId: "icon-[dir]-[name]",
    })
  ],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  }
});

• 在主文件main.ts引入

import 'virtual:svg-icons-register'

• 在文件中使用

// 图标大小在svg上设置,fill 表示填充颜色
<svg style="width: 30px;height: 30px;">
    <use xlink:href="#icon-[图标名字]" fill="red"></use>
</svg>

配置unocss

vue3 配置unocss

uniapp 小程序配置的例子

uniapp配置unocss