|
2 | 2 |
|
3 | 3 | This is a step-by-step description of how to add a yFiles graph component to a basic Vue application. |
4 | 4 |
|
5 | | -TL;DR Add yFiles as a dependency in the `package.json` and start importing yFiles classes in your project. |
| 5 | +TL;DR Add `yfiles` as a dependency in the `package.json`, |
| 6 | +[include your license](https://docs.yworks.com/yfileshtml/#/dguide/licensing#_general_concept), |
| 7 | +and start importing yFiles classes in your project. |
6 | 8 |
|
7 | | -## Create a default Vue CLI application |
| 9 | +## Create a default create-vue application |
8 | 10 |
|
9 | | -At first, create a default Vue CLI app by running `> vue create yfiles-vue-integration-basic` with the default option: `default ([Vue 2] babel, eslint)`. |
| 11 | +At first, create a basic `create-vue` app by running `> npm init vue@latest`, e.g., with |
| 12 | +the following options: |
10 | 13 |
|
11 | | -## Add yFiles as a dependency |
| 14 | +- `Project name:` yfiles-vue-integration-basic |
| 15 | +- `Add TypeScript?` Yes |
| 16 | +- `Add JSX Support?` No |
| 17 | +- `Add Vue Router for Single Page Application development?` No |
| 18 | +- `Add Pinia for state management?` No |
| 19 | +- `Add Vitest for Unit testing?` No |
| 20 | +- `Add Cypress for both Unit and End-to-End testing?` No |
| 21 | +- `Add ESLint for code quality?` Yes |
| 22 | +- `Add Prettier for code formatting?` No |
12 | 23 |
|
13 | | -Adding yFiles as a dependency is as easy as installing an external library from the npm registry: |
| 24 | +## Add yFiles as a dependency |
14 | 25 |
|
15 | | -1. Add yFiles for HTML as npm dependency to the created project: |
| 26 | +Adding yFiles as a dependency is almost as easy as installing an external library from the npm registry: |
16 | 27 |
|
17 | | - - If you have a fresh yFiles for HTML package, you need to prepare the library package first by running `npm install` in the |
18 | | - package folder. This creates the development library and a tarball that can be installed as npm dependency in |
19 | | - other projects. See also [Working with the yFiles npm Module](https://docs.yworks.com/yfileshtml/#/dguide/yfiles_npm_module#yfiles_npm_module). |
| 28 | +1. Add yFiles for HTML as npm dependency to the created project, for example like this: |
20 | 29 |
|
21 | | - Note: This sample project runs `npm install` as `preinstall` script in the `package.json`. |
| 30 | + ``` |
| 31 | + "dependencies": { |
| 32 | + ... |
| 33 | + "yfiles": "../yFiles-for-HTML-Complete-2.5-Evaluation/lib-dev/yfiles-25.0.0+eval-dev.tgz" |
| 34 | + }, |
| 35 | + ``` |
22 | 36 |
|
23 | | - - Reference the packed library in the `package.json` of the project: |
24 | | - ``` |
25 | | - "dependencies": { |
26 | | - ... |
27 | | - "yfiles": "../yFiles-for-HTML-Complete-2.4.0.6-Evaluation/lib-dev/es-modules/yfiles-24.0.6-eval-dev.tgz" |
28 | | - }, |
29 | | - ``` |
| 37 | +2. Install the newly added dependency with `npm install`. |
30 | 38 |
|
31 | | -2. Now install the newly added dependency with `npm install`. |
| 39 | +3. Include your yFiles license by copying the `license.json` file into your project. For more options, |
| 40 | + see the [developer's guide](https://docs.yworks.com/yfileshtml/#/dguide/licensing#_general_concept) |
32 | 41 |
|
33 | | -After installing the dependency, you can import classes from `yfiles` in your project. Since yFiles is installed as proper npm dependency, IDEs provide full code-completion and automatic imports out of the box to easily work with the library. |
| 42 | +After installing the dependency, you can import classes from `yfiles` in your project. Since yFiles |
| 43 | +is installed as proper npm dependency, IDEs provide full code-completion and automatic imports out |
| 44 | +of the box to easily work with the library. |
34 | 45 |
|
35 | 46 | ## Integrate a basic yFiles graph component |
36 | 47 |
|
37 | 48 | With the yFiles dependency, you can easily create a new Vue component with a yFiles graph component. |
38 | 49 |
|
39 | | -1. Create a new `GraphComponent.vue` file in `/src/components/` which instantiates a new yFiles graph component and optionally add an input mode for basic editing and a sample graph. |
| 50 | +1. Create a new `GraphComponent.vue` file in `/src/components/` which instantiates a new yFiles |
| 51 | + graph component and optionally add an input mode for basic editing and a sample graph. |
40 | 52 |
|
41 | 53 | See the contents of `/src/components/GraphComponent.vue` in this repository for the implementation. |
42 | 54 |
|
43 | | - There are two things to look out for: |
44 | | -
|
45 | | - - Make sure to configure your `license.json` for the library. This project assumes that there is a yFiles package next to the project's root. Therefore, you may need to change the referenced path in `GraphComponent.vue`. |
| 55 | + Make sure to configure your license data as described above. This project assumes that there is |
| 56 | + a yFiles evaluation package with a license file next to the project's root. Otherwise, you need |
| 57 | + to change the setting of the license data in `GraphComponent.vue`. |
46 | 58 |
|
47 | 59 | 2. Add the new Vue component to the `App.vue` that was created by the Vue CLI. |
48 | 60 |
|
49 | | -And that's it. Run `npm run serve` to serve the application with a basic yFiles component. |
| 61 | +And that's it. Run `npm run dev` to serve the application with a basic yFiles component. |
50 | 62 |
|
51 | 63 | ## Development Mode |
52 | 64 |
|
53 | | -This project uses the yFiles development library from the yFiles package. The development library adds additional |
54 | | -type runtime checks to yFiles related method calls and |
55 | | -yields readable exception messages to identify problems in JavaScript code more easily. |
56 | | -For more details see [Development Mode](http://docs.yworks.com/yfileshtml/#/dguide/yfiles_development_mode). |
| 65 | +This project uses the yFiles development library from the yFiles package. The development library |
| 66 | +adds additional type runtime checks to yFiles related method calls and yields readable exception |
| 67 | +messages to identify problems in JavaScript code more easily. |
| 68 | +For more details, see the [Development Mode section](http://docs.yworks.com/yfileshtml/#/dguide/yfiles_development_mode). |
57 | 69 |
|
58 | | -Please note that these additional checks degrade the performance of the application slightly, therefore it should only be used during development. See also [Preparing the Development Mode Library for Production](https://docs.yworks.com/yfileshtml/#/dguide/deployment#dev-deployment) in Webpack to learn how to switch between development and production mode. |
| 70 | +Please note that these additional checks slightly affect the performance of the application, |
| 71 | +therefore it should only be used during development. |
| 72 | +See also [Preparing the Development Mode Library for Production](https://docs.yworks.com/yfileshtml/#/dguide/deployment#dev-deployment) |
| 73 | +in Webpack to learn how to switch between development and production mode. |
0 commit comments