前端开发教程

开发环境

一、环境搭建

1.安装node

💡

推荐使用v20.19.5

下载地址 https://nodejs.org/download/release/v20.19.5/

推荐使用：nvm node多版本管理工具

版本检查，打开控制台，输入以下命令：

node -v

2.切换npm源

为了加速安装依赖，将npm源地址切换为阿里源，打开控制台，输入以下命令：

npm config set registry https://registry.npmmirror.com

检查是否设置成功，在控制台中输入以下命令：

npm config get registry

3.安装全局依赖

3.1 window用户：打开控制台输入以下命令

npm install -g cloudcc-cli

检查是否安装成功，控制台输入以下命令：

npm ls -g --depth=0

3.2 MacOS用户：打开控制台输入以下命令

sudo npm install -g cloudcc-cli

检查是否安装成功，控制台输入以下命令：

sudo npm ls -g --depth=0

4.安装vs-code

下载地址：https://code.visualstudio.com/download

5.安装vs-code插件：CloudCC

打开安装完成的vs code，点击扩展图标

cursor使用以下方式安装：https://help.cloudcc.cn/product03/chang-yong-gong-ju/

输入CloudCC，选择安装

6.安装本地MCP

打开开发工具的MCP配置文件，添加以下配置

{
  "mcpServers": {
    "cloudcc-cli": {
      "command": "cc-mcp"
    }
  }
}

7.创建模版项目

打开控制台，进入您的开发目录，比如Docments，运行创建项目命令：

cc create project demo1

使用vs code打开项目

选择菜单里中的：终端——新建终端

安装依赖：在打开的终端里输入以下命令：

npm i

安装完成后，运行项目，在终端中执行命令

npm run serve

浏览器访问：http://localhost:8080/，可以看到以下页面

二、获取开发者密钥

要将本地项目关联到指定环境，需要使用具备开发者权限的账号登录 CRM 系统，以获取对应的密钥。获取到密钥后，将其填入项目根目录下的配置文件 cloudcc-cli.config.js（该文件来自项目模板）。

1.创建开发者账号

1：访问CRM登录地址，使用系统管理账号登录到CRM系统，点击右上角齿轮，进入后台设置

2：选择菜单中的：用户管理——新建

3：重点：新建用户时，要分配具有开发者权限的简档

4：访问路径：管理用户——>简档——>对应的简档——>普通用户权限——>代码管理。确认此权限已经开启。

2.获取密钥

1：访问CRM登录地址，使用开发者账号登录CRM系统，点击右上角齿轮，访问后台设置

2：选择用户及控制——安全性控制——连接的应用程序——新建

3：按要求填写：连接的应用程序名称，API名称，联系人电子邮件

4：创建好之后，进入详情页，点击CloudCC Dev后面的复制按钮，保留备用。

3.获取安全标记

1：访问CRM登录地址，使用开发者账号，登录CRM，访问后台设置

2：访问 常规 → 个人设置 → 重置我的安全标记。点击后，安全标记将发送到个人信息中所配置的邮箱。。

4.配置密钥

1：打开模版项目，打开根目录中的cloudcc-cli.config.js文件，将刚刚获取的2个密钥配置到对应的变量上。

module.exports =
{   // 使用dev环境
    "use": "dev",
    // dev环境密钥
    "dev": {
            "safetyMark": "必填，安全标记",
            "CloudCCDev": "必填，开发者密钥",
            "username":"选填，开发者用户名,会覆盖CloudCCDev中的username"
          },
    // prod环境密钥
    "prod": {
            "safetyMark": "必填，安全标记",
            "CloudCCDev": "必填，开发者密钥",
            "username":"选填，开发者用户名，会覆盖CloudCCDev中的username"
          },
}

5.私有云特殊配置

私有云除了以上2个配置还需要加入一个配置，用户标记为私有云环境

module.exports =
{   // 使用dev环境
    "use": "dev",
    // dev环境密钥
    "dev": {
            "safetyMark": "必填，安全标记",
            "CloudCCDev": "必填，开发者密钥",
            "version":"必填，private",
            "username":"选填，开发者用户名,会覆盖CloudCCDev中的username"
          },
    // prod环境密钥
    "prod": {
            "safetyMark": "必填，安全标记",
            "CloudCCDev": "必填，开发者密钥",
            "version":"必填，private",
            "username":"选填，开发者用户名,会覆盖CloudCCDev中的username"
          },
}

