@activeprospect/integration-components 中文文档教程
leadconduit-integration-components
用于 LeadConduit 集成的 Vue 组件库。
Usage
在您的集成的富 UI (RUI) 代码中，将这些组件添加到 .vue 文件的
<script>
import { Navigation } from '@activeprospect/integration-components';
// etc.
然后这些组件可以在 < code>：
<section> etc. </section>
<Navigation :onNext="save"></Navigation>
Components
运行 Storybook 以查看所有内容及其详细文档。
Navigation- footer with navigation (Next, Prev, Finish, & Cancel)
Testing
要进行测试，请在一个窗口中运行 npm run storybook，然后在另一个窗口中运行 npm run cypress:run。
Implementation
该库使用以下技术：
- Vue to write the components
- Rollup for bundling the Vue files
- Storybook as a development and documentation framework
- Cypress as a testing suite
Vue
所有 Vue 组件都存储在 /src/components 中。 为了确保每个 Vue 组件都被 Rollup 拾取，必须将它添加到 /src/index .js 文件，如下所示：
export { default as Navigation } from './Navigation.vue';
Rollup
Rollup 捆绑了我们的 Vue 组件以供分发。 Rollup 配置文件位于 /build。
要运行 Rollup 并构建 Vue 组件，只需运行 npm run build。 这将获取 中列出的所有 Vue 组件>/src/index.js 并编译它们，将结果输出到 /dist.
Storybook
Storybook 用作开发和文档框架。 要阅读有关 Storybook 的更多信息，您可以在此处找到他们的文档。 Storybook故事存放在/src/stories，Storybook配置文件存放在/storybook。
要使用storybook，可以运行npm run storybook。 这将启动 Storybook 服务器并打开一个新的浏览器窗口到 localhost:6006。 在那个新窗口中，您将能够看到 Storybook 故事。 Storybook 确实支持热重载，因此对 Vue 文件的任何更改都应该自动反映出来。
Cypress
赛普拉斯用于测试我们的组件，以确保更改不会破坏关键功能。 Cypress 使用 Storybook 服务器运行其测试，因此 Storybook 必须在端口 6006 上运行以使测试不会超时。
有两种方法可以运行 Cypress 测试。
npm run cypress:open - 打开 Cypress GUI
npm run cypress:run - 在终端中运行测试
Cypress 测试位于 /cypress/integration。 要查看有关 Cypress 的更多信息，您可以在此处找到他们的文档
leadconduit-integration-components
A Vue component library for LeadConduit integrations.
Usage
In your integration's rich UI (RUI) code, add these components inside the <script> tag of your .vue files:
<script>
import { Navigation } from '@activeprospect/integration-components';
// etc.
And then the components can be used in the <template>:
<section> etc. </section>
<Navigation :onNext="save"></Navigation>
Components
Run Storybook to see them all, and their detailed docs.
Navigation- footer with navigation (Next, Prev, Finish, & Cancel)
Testing
To test, run npm run storybook in one window, and npm run cypress:run in another.
Implementation
This library uses the following technologies:
- Vue to write the components
- Rollup for bundling the Vue files
- Storybook as a development and documentation framework
- Cypress as a testing suite
Vue
All Vue components are stored in /src/components. To make sure each Vue component is picked up by Rollup, it must be added to the /src/index.js file like so:
export { default as Navigation } from './Navigation.vue';
Rollup
Rollup bundles our Vue components for distribution. The Rollup config file is located in /build.
To run Rollup and build the Vue components, simply run npm run build. This will take all the Vue components listed in /src/index.js and compile them, outputting the result into /dist.
Storybook
Storybook is used as a development and documentation framework. To read more on Storybook, you can find their docs here. Storybook stories are stored in /src/stories, and the Storybook configuration files are stored in /storybook.
To use storybook, you can run npm run storybook. This will start the storybook server and open a new browser window to localhost:6006. In that new window, you will be able to see the Storybook stories. Storybook does support hot reloading, so any changes to the Vue files should be automatically reflected.
Cypress
Cypress is used to test our components to ensure changes don't break critical functionality. Cypress runs its tests using the Storybook server, so Storybook must be running on port 6006 for the tests to not timeout.
There are two methods to run Cypress tests.
npm run cypress:open - Opens the Cypress GUI
npm run cypress:run - runs the test in the terminal
Cypress tests are located in /cypress/integration. To view more on Cypress, you can find their docs here
