自定义Vue组件调试

# 自定义Vue组件调试

平台在V8\.7\.0之后提供了自定义组件调试的功能，可以极大的节省开发时间，集成调试功能的方式有两种：

## 通过调试项目模板进行调试

### 1、下载项目模板

平台提供了一个集成了调试框架的项目模板，[点击下载](about:blank#qP71P)

### 2、安装依赖

在控制台运行下面的命令：

```
yarn install  
\# 或者  
npm install  
```

### 3、配置环境变量

```
# 调试环境的接口地址
VUE_APP_APIURL=""
# 调试环境的二级域名，单租户为 `00000000`
VUE_APP_SUB_DOMAIN_NAME=""
# 用户账号
VUE_APP_ACCOUNT=""
# 用户密码
VUE_APP_PASSWORD=""

```

## 组件调试

### 1、创建组件

建议把组件放在src/vue\-components目录下，每个组件搭配一个文件夹和一个json说明文件，如下图所示

![](/media/202507//1753338617.587604.png)

### 2、表单调试引入自定义组件

目前仅支持在表单调试自定义组件

```
<script>
import ComponentDemo from '../vue-components/component-demo.vue';

export default {
  data: function () {
  	return {
  		debugMode: {
        vueComponents: {
          '组件在表单的唯一标识': ComponentDemo,
        },
      },
		};
  },
}
</script>
```

注意：组件在表单的唯一标识是在表单对自定义组件生成的唯一ID，目前暂时只能在表单加载的时候调用的接口里找，如下图：

![](/media/202507//1753338617.5923645.png)

### 3、调试组件

在编写组件代码的时候可以通过在本地运行项目可以实时预览组件的效果，然后再通过debugger、console或者用 vscode 的调试功能尽情的在本地调试了。

### 4、打包组件

在package.json下的scripts字段下添加下列命令

```
{
  scripts: {
		"build:ComponentDemo": "vue-cli-service build --target lib --name ComponentDemo src/components/component-demo/component-demo.vue"
  }
}
```

其中build:ComponentDemo是命令名称，可以自定义。

命令内容的格式为vue\-cli\-service build \-\-target lib \-\-name 组件名 组件路径。

注意：组件名和json里的componentName对应的值要保持一致，关于json的使用说明请参考这里。

最后，在控制台运行下面的命令：

```
yarn build:ComponentDemo  
# 或者  
npm run build:ComponentDemo  
```

### 5、上传组件

## 集成调试框架

如果想在现有的项目里集成调试框架，可以用下面的方法。

### 1、下载调试框架并引入已有项目里

[点击下载调试框架](about:blank#qP71P)

### 2、初始化调试框架

在main.js里加入以下代码

```
// 引入调试框架的js文件
import s2Debug from '../s2-debug/index.js';
// 引入调试框架的样式文件
import '../s2-debug/index.css';

Vue.use(s2Debug, {
  apiURL: '', // 调试环境的接口地址
  subDomain: '', // 调试环境的二级域名，单租户为 `00000000`
  account: '', // 调试环境的账号
  password: '', // 调试环境账号的密码
});

```

### 3、添加路由前置的控制代码

```
router.beforeEach((to, form, next) => {
    if (Vue.prototype.$s2DebugLogin) {
        next();
        return;
    }

const interval = setInterval(() => {
        if (Vue.prototype.$s2DebugLogin) {
            next();
            clearInterval(interval);
        }
    }, 500);
});

```

到这里集成就完成了，可以开始组件开发了。

## 资源下载

### V1\.0\.3 (V8\.7\.0\)

调试项目模板：[📎s2\-vue\-debug.1\.0\.3\.zip.doc](https://zhouju.yuque.com/attachments/yuque/0/2023/doc/342231/1692883686902-4556321e-3a69-4657-88ee-9e95c97d4a50.doc)

调试框架：[📎s2\-debug.1\.0\.3\.zip.doc](https://zhouju.yuque.com/attachments/yuque/0/2023/doc/342231/1692883687142-8a332872-a8fd-446c-80f4-59cb68c7afcc.doc)

### V1\.0\.2 (V8\.7\.0\)

调试项目模板：[📎s2\-vue\-debug.1\.0\.2\.zip.doc](https://zhouju.yuque.com/attachments/yuque/0/2023/doc/342231/1692883687287-65f42369-44cb-487f-99be-d1c2ea89d33d.doc)

调试框架：[📎s2\-debug.1\.0\.2\.zip.doc](https://zhouju.yuque.com/attachments/yuque/0/2023/doc/342231/1692883687508-ee14e5f5-b3c1-43c3-898e-cb74b2d7a0fe.doc)