6.特殊配置

"dev": {
   // 服务访问地址：
   // 国内默认：https://developer.apis.cloudcc.cn
   // 海外默认：https://developer.apis.cloudcc.com
   // 私有云：登录CRM系统，页面鼠标右键，选择检查，选择控制台，输入以下代码获取：$CCDK.CCConfig.getBaseUrl()
  "baseUrl": "http://xxx",
   // 组件进入后台，销毁时间，设置10分钟销毁10*60*1000
  "destroyTimeout": 600000,
  // 开发者平台在网关配置的前缀名，注意url不要以/结尾
  "devSvcDispatch"："/devconsole",
  // api-service-svc访问网关前缀地址，注意url不要以/结尾
  "apiSvcPrefix":"/xxx",
  // setup-svc访问网关前缀地址，注意url不要以/结尾
  "setupSvcPrefix":"/xxx"
},

7.多环境配置

cloudcc-cli.config.js支持配置多个环境信息，use用于区分使用哪个环境。

module.exports = { 
    // 使用dev环境密钥，与dev连接
    "use": "dev", 
    // dev环境密钥
    "dev": { "safetyMark": "xxx", "CloudCCDev": "xxx" }, 
    // prod环境密钥
    "prod": { "safetyMark": "xxx", "CloudCCDev": "xxx" } 
}

2.1 获取密钥V17版本

配置项，打开cloudcc-cli.config.js文件

公有云配置


module.exports = { 
    // 使用dev环境密钥，与dev连接
    "use": "dev", 
    // dev环境密钥
    "dev": {
    // crm开发者账号
    "username": "xxx",
    // 密钥
    "secretKey": "xxx",
    // 安全标记（系统重置安全标记邮箱获取）
    "safetyMark": "xxx",
    // 注册时获取的clientId
    "clientId": "xxx",
    // 注册时获取的secretKey
    "openSecretKey": "xxx",
    // 组织id
    "orgId": "xxx",
    // 海外环境需要配置
    "baseUrl":"xxx",
    }, 
}

secretKey获取方式

国内公有云环境接口地址：https://developer.apis.cloudcc.cn/sysconfig/auth/secretkey/get

国外公有云环境接口地址：https://global-gw.cloudcc.com/sysconfig/auth/secretkey/get

以公有云的方式部署私有云，访问接口地址：

https://网关地址/systconfig/auth/secretkey/get

请求方式：post

curl -H "Content-Type: application/x-www-form-urlencoded" -d "username=cloudcc@xxxx" -X POST https://developer.apis.cloudcc.cn/sysconfig/auth/secretkey/get

参数名称	参数说明	参数类型	备注
safetyMark	安全标记（系统重置安全标记邮箱获取）	string	必须获取方式：个人信息-重置我的安全标记
clientId	注册时获取的clientId	string	必须获取方式：管理设置-安全性控制-连接的应用程序
openSecretKey	注册时获取的secretKey	string	必须获取方式：管理设置-安全性控制-连接的应用程序
orgId	组织id	string	必须
baseUrl	基础服务地址		登录进入CloudCC CRM系统，在控制台输入：$CCDK.CCConfig.getBaseUrl()，获取baseUrl

私有云配置

module.exports = { 
    // 使用dev环境密钥，与dev连接
    "use": "dev", 
    "dev": {
       // crm开发者账号，需要在sysconfig-svc中devuser配置，多个请用逗号分隔，默认admin@cloudccone.com。
       // 如果有配置中心，请在配置中心查看
      "username": "admin@cloudccone.com",
      // 密钥，需要与sysconfig-svc配置文件配置cloudcc.private.secretKey的密钥一致，私有云默认abc
      // 如果有配置中心，请在配置中心查看
      "secretKey": "abc",
      // 私有云需要单独配置网关地址，注意url不要以/结尾
      "baseUrl": "http://xxx",
      // 私有云特有，固定写法，用于标识私有云环境
      "version": "private",
      // 安全标记（系统重置安全标记邮箱获取）
      "safetyMark": "xxx",
      // 注册时获取的clientId
      "clientId": "xxx",
      // 注册时获取的secretKey
      "openSecretKey": "xxx",
      // 组织id
      "orgId": "xxx"
    }
}

