RipperTs / utools-plugin-template-vue2

vue2封装的utools插件开发模板

uTools插件模板

介绍

基于vue2封装的uTools插件开发模板, 用于快速开发uTools插件
本项目已全局引用element ui组件库, 以及axios, dayjs, lodash等常用库, 无需再次引用

使用

1. 克隆项目

git clone [e-mail]:RipperTs/utools-plugin-template-vue2.git

2. 安装依赖

npm install

3. 开发

# 运行开发环境
npm run serve
# 打包
npm run build
# 生成路由
npm run genmenu
# 处理svg图标
npm run svgo

自动生成路由

• 在src/views中编写vue文件后,使用npm run genmenu命令,会自动生成路由配置文件src/router.js
• 路由配置文件中的name属性,会自动读取vue文件中的顶部注解
• 如果你想要声明一个/路由,那么文件名必须为home.vue

svg图标及使用

• 在src/assets/icons/svg中放置svg图标
• 使用npm run svgo命令,会自动压缩并处理透明svg图标
• 在要使用svg图标的vue文件中,使用<svg-icon icon-class="xxx"></svg-icon>即可 (更多属性请自行参考查看组件)

在uTools开发者工具中使用

• 选择data目录中的plugin.json文件
• 运行npm run build命令,来生成打包后的文件目录
• 在uTools开发者工具中点击开始运行按钮,即可在uTools中使用

preload.js开发注意

• preload.js官方文档说明
• 如果需要使用node模块,请在preload.js中引入,并在package.json中声明
• 如果需要使用electron模块,请在preload.js中引入,并在package.json中声明
• 注意,每次更改preload.js后,都需要重新运行npm run build命令,才能在uTools开发者工具中生效
• 或者,直接替换data/dist目录中的preload.js文件,也能生效

特别说明

1. 本项目使用了vue-cli脚手架, 请确保你已经安装了vue-cli
2. 本项目使用了vue-router路由, 请确保你已经了解了vue-router的基本使用
3. 本项目使用了vuex状态管理, 请确保你已经了解了vuex的基本使用
4. 本项目使用了svg-sprite-loader处理svg图标, 请确保你已经了解了svg-sprite-loader的基本使用
5. 本项目使用了node进行文件操作, 请确保你已经安装了node
6. 本项目使用了uTools API进行开发, 请确保你已经安装了uTools,并且使用了uTools开发者工具下进行开发

相关链接

• uTools开发文档
• Lodash组件库
• Element UI
• DayJs