项目模板

开发项目使用

至此通过以上CLI命令，脚手架为我们创建了开发项目

自定义开发项目使用的是lerna来管理packages/工作空间下的子项目，即单仓库多项目应用（Monorepo）

通过脚手架生成的自定义开发项目结构如下：

安装依赖

• 根目录项目依赖安装

# npm
npm install 
# yarn
yarn install

• 工作空间子项目依赖安装

本地要全局安装yarn，lerna默认使用yarn进行包的按照，"npmClient": "yarn"，否则会出现coa安装报错问题

# npm
npm run bootstrap
# yarn
yarn bootstrap

开发模板本地运行

以上依赖安装完后还需要配置模板项目才能运行

配置环境变量

在packages/template-pc/根目录下会有一个.env文件，复制该文件重命名为.env.local，配置如下参数

• VUE_APP_DOMAIN 服务器地址，本地开发进行接口跨域代理使用，钉钉用户可通过客户获取调试地址
• VUE_APP_TENANT_ID 租户ID，当前搭贝的租户ID，进入应用后通过浏览器调试工具获取 localStorage.getItem('tenantId')
• VUE_APP_TOKEN [可选] 用户登录令牌，未配置token启动项目会自动路由到登录页面，钉钉扫码登录用户不知道用户名密码的可以把token复制到本地 localStorage.getItem('tenantId')

以上环境变量配置正确即可本地运行调试模板项目了

本地运行

• 在项目根目录启动项目

项目根目录配置了模板启动脚本

npm run serve:pc
# or
yarn serve:pc

• 进入packages/template-pc目录启动项目

npm run serve
# or
yarn serve

自定义组件开发步骤

可以先在本地创建一个空组件，通过打包脚本输出UMDjs文件，通过以上自定义步骤创建自定义组件，在本地模板中找到对应的应用表单，通过developEntry进行本地文件映射在packages/develop-pc/src/components/目录创建vue单文件组件，文件夹使用大驼峰命名法DemoFormInput，组件名称统一使用index.vue即可文件夹的名称为需要和index.vue组件的name一致，注意name必填维护packages/develop-pc/developEntry.js，下面说明维护packages/develop-pc/buildEntry.js，下面说明

developEntry开发组件导出

packages/template-pc/developEntry.js

通过如下方式导出，注意key为单文件组件的name，否则无法匹配到组件

import DemoFormInput from './src/components/DemoFormInput/index.vue'
import DemoFormButton from './src/components/DemoFormButton/index.vue'

/**
 * 导出方式一和方式二导出组件都可以，原理都是resole了组件
 * 推荐使用方式一导出组件
 * 因为组件的name是必填，可以及时发现name没有设置的情况
 */
export default {
  [DemoFormButton.name]: Promise.resolve(DemoFormButton), // 导出方式一
  [DemoFormInput.name]: Promise.resolve(DemoFormInput), // 导出方式一
  DemoTableColumn: import('./src/components/DemoTableColumn/index.vue'), // 导出方式二
  DemoTableButton: import('./src/components/DemoTableButton/index.vue') // 导出方式二
}

在packages/template-pc/main.js，默认配置了developEntry.js，传递到core-pc包里

packages/template-pc/main.js

import K6Core from '@k6/core-pc'
import developEntry from "../../develop-pc/developEntry"
Vue.use(K6Core, {
  developEntry
})

buildEntry打包组件导出

packages/develop-pc/buildEntry.js

module.exports = function () {
  const path = require('path')

  const resolve = (filePath) => {
    return path.resolve(__dirname, filePath)
  }

  // 手动配置，针对目录无规律
  // const entry = {
  //   'DemoFormInput': resolve('./src/components/DemoFormInput/index.vue'),
  // }

  // 批量生成 entry，目录有规律
  const entry = [
    "DemoFormInput",
    "DemoFormButton",
    "DemoTableColumn",
    "DemoTableButton"
  ].reduce((obj, name) => {
    obj[name] = resolve(`./src/components/${name}/index.vue`)
    return obj
  }, {})

  return entry
}

使用@k6/cli-service命令进行打包，输出

packages/develop-pc/package.json

{
  "script": {
    "build": "k6-build --entry ./buildEntry.js  --vue 2 --output dist "
  },
  "devDependencies": {
    "@k6/cli-service": "^0.1.2"
  }
}

自定义页面开发步骤

开发步骤和自定义组件开发页面基本一致

需要特别注意的是，自定义页面开发使用的映射KEY是固定的K6CUSTOMPAGE

• developEntry.js

import DemoFormInput from './src/components/DemoFormInput/index.vue'
import DemoFormButton from './src/components/DemoFormButton/index.vue'

/**
 * 导出方式一和方式二导出组件都可以，原理都是resole了组件
 * 推荐使用方式一导出组件
 * 因为组件的name是必填，可以及时发现name没有设置的情况
 * 自定义页面开发比较特殊，映射的KEY必须是「K6CUSTOMPAGE」
 */
export default { 
  [DemoFormButton.name]: Promise.resolve(DemoFormButton), // 导出方式一
  [DemoFormInput.name]: Promise.resolve(DemoFormInput), // 导出方式一
  DemoTableColumn: import('./src/components/DemoTableColumn/index.vue'), // 导出方式二
  DemoTableButton: import('./src/components/DemoTableButton/index.vue'), // 导出方式二
  // 自定义页面 使用的name是固定的
  K6CUSTOMPAGE: import('./src/components/DemoCustomPage/index.vue') // 导出方式二
}