参数名称	参数说明	参数类型	备注
safetyMark	安全标记（系统重置安全标记邮箱获取）	string	必须获取方式：后台设置—个人信息-重置我的安全标记
clientId	注册时获取的clientId	string	必须获取方式：后台设置—管理设置-安全性控制-连接的应用程序
openSecretKey	注册时获取的secretKey	string	必须获取方式：后台设置—管理设置-安全性控制-连接的应用程序
orgId	组织id	string	必须

特殊配置

"dev": {
   // 服务访问地址：
   //  ● 国内默认：https://developer.apis.cloudcc.cn
   //  ● 海外默认：https://developer.apis.cloudcc.com
  "baseUrl": "http://xxx",
   // 组件进入后台，销毁时间，设置10分钟销毁10*60*1000
  "destroyTimeout": 600000,
  // 开发者平台在网关配置的前缀名，注意url不要以/结尾
  "devSvcDispatch"："/devconsole",
  // api-service-svc访问网关前缀地址，注意url不要以/结尾
  "apiSvcPrefix":"/xxx",
  // setup-svc访问网关前缀地址，注意url不要以/结尾
  "setupSvcPrefix":"/xxx"
},

登录进入CloudCC CRM系统，在控制台输入：$CCDK.CCConfig.getBaseUrl()，获取私有云baseUrl

配置文件

选择项目根目录的cloudcc-cli.config.js文件

SecretKey异常可以重置

curl -H "Content-Type: application/x-www-form-urlencoded" -d "username=cloudcc@xxxx" -X POST https://developer.apis.cloudcc.cn/sysconfig/auth/secretkey/reset

三、开发规范

1.开发环境设置

1.1 编辑器：推荐 vs code

必须安装插件：
- ESLint（代码格式检测）
- Vetur（vue插件）
- GitLens（Git管理）
- Live Server（静态服务器）

1.2 包管理工具：npm

1.3 代码版本控制：git

为了加速安装依赖，将npm源地址切换为阿里源：

npm config set registry https://registry.npmmirror.com

1.4 开启性能监视器

凡是出现cpu占用100%持续2秒以上的，即需要性能优化

2.JS代码开发规范

2.1 配置ESLint

代码规范采用ESLint默认配置
package.json配置，开启ESLint

  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },

2.2 编写开发日志

在项目根目录创建README.md文档，将每天完成的功能或是修复优化的功能，做一个记录

#### 发布版本：V12.0.1
#### 发布日期：2021-10-14
#### 更新内容
* 优化
    * 功能/UI优化。 (姓名) 
* 修复
    * bug修复-禅道bug编号。（姓名）
* 迭代
    * 新增的功能/UI。（姓名）

2.3 注解规范

vue文件：多行注解，在script标签内部上方编写

<template>
 <div></div>
</template>

<script>
/**
 * 布局编辑器 明细视图
 * 功能：
 *  1. 显示布局编辑器
 *  2. 显示布局编辑器的定制区
 */
export default {
  name: "DetailView", //明细视图
};
</script>

<style lang='scss' scoped>

</style>

data变量：使用单行注解，在变量上方编写。

  data() {
    return {
      // 是否显示dialog
      dialogVisible: false,
    };
  },

props变量：使用单行注解，在变量上方编写。

props: {
    // 数据类型
    type: {
      type: String,
      default: "text",
    },
    // 文本输入最大长度
    maxLength: {
      type: Number,
      default: 48,
    },
}

functions方法：多行注解，在方法上方编写。

    /**
     * 防抖函数：最后一次点击有效
     * @param {function} fn 回调防范
     * @param {number} delay 延迟时间，单位秒
     * @returns {function} 返回函数
     */
    debounce(fn, delay) {
        let timer = null;
        return function () {
            if (timer) {
                clearTimeout(timer)
            }
            timer = setTimeout(() => {
                fn.apply(this, arguments)
                timer = null
            }, delay)
        }
    }

3.CSS样式规范

所有样式使用scss编写，并设置scoped。样式类需要简单写下注解

// 样式必须写入style标签里，并且设置scoped
<style lang="scss" scoped>
// 引入的样式，必须放入style标签里
@import "@/style/cloudccStyle.scss";
</style>

统一项目css，通用的样式使用clouccStyle.scss中的变量,无需单独引用，直接使用

<style lang="scss" scoped>
// 已配置全局引入变量插件，无需单独引用
// @import "@/style/cloudccStyle.scss";
.demoBox{
    background-color: $--color-primary;
}
</style>

入门指南