|
1 | 1 | # patternlab-node-vuecli
|
2 |
| -First try to make patternlab node with twig and vue-cli webpack work together |
| 2 | +My first try to make patternlab node V3 with Twig, Vue-Cli-Service and Webpack work together. |
| 3 | + |
| 4 | +Thank you, https://github.com/Comcast/patternlab-edition-node-webpack for your inspiration!!! |
| 5 | + |
| 6 | + |
| 7 | +# Note |
| 8 | +**This repo is for personal use.** |
| 9 | + |
| 10 | +Please, keep that in mind if you are nerdy enough and going to use it - who knows :) |
| 11 | + |
| 12 | +The complete process is coupled to the Vue-Cli-Service - this is not a Webpack only wrapper for Patternlab. |
| 13 | + |
| 14 | +--- |
| 15 | + |
| 16 | +For me, the important things (which work) are: |
| 17 | +<small>Currently i did not do a lot of tests due to heavy debugging :)</small> |
| 18 | + |
| 19 | +* Start Dev with `vue-cli-service serve` |
| 20 | +* Webpack Dev Server runs Patternlab with Twig Templates and not only the Vue public HTML document |
| 21 | +* HMR for JS and CSS |
| 22 | + * Code Splitting / Vue Async Components loading seams to work |
| 23 | +* Import Twig files in Twig files |
| 24 | + |
| 25 | +Currently not working, but nice to have: |
| 26 | +* Delete, move or rename of patterns will not correctly recomplile / remove them from the "frontend" |
| 27 | + * They will be gone after restart of `serve` task |
| 28 | + |
| 29 | +--- |
| 30 | + |
| 31 | +## Patternlab Node |
| 32 | +https://github.com/pattern-lab/patternlab-node |
| 33 | + |
| 34 | +## Vue CLI |
| 35 | +https://github.com/vuejs/vue-cli |
| 36 | + |
| 37 | +Used Vue settings to create project: |
| 38 | +``` |
| 39 | +{ |
| 40 | + "useConfigFiles": true, |
| 41 | + "plugins": { |
| 42 | + "@vue/cli-plugin-babel": {}, |
| 43 | + "@vue/cli-plugin-router": { |
| 44 | + "historyMode": false |
| 45 | + }, |
| 46 | + "@vue/cli-plugin-eslint": { |
| 47 | + "config": "airbnb", |
| 48 | + "lintOn": [ |
| 49 | + "save" |
| 50 | + ] |
| 51 | + } |
| 52 | + }, |
| 53 | + "cssPreprocessor": "node-sass" |
| 54 | +} |
| 55 | +``` |
0 commit comments