Salesforce Lightning Design System 安装与配置指南

最新推荐文章于 2025-06-11 09:02:33 发布

庞律庆

最新推荐文章于 2025-06-11 09:02:33 发布

阅读量429

点赞数 3

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_01138/article/details/146586308

Salesforce Lightning Design System 安装与配置指南

design-system Salesforce Lightning Design System 项目地址: https://gitcode.com/gh_mirrors/de/design-system

1. 项目基础介绍

Salesforce Lightning Design System（SLDS）是由Salesforce UX团队提供的一套UI设计系统和组件库。它旨在帮助开发者构建与Salesforce Lightning界面风格一致的应用程序。SLDS包含HTML、CSS和JavaScript组件，允许开发者快速开发出符合Salesforce设计标准的应用。

该项目主要使用的编程语言是JavaScript和SCSS。

2. 项目使用的关键技术和框架

Storybook：用于组件开发的环境，可以独立地展示组件，方便开发和测试。
Gulp：自动化构建工具，用于执行如代码检查、编译、打包等任务。
NVM（Node Version Manager）：用于管理Node.js版本的工具，确保使用正确的Node.js版本。
ESLint：用于识别和报告JavaScript代码中的模式匹配，以保持代码质量。
Stylelint：用于检查CSS代码的格式和风格。

3. 项目安装和配置的准备工作

在开始安装之前，请确保您的系统中已安装以下软件：

Node.js：推荐使用NVM安装Node.js，以方便管理不同版本的Node.js。
Git：用于克隆和操作项目代码。

详细安装步骤

克隆项目到本地：

git clone https://github.com/salesforce-ux/design-system.git
cd design-system

安装依赖：
```
npm install
```
这将安装项目所需的全部Node.js依赖。
配置Node.js环境：

根据项目中的.nvmrc文件，推荐使用Node.js v14。如果您使用NVM，可以运行以下命令设置项目的Node.js版本：
```
nvm use
```
启动Storybook开发环境：

运行以下命令启动Storybook服务器，然后您可以在浏览器中通过http://localhost:9002访问它。
```
npm start
```
执行代码检查：

使用以下命令执行代码检查：
```
npm run gulp -- lint
```
可以执行更具体的检查，例如仅检查JavaScript或SCSS。
构建项目：

当您准备构建项目时，可以使用以下命令编译Sass到CSS，并生成项目的分发版本。
```
npm run gulp -- styles
npm run build-dist
```