{T}

前端项目初始化实践

概述

项目初始化是工程化的第一步，涵盖 Git 身份配置、CSS 预编译器集成、样式重置方案等基础环节。本文以 Vite + Vue3 项目为背景，讲解从零搭建规范化前端项目的完整流程。

学习目标

  • 掌握 Git 全局/项目级身份配置及作者信息修正
  • 理解 Sass 在 Vite 中的零配置集成原理
  • 掌握 CSS Reset 与 Normalize 的选型和集成方式

一、Git 提交配置

1.1 身份配置

Git 要求每次提交都包含作者身份信息。未配置时会报 Author identity unknown 错误。

配置方式作用范围命令适用场景
全局配置所有项目git config --global user.name "Name"个人开发
项目级配置当前仓库git config user.name "Name"团队/开源项目
bash
# 全局配置
git config --global user.name "Your Name"
git config --global user.email "you@example.com"

# 项目级配置（进入项目目录后）
git config user.name "Project Author"
git config user.email "project@company.com"

1.2 修正已提交的作者信息

bash
# 修改最近一次提交的作者
git commit --amend --reset-author

1.3 最佳实践

场景推荐配置
个人项目全局配置，一次设置永久生效
公司项目项目级配置，使用公司邮箱
开源项目项目级配置，使用 GitHub 关联邮箱

二、CSS 预编译语言集成

2.1 Sass vs Less

对比项Sass (SCSS)Less
语法兼容 CSS 语法类 CSS 语法
功能更强大（Map、Module）够用
社区活跃维护模式
框架支持Vue/React 生态主流老项目为主

2.2 Vite 中集成 Sass

Vite 原生支持 CSS 预处理器，只需安装对应编译器：

bash
pnpm add -D sass

无需任何 Vite 配置，在组件中直接使用：

Vue SFC
<style lang="scss" scoped>
$primary: #3498db;

.container {
  padding: 1rem;

  &:hover {
    color: $primary;
  }
}
</style>

工作原理：Vite 检测 lang="scss" → 调用 Sass 编译器 → 输出标准 CSS。

2.3 全局变量注入

typescript
// vite.config.ts
export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "@/styles/variables" as *;`
      }
    }
  }
})

三、CSS Reset 与样式重置

3.1 方案对比

方案特点适用场景
CSS Reset清除所有默认样式，从零开始高度定制化设计
Normalize.css保留有用默认值，修复浏览器差异通用项目
@unocss/reset轻量现代，Tailwind 风格原子化 CSS 项目

3.2 集成方式

bash
# 方式一：normalize.css
pnpm add normalize.css

# 方式二：@unocss/reset（推荐）
pnpm add @unocss/reset
typescript
// main.ts
import '@unocss/reset/tailwind.css'
// 或
import 'normalize.css'

3.3 自定义基础样式

scss
// styles/base.scss
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: system-ui, -apple-system, sans-serif;
  line-height: 1.6;
  color: #333;
}

常见问题

Q: Vite 项目中 Sass 的 @import 和 @use 有什么区别？

@import 是旧语法，会导致全局命名空间污染；@use 是 Sass 新模块系统，提供命名空间隔离和按需加载。新项目应统一使用 @use。

Q: 为什么安装 sass 后不需要配置 Vite 插件？

Vite 内置了 CSS 预处理器支持，通过检测 <style lang="scss"> 自动调用已安装的编译器。这是 Vite "约定优于配置" 设计理念的体现。

延伸阅读