第2章：定制化高可用前台样式

原创于 2025-09-20 09:29:21 发布 · 237 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#vue-front

当我们编写一个项目的时候，我们需要同一个样式，如色值。但是我们在编写的时候我们需要编写大量的className，来编写css样式。而且因为css和html分离，我们进行查看的时候总是十分不方便。以及在响应式、主题切换实现十分复杂。

基于以上原因，我们引出了tailwindcss：https://tailwindcss.com/docs/installation/using-vite。一个css可视化工具。

安装tailwindcss

安装命令： npm install -D tailwindcss@3.0.23 postcss@8.4.8 autoprefixer@10.4.2

安装完成后，我们可以使用npx tailwindcss init -p，执行完成后，在项目根目录下会生成tailwind.config.css。

编写以下内容，表示tailwindcss可以用于到此路径

module.exports = {
  //tailwind可以应用的地方
  content: ['./index.html','./src/**/*.{vue,js}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

content就是来编写可以使用的路径。

在src/index.scss里面引入tailwind基础模块

//导入 tailwind 的基础指令组件
@tailwind base;
@tailwind components;
@tailwind utilities;

在main.js里面引入此样式

import { createApp } from 'vue'
import App from './App.vue'
import './styles/index.scss'

createApp(App).mount('#app')

安装sass：npm i -D sass@1.45.0

出现以上页面表示tailwindcss安装成功。

tailwind设计理念

颗粒度自上而下组件增大，颗粒度越大则约束性越高，可定制性越弱

行内样式：样式全部写入行内。自由度最高，可定制化最强。但是不方便样式的复用。每次都要写整的样式。
原子化css：每个类名都代表了一个css属性。自由度依然很强，可定制化依然很高，也方便复用。但是大量的样式会造成大量的类名。
传统形式：通过好几个语义化的class来描述一段css。封装性强，语义化强。自由度和可定制化性一般（比如cart标记好一个卡片但是其边框，弧度，阴影都规定好了）。但是大量的html需要大量的语义化class。
组件形式：在组件库中极其常见。封装性极强（样式和功能都封装了），语言化强。但是自由度和可定制化较差。

而我们的tailwindcss就是使用了原子化css里面给我们封装了类以便我们使用。

代码样式统一工具Prettier

安装prettier

在项目的根目录下创建.prettierrc文件，并配置以下内容

{
    // 代码结尾不加分号
    "semi": false,
    // 优先单引号
    "singleQuote": true,
    // 不添加尾随逗号
    "trailingComma": "none"
}

配置格式代码，鼠标右键点击使用格式化文件

安装tailwindcss插件

项目的基本目录结构

我们需要先安装vue-router和vuex：npm i -save vuex@4.0.2 vue-router@4.0.14

src
├─ App.vue// 项目根组件，一级路由出口
├─ api // 接口请求
├─ assets // 静态资源
│ ├─ icons //svg icon 图标
│ ├─ images //image 图标。比如: xxx.png
│ └─ logo.png//logo
├─ components // 通用的业务组件。比如：一个组件在多个页面中使用到
├─ constants // 常量
├─ directives // 自定义指令
├─ libs // 通用组件，可用于构建中台物料库或通用组件库
├─ main.js// 入口文件
├─ permission.js// 页面权限控制中心
├─ router // 路由
│ ├─ index.js// 路由处理中心
│ └─ modules // 路由模块
│ ├─ mobile-routes.js// 移动端路由
│ └─ pc-routes.js// PC 端路由
├─ store // 全局状态
│ ├─ getters.js// 全局状态访问处理
│ ├─ index.js// 全局状态中心
│ └─ modules // 状态子模块
├─ styles // 全局样式
│ └─ index.scss// 全局通用的样式处理
├─ utils // 工具模块
├─ vendor // 外部供应商资源。比如：人类行为认证
└─ views // 页面组件，与 components 的区别在于：此处组件对应路由由表，以页面的形式展示
└─ layout // 用于 PC 端，分割一级路由和二级路由
├─ components // 该页面组件下的业务组件
└─ index.vue//layout 组件
tailwind.config.js//tailwind css 配置文件，与 src 平级
vite.config.js//vite 配置文件，与 src 平级