# vue-qcp

**Repository Path**: coder128/vue-qcp

## Basic Information

- **Project Name**: vue-qcp
- **Description**: 快速开发浏览器插件，基于vue + webpack
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-01-06
- **Last Updated**: 2023-05-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: TypeScript, Vue, webpack

## README

# Vue Quick Chrome Plugin
> 用于构建浏览器插件，使用vue2的框架进行插件项目开发

## 安装
> 安装方式非常简单，只需要
```shell
npm install
```
## 编译
> 这个项目基于webpack开发，可以使用webpack专属的webpack-cli进行打包
```shell
npx vbc
```
> 以监听模式打包
```shell
npx vbc -w
```
> 也可以使用编程的方式进行开发，这点可以参考webpack的官网 [https://webpack.js.org/api/node/](https://webpack.js.org/api/node/)

## 目录介绍
> 介绍文件夹相关的文件夹
```tree
        src                   资源目录
        ├─ assets             
        │  └─ test.txt        
        ├─ boot               启动文件
        │  ├─ index.ts        
        │  └─ options.ts      
        ├─ chrome             chrome插件相关配置
        │  ├─ background.ts   
        │  └─ manifest.json   
        ├─ helpers            帮助文件
        │  ├─ shims-tsx.d.ts  
        │  └─ shims-vue.d.ts  
        ├─ pages              页面文件
        │  ├─ home            
        │  │  └─ Index.vue    
        │  └─ options         
        │     └─ Index.vue    
        ├─ router             路由文件
        │  ├─ index.ts        
        │  └─ options.ts      
        ├─ store              
        │  └─ index.ts        
        ├─ template           模板文件
        │  ├─ index.html      
        ├─ app.ts             应用工具和注入口文件
        └─ App.vue            应用根节点
```


## 运行
> 1. 把打包后编译的目录压缩成``zip``之后打开chrome - 扩展设置，直接拖动上去即可，必须打开开发者模式
> 2. 打开开发者模式后，选择加载本地解压的文件夹，选择编译目录即可