跳至主要內容

 
 
 
成功在于你以热情投入你所做之事。
Success comes when you commit to to do what you do with passion.
CSS Modules

一、CSS Modules 基础认知

1.1 CSS Modules 的定义与核心目标

CSS Modules 是一种通过构建工具（如 Webpack、Vite 等）实现的 CSS 模块化方案，其核心是将 CSS 文件视为独立的“模块”——每个 CSS 文件中的类名、动画等样式规则默认具有局部作用域，且可通过导入导出机制与 JavaScript 组件关联使用。

其核心目标包括：

  • 解决传统 CSS 的全局作用域污染问题，实现组件级别的样式隔离；
  • 消除类名命名冲突（尤其在大型项目或多人协作场景中）；
  • 建立 CSS 与组件的强关联，提升样式的可维护性和可追踪性；
  • 提供模块化的样式复用机制，平衡样式封装与重用需求。
atodo2025/10/10大约 44 分钟前端前端CSS
SCSS

1. SCSS基础概念与核心认知

1.1 什么是 SCSS 与 CSS 预处理器

1.1.1 SCSS 的定义与定位

SCSS（Sassy CSS）是 Sass（Syntactically Awesome Stylesheets）的一种语法扩展，属于 CSS 预处理器的核心成员。

  • 语法定位：SCSS 诞生于 Sass 3 版本，是为了兼容 CSS 语法而设计的“类 CSS 语法”形式（另一种 Sass 语法为缩进式，无大括号和分号）。它完全兼容 CSS3 语法，开发者可以直接在 SCSS 中编写原生 CSS 代码，降低了学习和迁移成本。
  • 核心特性：作为 CSS 预处理器，SCSS 扩展了 CSS 的功能，引入了变量、嵌套、继承、混合（Mixin）、函数、流程控制等编程特性，让样式编写更接近“编程语言”的逻辑，而非单纯的“标记语言”。
  • 本质作用：SCSS 本身不能直接被浏览器解析，需要通过编译器（如 Dart Sass、Node Sass、 Ruby Sass）转换为原生 CSS 后才能运行，其核心价值是提升样式开发的效率和可维护性。
atodo2025/10/10大约 65 分钟前端前端CSS
Sass

一、Sass 与 SCSS 基础概念

1.1 历史渊源与核心关系

  • Sass 的起源：2006 年由 Hampton Catlin 首次发布，最初设计目标是解决 CSS 原生语法的冗余性和可维护性问题。其采用缩进式语法（无大括号、分号），灵感源自 Ruby 等语言的简洁风格，是最早的 CSS 预处理器之一。
  • SCSS 的诞生：2010 年 Sass 推出第三代版本，命名为 "Sassy CSS"（简称 SCSS）。由于早期 Sass 的缩进语法对习惯 CSS 大括号风格的开发者不够友好，SCSS 回归类 CSS 语法（保留大括号和分号），同时继承 Sass 的所有功能，成为 Sass 的主流语法。
  • 核心关联：SCSS 并非独立于 Sass 的新语言，而是 Sass 的语法扩展，完全兼容原生 CSS。这意味着任何 valid 的 CSS 代码都可以直接作为 SCSS 代码运行，极大降低了 CSS 开发者的学习和迁移成本。目前行业中 85% 以上的项目使用 SCSS，Sass 缩进语法仅在少数场景中使用。
atodo2025/10/10大约 18 分钟前端前端CSS
JS模块化编程

一、JS模块化编程背景

计算机语言编程中，模块化编程对架构设计、代码复用起到至关重要的作用，工程中引入他人写好的库和模块能大大缩减开发周期。C/C++中，可以用include关键字，Java中可以用import关键字。

模块化编程是一种软件设计技术，强调将程序的功能分为独立的、可互换的模块，以使每个模块都包含执行所需功能的一个方面所必需的一切。模块接口表示该模块需要的元素和提供的元素。模块化程序设计与结构化程序设计、面向对象程序设计密切相关，目标都是通过分解成较小的部分来促进大型软件程序和系统的构建。

atodo2025/10/10大约 10 分钟前端前端JS
Vue CLI

Vue CLI（Vue Command Line Interface），是一个用于快速搭建项目的工具，用于基于Vue.js进行快速开发。

  • 提供了标准化的项目结构**，帮助开发者快速搭建项目框架；**
  • 支持插件体系**，允许在项目中灵活添加功能；**
  • 简化了Vue.js开发的配置和构建过程，集成了开发环境，简化了开发过程。

具体提供的一系列功能包括：

atodo2025/10/10大约 5 分钟前端前端VUE
Vue打包

vue-cli3/cli4

项目打包（webpack）配置文件为项目根路径下创建的vue.config.js文件。

一、配置打包文件目录

module.exports = {
	// 静态资源访问路径 （默认/，打包后会白屏）
    publicPath: './', 
    // 打包后文件的目录 （默认为dist）
    outputDir: 'dist', 
    // 静态资源(js、css、img、fonts)目录 （默认为''，没有单独目录，在根目录中）
    assetsDir: 'static', 
}
atodo2025/10/10大约 2 分钟前端前端VUE
Vue脚手架
  1. vue-cli2只能利用vue init webpack app命令初始化vue2.x的项目。
  2. vue-cli3至vue-cli4.5之间,可以利用vue create app初始化vue2.x的项目，不能初始化vue3.x，因为vue-cli4.5以上对应的才是vue3。
  3. vue-cli4.5以上，可以利用vue create app初始化vue2.x或者vue3.x的项目，两者都可以在初始化时，自行选择。

一、vue-cli命令

atodo2025/10/10大约 3 分钟前端前端VUE
Vue配置：环境变量

一、process.env 与核心环境变量基础概念

1.1 process.env 的定义与本质

process.env 是 Node.js 运行时提供的一个全局环境对象，其本质是存储当前系统环境变量信息的键值对集合。

  • 核心特性：

    • 属于 Node.js 原生 API，仅在 Node.js 环境（如项目构建过程、后端服务）中可直接访问，浏览器环境本身不内置此对象。
    • 包含系统级环境变量（如操作系统的 PATH、用户信息等）和项目自定义环境变量（如通过 .env 文件配置的变量）。

  • 访问方式：

    • 在 Node.js 终端中，可直接输入 node 进入交互模式，再输入 process.env 查看所有环境变量；也可通过 process.env.变量名 单独获取某个变量（如 process.env.PATH）。
    • 在 Vue 项目中，通过 webpack 的 DefinePlugin 插件（Vue CLI 自动集成），部分变量（如 NODE_ENV、VUE_APP_* 前缀变量）会被注入到客户端代码中，因此在前端 JS/Vue 组件中可直接通过 process.env.变量名 访问。
atodo2025/10/10大约 37 分钟前端前端VUE