使用Vue开发Chrome扩展

时间:2020-5-29 作者:admin

使用Vue开发Chrome插件的模板

最近看了一些Chrome 插件开发的内容, 想要使用Vue的单文件来编写,但是没有现成的webpack打包方式,自己写了一个,第一次自己编写webpack的配置文件。github

目录结构

  1. │ .babelrc.js
  2. │ .gitignore
  3. │ package-lock.json
  4. │ package.json
  5. │ webpack.config.js
  6. ├─src
  7. │ │ manifest.json
  8. │ │
  9. │ ├─background
  10. │ │ background.js
  11. │ │
  12. │ ├─content
  13. │ │ content.js
  14. │ │
  15. │ ├─option
  16. │ │ App.vue
  17. │ │ option.html
  18. │ │ option.js
  19. │ │
  20. │ └─popup
  21. │ App.vue
  22. │ popup.html
  23. │ popup.js
  24. └─static
  25. └─img
  26. icon.png
  27. 复制代码

 

目前模板支持

  • vue 模板解析
  • es6语法转换
  • 图片打包
  • 字体打包

使用

  1. ## 安装依赖
  2. npm install
  3. ## 打包
  4. npm build
  5. ## 开发
  6. npm run watch
  7. 复制代码

 

 

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。