300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > Windows下基于vue框架的UXP插件开发环境搭建及程序试运行

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

时间:2021-09-03 19:57:23

相关推荐

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

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

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

2、所需工具,下载进行安装:yarn:Yarn ()、node.js:Node.js ()

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. ()

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文件,具体的方法可以自己百度一下。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。