Windows下基于vue框架的UXP插件开发环境搭建及程序试运行

从PS2021（v22）开始，Adobe官方引入了新的插件平台：UXP，它的最终任务是取代现有的CEP，所以赶紧来提前做一下准备吧，我对这方面也一直很感兴趣，但是这方面的中文资料太少了，然后在网上查了一些资料和看官方文档，然后搭建环境试运行成功，今天特意把这些过程进行整理，作为自己的备忘，如果能顺便帮助到你，也希望给我点个赞！下面进入正题（如果有web前端开发经验，配置及开发起来会更顺利）：

1、我的系统及软件配置环境：正版Windows11（如果你是mac，下面的配置方法也类似，只是命令行不同）、正版PS2023(V24.2)、UXP Developer Tool、vscode

2、所需工具，下载进行安装：yarn：Yarn (yarnpkg.com)、node.js：Node.js (nodejs.org)

3、node.js版本不要选太高，在使用yarn时会报错，在后续如果报错：

则降低node.js的版本即可，如果你想用最新版node.js那么你就去用它自带的npm，另一个事是node.js选择大版本号为偶数的版本更稳定

4、到github上下载官方给的例子：AdobeDocs/uxp-photoshop-plugin-samples: UXP Plugin samples for Photoshop 22 and higher. (github.com)

5、进入到官方给的案例，我们选一个进行测试，这里我选择的是这个：ui-vue-starter

6、以管理员身份运行cmd，并在命令行下进入到第5步里面的文件夹，显示如图：

然后在命令行下依次运行：yarn install、yarn build（这两个命令换用rpm也行），安装依赖和进行编译，之后会生成一个新文件夹：dist

7、把PS打开，在首选项里勾选如图：

然后重启PS

8、打开UXP Developer Tool增加插件：

9、然后选择第6步里面提到的dist文件夹，并打开这个文件：manifest.json

然后界面如下： 10、然后在右边那三个点里面选择load，此时插件试运行成功，如下图：

官方的案例原版是英文的，然后我改过源文件为中文后进行了编译，所以这里显示是中文的

11、如果你再次改源文件，那么需要在右边三个点里选择reload，如果你不想每次改了代码后都重新build和reload，那么你可以在命令行yarn watch后，然后在三个点里选watch，此时你改了代码后，它会监听你的代码并自动编译和实时更新插件最后的效果

12、此时就可以开始在官方的例子框架下去查官方API文档进行开发插件了（javascript+html+css的子集，Adobe官方自己写的一个引擎），开发好后，在三个点里面选

即可对开放完毕的插件进行打包

备注：如果打不开github，需要配置一下自己的hosts文件，具体的方法可以自己百度一下。

Windows下基于vue框架的UXP插件开发环境搭建及程序试运行相关推荐

Win10环境下基于Hexo的静态博客环境搭建，及其阿里云部署
引言 1.为什么要搭建自己的个人博客工作和学习过程中,我们经常遇到一些这样或那样的问题,此时我们可能会在网上找到相应的解决方法.但是过了一段时间之后,当我们再次碰到类似的问题时,早已忘记以前是怎么解 ...
Windows下React Native开发01 -- Android开发环境搭建
1.安装jdk 推荐将JDK的bin目录加入系统PATH环境变量(自己百度下怎么配置). 2.安装SDK 直接安装 Android Studio 推荐从AndroidDevTools下载.(也可以直 ...
基于vue框架下使用Element-UI获取文件MD5值并上传
基于vue框架下使用Element-UI获取文件MD5值并上传使用插件: spark-md5 .vue页面 <el-uploadclass="avatar-uploader idca ...
SSM+基于Vue框架的在线投票系统的设计与实现毕业设计-附源码221604
基于Vue框架的在线投票系统的设计与实现摘要 21世纪时信息化的时代,几乎任何一个行业都离不开计算机,将计算机运用于在线投票系统也是十分常见的.过去使用手工的管理方式对在线投票系统进行管理,造成了 ...
SSM+基于Vue框架的在线投票系统的设计与实现毕业设计-附源码
基于Vue框架的在线投票系统的设计与实现摘要 21世纪时信息化的时代,几乎任何一个行业都离不开计算机,将计算机运用于在线投票系统也是十分常见的.过去使用手工的管理方式对在线投票系统进行管理,造成了 ...
Springboot+mysql+基于VUE框架的商城综合项目设计与实现毕业设计-附源码111612
基于VUE框架的商城综合项目设计与实现摘要随着科学技术的飞速发展,社会的方方面面.各行各业都在努力与现代的先进技术接轨,通过科技手段来提高自身的优势,商城综合项目当然也不能排除在外.商城综合项目 ...
（附源码）Springboot+mysql+基于VUE框架的商城综合项目设计与实现毕业设计111612
基于VUE框架的商城综合项目设计与实现摘要随着科学技术的飞速发展,社会的方方面面.各行各业都在努力与现代的先进技术接轨,通过科技手段来提高自身的优势,商城综合项目当然也不能排除在外.商城综合项目 ...
springboot基于VUE框架的商城综合项目设计与实现毕业设计源码111612
基于VUE框架的商城综合项目设计与实现摘要随着科学技术的飞速发展,社会的方方面面.各行各业都在努力与现代的先进技术接轨,通过科技手段来提高自身的优势,商城综合项目当然也不能排除在外.商城综合项 ...
springboot基于VUE框架的商城综合项目设计与实现毕业设计源码
基于VUE框架的商城综合项目设计与实现摘要随着科学技术的飞速发展,社会的方方面面.各行各业都在努力与现代的先进技术接轨,通过科技手段来提高自身的优势,商城综合项目当然也不能排除在外.商城综合项 ...

Windows下基于vue框架的UXP插件开发环境搭建及程序试运行

Windows下基于vue框架的UXP插件开发环境搭建及程序试运行相关推荐

最新文章

热门文章