从 0 到 1 搭建 Vue 前端工程框架 | 第二篇（3）：引入CSS框架

前言

上一篇配置了eslint规范和css规范，接下来引入tailwindcss库。

6、引入tailwindcss框架

安装tailwindcss插件。

pnpm add -g tailwindcss@^3.3.2

新建tailwind.config.cjs文件。

// tailwind.config.cjs
module.exports = {
  corePlugins: {
    preflight: false, // 禁止tailwindcss的默认属性
  },
  // content里面配置的是项目中需要解析的html和js以及vue等文件
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
};

在postcss.config.cjs里面添加下面代码。

// postcss.config.cjs
module.exports = {
  plugins: {
    autoprefixer: {},
    tailwindcss: {},
  },
};

接着新建src/style文件夹，里面新建tailwind.scss。

// tailwind.scss
@tailwind base;
@tailwind components;
@tailwind utilities;

在main.ts第一行引入，最好是第一行。

// main.ts
import './style/tailwind.scss';

接下来可以就可以使用tailwindcss的样式了，如果安装了之前篇章里推荐的插件，会有对应的提示。

7、配置tsconfig.json文件

pnpm创建项目时会给我们生成几个tsconfig开头的文件，看着不太舒服，重新配置一下。

// tsconfig.json
{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "isolatedModules": true,
    "strict": true,
    "noLib": false,
    "forceConsistentCasingInFileNames": true,
    "allowSyntheticDefaultImports": true,
    "strictFunctionTypes": false,
    "jsx": "preserve",
    "jsxImportSource": "vue",
    "baseUrl": ".",
    "allowJs": true,
    "sourceMap": true,
    "esModuleInterop": true,
    "resolveJsonModule": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "experimentalDecorators": true,
    "lib": ["dom", "esnext"],
    "noImplicitAny": false,
    "skipLibCheck": true,
    "types": ["vite/client"],
    "removeComments": true,
    "paths": {
      "/@/*": ["src/*"],
      "/#/*": ["types/*"]
    }
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "types/**/*.d.ts",
    "types/**/*.ts",
    "build/**/*.ts",
    "build/**/*.d.ts",
    "mock/**/*.ts",
    "vite.config.ts"
  ],
  "exclude": ["node_modules", "tests/server/**/*.ts", "dist", "**/*.js"]
}

此时可以删除其他tsconfig开头的文件，记得重启一下编译器。

结语

至此，规范类的基本上就配置的差不多了，下面就该配置一下git提交的部分了，husky、czg、CHANGELOG之类的。未完待续... 如果想查看完整代码，可以去我的github仓库：hp-vue-ui，有兴趣可以点个star支持一下。