Advertisement

Figma-Vue3-Template：提供Vue3的Figma插件模板。

  •  5星
  •     浏览量: 0
  •     大小:None
  •      文件类型：None

简介：
Vue公司提供的3插件模板FIGMA，该模板旨在帮助您和您的运行中的Figma插件，在极短的时间内快速上手Vue 3框架。其主要特点包括：Vue 打字稿的集成，以及辅助功能，能够简化主代码与UI代码之间的通信。此外，直播服务器预览功能能够显著加快构建用户界面的速度。 要使用此模板，您可以采用最直接的方法，即直接克隆或使用该仓库。 另外，您也可以将该模板作为基础模板，为您的GitHub仓库创建模板。 具体操作步骤如下：使用 `gh repo create -p https://github.com/LukeFinch/Figma-Vue3-Template` 命令进行创建。 安装所需的依赖项：`npm i` 。 然后运行 `npm run dev` 命令后，一个名为 `dist` 的文件夹将被自动创建。 最后，在FIGMA桌面应用程序中，请选择“创建新的插件”。

全部评论 (0)

还没有任何评论哟~
客服
客服
客服关闭
  • Figma-Vue3-模板：基于Vue3的Figma插件模板
    优质
    本项目提供一个基于Vue3框架的Figma插件开发模板，旨在帮助开发者快速搭建和扩展功能丰富的Figma插件应用。 Vue公司3插件模板FIGMA 这个模板可以让你在很短的时间内使用Vue3框架来构建Figma插件。特点包括： Vue 打字稿集成消息处理的辅助功能，以简化主代码与UI代码之间的通信。直播服务器预览使构建UI更快。 要开始，请安装依赖项通过运行 `npm i` 。然后执行命令 `npm run dev` ，这将创建一个名为dist的文件夹。在Figma桌面应用程序中，点击新建插件按钮，并使用此模板来快速搭建和开发你的Vue3 Figma插件项目。 如果您想要为自己的GitHub仓库克隆这个模板，请按照以下步骤操作：使用该命令 `gh repo create --template https://github.com/LukeFinch/Figma-Vue3-Template` 创建一个新的基于此模板的仓库。
     
  • Vite-Vue3-Template：基于Vite和Vue3的项目模板
    优质
    Vite-Vue3-Template 是一个简洁高效的前端开发启动点，采用 Vite 构建工具与 Vue 3 框架，旨在快速搭建现代化 web 应用程序。 Vite-Vue3-模板是一个基于Vue 3 和 Vite 的项目模板。它结合了 TypeScript 来提供更好的开发体验。这个模板旨在帮助开发者快速搭建 Vue 3 应用程序，利用 Vite 提供的高效构建工具和开发服务器功能。
     
  • Vue3-Vite-Eslint-Prettier-Template: Vue3 Vite Eslint 美观的模板
    优质
    这是一个基于Vue3、Vite和Eslint构建的高效开发模板，集成了Prettier以保证代码风格的一致性和美观性，助力开发者快速上手项目。 vue3-vite-eslint-prettier-template：这是一个结合了Vue 3、Vite 和 ESLint 的漂亮模板。
     
  • Figma Batch Styler：批量编辑文本样式的Figma插件
    优质
    Figma Batch Styler是一款专为设计师打造的Figma插件，能够高效地进行文本样式的批量编辑和管理，极大提升设计工作的效率与灵活性。 在批处理样式器中运行 `npm install` 和 `npm run build` 命令后，在 Figma 中选择 New Plugin 并通过 Link existing from manifest.json 选项链接现有的插件文件，然后从 public/manifest.json 文件进行选择。
     
  • Vue3-Vite-Eslint-Prettier-H5-Template: Vue3 Vite Eslint和Prettier的漂亮H5模板
    优质
    这是一个基于Vue3、Vite、Eslint及Prettier构建的精美的HTML5项目模板，适合快速开发高质量的前端应用。 Vue3-Vite-Eslint-Prettier-H5-Template 是一个专门为开发现代H5页面而设计的项目模板，集成了Vue3、Vite、Eslint、Prettier等前端开发工具，旨在提供一个高效且规范化的开发环境，帮助开发者快速启动新项目。 **Vue3** 作为 Vue.js 框架的最新版本，引入了许多新的特性和性能优化功能，如 Composition API、Suspense 组件和 Teleport 等。这些特性使开发者能够更灵活地组织代码并提高项目的可维护性及开发效率。 **Vite** 是由Vue.js作者尤雨溪创建的一款新型前端构建工具，它利用了ES模块的原生加载能力来实现热更新与按需编译功能，从而显著提升了开发时的构建速度。此外，Vite 支持预渲染和插件体系结构，使得项目配置更加简洁，并提供了更好的开发体验。 **Eslint** 是一款静态代码分析工具，用于检测 JavaScript 代码中的潜在错误以及不符合编码风格的部分。通过配置规则，团队可以确保项目的代码风格统一并提高整体的代码质量。在本模板中，已经预设了一套适用于 Vue3 项目使用的 Eslint 规则。 **Prettier** 是一个自动格式化工具，能够将所有代码转换为一致的样式标准，并避免了因编码风格不一致而引发的问题。当与Eslint结合使用时，在保存文件的过程中可以即时修复一些常见的格式问题，从而保持整个项目的整洁度和一致性。 **H5** 代表的是 HTML 的最新版本——HTML5，它提供了更多的新元素及 API 支持，并增强了网页的交互性和多媒体功能。此模板专为 H5 开发设计，意味着它可以轻松创建具有丰富互动特性的现代网站页面。 在这个项目模板中包含的关键文件和目录如下： - `src` 目录：存放项目的源代码，包括组件、样式及路由配置等。 - `components` 存放自定义的 Vue 组件。 - `views` 包含各个页面视图。 - `router` 配置了Vue Router进行页面导航管理。 - `assets` 用于存储静态资源文件（如图片和字体）。 - `styles` 则是存放项目全局样式的地方。 - `public` 目录：存放项目的静态资源，例如 favicon 图标、manifest 文件等，并且会被 Vite 原封不动地复制到构建输出目录中。 - `package.json` 包含了项目依赖管理和脚本配置信息，列出了所有必要的 npm 包及其版本号。 - `.eslintrc.js` 是 Eslint 的配置文件，定义了代码检查的规则。 - `.prettierrc.js` 规定了 Prettier 的格式化风格设置。 - `vite.config.js` 用于自定义 Vite 行为的配置文件，例如服务器设置和优化选项等。 通过这个模板，开发者可以快速搭建一个符合现代前端开发规范的 Vue3 H5项目，并享受到Vite带来的高效开发体验以及Eslint与Prettier在代码质量和格式一致性方面的保障。实际使用时只需根据需求调整相应配置并添加业务逻辑即可。
     
  • HTML-Figma：一款可将HTML导入Figma图层的插件-源码
    优质
    HTML-Figma是一款专为设计师打造的插件，它能够轻松地将HTML代码转换并导入至Figma的设计文件中，极大地方便了前端开发与设计工作的衔接。该插件提供完整的源代码，便于用户进行二次开发和定制。 HTML <-> Figma插件可以将网页上的HTML内容转换为Figma设计文件或从Figma设计生成代码。 使用方法如下： 在Figma中打开一个新文档或者现有文档，然后按下 `cmd + /` 并搜索“html figma”，接着点击Enter键。输入您要导入的URL地址即可轻松获取现场样式的实际效果作为设计和原型的基础。 该插件的优点包括： - 轻松将真实网站样式导入Figma - 快速地把网页组件转化为设计元素，便于使用故事书等工具进行后续开发工作。 - 支持捕获需要身份验证或者特定状态下的页面内容 此外，还可以通过Node.js安装@builder.io/html-to-figma插件来实现从HTML到Figma的转换。例如： ```javascript import { htmlToFigma } from @builder.io/html-to-figma; const layers = htmlToFigma(document.body); ``` 以上代码可以将网页元素转为适合上传至Figma的设计图层，或者通过REST API发送给服务器端以生成.figman.json文件形式。
     
  • to-path-figma：将对象和文本转换为路径的Figma插件
    优质
    To-path-Figma是一款实用的插件，专门用于将Figma设计中的对象和文本直接转化为矢量路径，极大地提升了设计师的工作效率与创意发挥空间。 到路径：Figma插件 :sparkles:
     
  • Vue3-CV：基于Vue3的简历模板
    优质
    Vue3-CV是一款使用Vue3框架打造的专业简历制作工具，提供简洁美观的设计和灵活便捷的操作体验，帮助用户轻松创建出独具个性的职业简历。 Vue3 CV模板要求使用Vite与Vue3。安装依赖请运行`yarn install`，启动开发服务器请用`yarn run dev`。求职信内容位于模型/src/components/Home.vue中，相关数据在数据/src/data/cl.json文件内；简历信息则存于模型/src/projects/CV.vue和数据/src/data/cv.json里。
     
  • Figma Table Creator：一款简洁的Figma插件，用于生成灵活可编辑的表格
    优质
    Figma Table Creator是一款专为设计师打造的高效插件，可在Figma中轻松创建和编辑灵活多变的表格，极大提升工作效率。 表创建者可以灵活地创建和管理表格。要开始，请进入Plugins > Table Creator > Create Table，并点击Create Components。然后输入所需的列数与行数（最多50列及行），并单击“创建表”按钮。 编辑单元格文本时，只需按住CMD/CTRL键并在单元格中心双击即可。选择多个单元格的方法是：先用鼠标选中一个或几个单元格，再按住SHIFT + CMD/CTRL，并继续拖动以扩大选择范围；或者使用Plugins > Table Creator > Select Column 或 Select Row 插件来快速选择整列或整行。 调整表格大小和重新排列内容时，请首先通过上述方法选定要修改的列或行。然后运行相应的插件命令，即可对选中部分进行操作，如改变宽度、移动位置等。 此外，“Select Column” 和 “Select Row” 插件还支持整个表格尺寸的一键调节功能。