使用Vue开发Chrome扩展

使用Vue开发Chrome插件的模板

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

目录结构

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

 

目前模板支持

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

使用

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