ZIM Explore! 86. NPM - Canvas, Vue, Svelte, React and Angular
Here we show how to load the ZIM JavaScript Canvas Framework into Vue. The same will go for React, Angular and Svelte or ZIM on its own. See instructions at https://www.npmjs.com/package/zimjs. Now you can use ZIM with its 40 components, cool shapes, and dozens of controls like particle emitters, sprites, parallax, pen, animating to sound and much more right inside your apps. Or just check out ZIM on its own at https://zimjs.com
In this video we introduce NPM and use Vite to make installation as easy as npm install and npm run dev. In the next explore we see how to further load the ZIM helper modules for 3D, physics, games, and more.
00:00 start https://zimjs.com/code
02:08 what is NPM
02:42 what is CDN
02:56 start ZIM template code
04:00 ZIM = html + JS https://zimjs.com/examples
04:20 developers sitehttps://devs.zimjs.com
06:50 NPM section
07:05 NPM GitHub
09:10 GitHub zim_templates https://github.com/danzen/zimjs-templ...
10:18 download the ZIP
11:55 rename the folder to your project app
13:33 VS Code explaining folders and files
15:33 STEP1 terminal : NPM install
16:55 ZIM folder in VS Code
17:50 typings : please let know any typing errors
21:50 STEP2 run NPM dev
22:55 ZIM VUE example draw Pen() + Circle() + Dial() + Emitter()
23:30 app.exe in VS Code
28:38 explaining ZIM code frame settings
30:35 ZIM Editor https://zimjs.com/editor
33:30 copying and pasting code from the Editor
34:39 ZIM zimplify()
35:50 why NPM is difficult with NPM settings
37:44 STEPS how to use npm
38:45 explaining the ZIM VUE TEMPLATE
44:16 dial.change(f)
48:25 ZIM emitter tool https://zimjs.com/016/emitter.html
49:25 new Pen() example https://zimjs.com/genpen
55:34 new MotionController()
55:54 new LabelOnArc()
56:50 end