如何用ts搭建一个vue3通用项目底座 | 第二篇（3）：引入CSS框架

我血条呢

已于 2024-08-28 16:43:50 修改

阅读量221

点赞数 7

分类专栏：前端通用系统模板文章标签：前端 css vue-cli3 typescript 前端框架

于 2024-08-27 15:09:29 首次发布

本文链接：https://blog.csdn.net/pasco152/article/details/141602324

版权

前端通用系统模板专栏收录该内容

11 篇文章 1 订阅

订阅专栏

前言

上一篇配置了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"]
}