使用现代技术栈

在上一节我们一起编写了第一个 Figma 主题切换插件，但是它是通过变体属性来切换的，我们需要给每个组件做一亮一暗两个变体，这太麻烦了。今天，我们来优化一下这个插件，通过样式来切换主题，这样我们只需要一亮一暗两套样式就可以了。创建好一亮一暗两套样式后，我们让插件根据样式名自动替换样式，比如将 Light/Text 换成 Dark/Text。

顺便一提，今天我们将使用一个更加现代化的前端框架 Vue 来编写这个插件，因为它是组件式的，后期维护起来会更加容易。

搭建项目脚手架

Vue 并不能直接被浏览器识别运行，所以我们需要一些额外的东西把它转换为浏览器可以识别运行的 HTML、JS 和 CSS，这个东西就是现代化的前端脚手架。如今我们写前端项目早已经不是新建几个 HTML、JS 或 CSS 文件就完事了，而是需要一个完整的脚手架来编译运行代码。

💡 以下操作皆是针对 macOS 的，Windows 用户需要自行查阅相关资料。

下面我将简单介绍一下如何搭建这个项目的脚手架，如果你不明白也没关系，先跟着做就可以了。一般来说前端脚手架会包含下面几个东西：

• 编译器，负责将代码转换为浏览器可以识别的 HTML、JS 和 CSS，我们使用 Webpack；
• UI 框架，用于组件化搭建界面，比较流行的就是 React 和 Vue，这里我们选 Vue；
• package.json 文件，用于描述项目的基本信息和依赖项（包）；
• Node.js 环境，它是可以在操作系统中运行的 JS，它是我们项目运行的基础；
• 包管理器 npm，它上面有很多别人写的包，比如图标、UI 组件，我们可以直接引用而不必自己写。

接下来我们一起搭建这个脚手架。

安装 Node.js 和 npm

进入 Node.js 网站，直接点击下载稳定版，然后跟着步骤安装即可。可以看到，npm 是包含在内的，所以不需要额外安装。