接上一篇
3、别名配置
@
代替./src
@components
代替./src/components
在 Vite 中, '__dirname' 并不是一个全局变量,所以在vite.config.ts 文件中无法直接使用。
安装依赖
npm install --save-dev @types/node
vite.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-weapp
vite.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-weapp
presetWeapp({ prefix }),
// attributify autocomplete
presetWeappAttributify()
],
shortcuts: [
{
"uno-center": "uno-flex uno-justify-center uno-items-center"
}
],
transformers: [
// https://github.com/MellowCo/unocss-preset-weapp/tree/main/src/transformer/transformerAttributify
transformerAttributify(),
// https://github.com/MellowCo/unocss-preset-weapp/tree/main/src/transformer/transformerClass
transformerClass()
]
})
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