vite+vue+tailwindcss项目配置

最近接了个外包项目，要求用tailwindcss+vue3+vite来做，配置项目的时候遇到了一些问题，这里记录一下

创建项目

终端中输入代码

npm vite create

按照提示一步步往下走
接着来安装eslint相关的插件,为了方便讲解，我们一步步来

tailwindcss

按照官网的教程

安装tailwindcss和格式化插件

pnpm i tailwindcss eslint-plugin-tailwindcss -D

初始化tailwindcss

npx tailwindcss init -p

项目下会有个tailwind.config.js文件，内容修改一下

/** @type {import('tailwindcss').Config} */
module.exports = {
	content: ["./src/**/*.vue"],
}

安装eslint和prettier和相关插件

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

prettier的配置文件，按照个人习惯配置即可

// .prettierrc
{
	"semi": true,
	"useTabs": true,
	"endOfLine": "auto"
}

eslint的配置文件,注意prettier的插件一定要放在最后面

// .eslintrc
{
	"extends": ["plugin:vue/vue3-recommended","plugin:tailwindcss/recommended","plugin:prettier/recommended"],
	"parser": "vue-eslint-parser",
	"rules": {}
}

设置vscode

vscode需要安装两个拓展，eslint和prettier

然后在项目中创建.vscode文件夹,然后在里面创建settings.json文件，内容如下

{
    "editor.codeActionsOnSave": {
        "source.fixAll": "explicit"
    }
}

按下保存键，vscode会自动保存代码