Code Monkey home page Code Monkey logo

tampermonkey-vue's Introduction

Tampermonkey-Vue

使用 Vue 3.0 + Antd-Design-Vue 开发油猴插件(Tampermonkey)。

如果需要使用 Vue 2.0 + Eelement-UI 请使用vue2.0分支。

安装Tampermonkey插件

请在浏览器安装Tampermonkey插件。

安装Tampermonkey插件后,可以点击插件选择添加新脚本,然后复制粘贴当前项目下dist/tampermonkey-vue.user.js的代码,Ctrl+S保存后,刷新浏览器即可预览效果。

配置

本地开发

本地开发支持热更新,启动:

npm run dev

然后在浏览器访问:

http://localhost:8080/

web dev preview

可以在.env.dev进行开发环境的配置

// 插件运行环境
TAMPERMONKEY_APP_ENVIRONMENT=development
// 插件名称
TAMPERMONKEY_APP_NAME=TamperMonkey-Vue-Dev
// 插件打包生成的文件,Tampermonkey插件的入口文件,注意格式应该为:*.user.js
TAMPERMONKEY_ENTRY_FILE=tampermonkey-vue.user.js

打包发布

npm run build

可以在.env进行生产环境的配置,插件的版本号使用的是package.jsonversion版本号。

// 插件运行环境
TAMPERMONKEY_APP_ENVIRONMENT=production
// 插件名称
TAMPERMONKEY_APP_NAME=TamperMonkey-Vue
// 插件打包生成的文件,Tampermonkey插件的入口文件,注意格式应该为:*.user.js
TAMPERMONKEY_ENTRY_FILE=tampermonkey-vue.user.js

打包完成后,在dist目录下会生成tampermonkey-vue.user.js文件,把该文件里的代码复制到Tampermonkey编辑器即可运行。

build script tempermonkey editor

Tampermonkey配置

可以在tampermonkey.js文件,配置Tampermonkey选项。

写在最后

Antd-Design-Vue UI框架代码会打包到脚本文件,所以体积会比较大。因此Antd-Design-Vue需要按需引入以减少脚本打包体积,可在utils/antd.js里引入需要的UI组件。

tampermonkey-vue's People

Contributors

huangxubo23 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

tampermonkey-vue's Issues

关于热更新的问题

在一些场景下,我把界面设计好之后,需要在网站上进行调试,需要在网站上进获取页面的一些数据,当我改好之后,每次都要build,然后把代码复制到Tampermonkey里面,非常的麻烦。能不能热更新之后,自动build一份,我通过// @require就可以直接引用了。

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.