.eslintrc.json{env:{browser:true,es2021:true,node:true,vue/setup-compiler-macros:true},extends:[eslint:recommended,plugin:vue/vue3-recommended,plugin:typescript-eslint/recommended,plugin:prettier/recommended],parser:vue-eslint-parser,parserOptions:{ecmaVersion:latest,parser:typescript-eslint/parser,sourceType:module},plugins:[vue,typescript-eslint],rules:{vue/comment-directive:off,prettier/prettier:off,//

允许单字单词作为组件名vue/multi-word-component-names:off,typescript-eslint/no-non-null-assertion:off}}复制代码新增.prettierrc.js//

{printWidth:

.vscode/extensions.json{recommendations:[johnsoncodehk.volar]}复制代码//

.vscode/settings.json{editor.formatOnSave:true,editor.defaultFormatter:esbenp.prettier-vscode,editor.codeActionsOnSave:{source.fixAll:true},vetur.format.enable:true,vetur.validation.script:false,vetur.validation.style:false,vetur.validation.template:false}复制代码配置

lint

scripts:{dev:vite,build:vue-tsc

--noEmit

./**/*.{vue,ts,tsx,js,jsx,css,less,scss,json,md}},

...

src/assets/styles/common/var.css

存放css变量

src/assets/styles/common/var.less

存放less变量

*/primary-color:var(--ant-primary-color,

#18a058);

src/assets/styles/common/common.less

存放公共样式

https://vitejs.dev/config/exportdefaultdefineConfig({plugins:

[vue()],resolve:

/assets/styles/common/var.less;,javascriptEnabled:

true,},},},

tsconfig.node.json{compilerOptions:{composite:true,module:esnext,moduleResolution:node,allowSyn***ticDefaultImports:true},include:[vite.config.ts]}复制代码在

App.vue

https://vuejs.org/api/sfc-script-setup.html#script-setup

import

url(/assets/styles/common/var.css);

import

url(/assets/styles/common/common.less);

/style

src/components/ThemeSetting.vue

script

{document.documentElement.style.setProperty(--ant-primary-color,color);},};},methods:

{handleChange(color:

color;this.setColor(this.color);},},

});

app.config.globalProperties.$message

message;

importComponentsfromunplugin-vue-components/vite;

import

fromunplugin-vue-components/resolvers;functionresolve(url:

string):

}exportdefaultdefineConfig({plugins:

[vue(),//

url(ant-design-vue/dist/antd.variable.less);

import

url(/assets/styles/common/var.css);

import

url(/assets/styles/common/common.less);

/style

{document.documentElement.style.setProperty(--ant-primary-color,color);ConfigProvider.config({***me:

{primaryColor: