接上一篇
3、别名配置
@代替./src@components代替./src/components
在 Vite 中， '__dirname' 并不是一个全局变量，所以在vite.config.ts 文件中无法直接使用。
安装依赖
npm install --save-dev @types/nodevite.config.ts配置
// vite.config.ts
import { defineConfig } from 'vite';
import { resolve } from 'path';export default defineConfig({resolve: {alias: {'@': resolve(__dirname, './src'),'@components': resolve(__dirname, './src/components')}}
});4、原子化css
安装unocss
npm i -D unocss
npm i -D unocss-preset-weappvite.config.ts中配置
import Unocss from "unocss/vite"
plugins: [uni(),Unocss(),
]main.ts
import "uno.css"创建unocss.config.ts
增加前缀uno-
import presetWeapp from "unocss-preset-weapp";
import { extractorAttributify, transformerClass } from "unocss-preset-weapp/transformer";
import { defineConfig } from "unocss";
// 可以写属性会自动增加class,也可以写class
const prefix = "uno-";
const { presetWeappAttributify, transformerAttributify } = extractorAttributify({ classPrefix: prefix });export default defineConfig({presets: [// https://github.com/MellowCo/unocss-preset-weapppresetWeapp({ prefix }),// attributify autocompletepresetWeappAttributify()],shortcuts: [{"uno-center": "uno-flex uno-justify-center uno-items-center"}],transformers: [// https://github.com/MellowCo/unocss-preset-weapp/tree/main/src/transformer/transformerAttributifytransformerAttributify(),// https://github.com/MellowCo/unocss-preset-weapp/tree/main/src/transformer/transformerClasstransformerClass()]
})5、prettier
安装依赖
npm i prettier -D
根目录下创建.prettierrc.json
{"semi": false,"singleQuote": true,"trailingComma": "none","arrowParens": "avoid","jsxBracketSameLine": false,"printWidth": 80,"tabWidth": 2,"tabSize": 2
}6、eslint相关
安装依赖
npm i @vue/eslint-config-standard babel-eslint eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-standard eslint-plugin-vue eslint @babel/eslint-parser -D
添加eslint规则配置文件
在根目录下添加.eslintrc.js
module.exports = {root: true,env: {node: true},extends: ['plugin:vue/vue3-essential'],parserOptions: {parser: '@babel/eslint-parser',requireConfigFile: false},rules: {'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off','no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off','space-before-function-paren': 'off','no-unused-vars': 'warn','handle-callback-err': 'warn','vue/multi-word-component-names': 'off','vue/no-deprecated-v-bind-sync': 'off'}}在根目录下添加忽略文件 .eslintignore
*.sh
node_modules
*.md
*.woff
*.ttf
.vscode
.idea
dist
/public
/docs
.husky
.local
/bin
Dockerfile
