https://cursor-versions.artechai.com/?lang=zh-CN

https://blog.csdn.net/O_____V_____O/article/details/147385208

一、CSS Modules 基础认知

1.1 CSS Modules 的定义与核心目标

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

其核心目标包括：

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

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 后才能运行，其核心价值是提升样式开发的效率和可维护性。

一、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 缩进语法仅在少数场景中使用。

一、JS模块化编程背景

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

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

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

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

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

vue-cli3/cli4

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

一、配置打包文件目录

module.exports = {
	// 静态资源访问路径 （默认/，打包后会白屏）
    publicPath: './', 
    // 打包后文件的目录 （默认为dist）
    outputDir: 'dist', 
    // 静态资源(js、css、img、fonts)目录 （默认为''，没有单独目录，在根目录中）
    assetsDir: 'static', 
}

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命令

一、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.变量名 访问。

浅谈NPM依赖治理

深度清洁：使用npm prune命令优化你的Node.js项目