index
Venv/NodeEnv/Webpack
Einrichten
Ich verwende in dem Kurs zwei Entwicklungsumgebungen:
die virutellen Umgebungen von Python
Webpack für Node, npm und andere Javascript Bibliotheken
Warum?
Wer kein Python auf dem System hat oder verwenden will, kann sich eine NodeJS-Entwicklunsumgebung einrichten.
Gründe für die Kombination von Python:
Node wird nicht global installiert, sondern wie andere Software, isoliert in einer virtuellen Sandbox ausgeführt.
Python liefert einen einfachen Server, der sich gut zum Testen der Applikationen eignet (ok das Webpack-Paket bietet auch einen Server an).
Venv mit Python
Python 3.5 installieren ... (möglichst kurze Pfade einrichten, das spart später Tipparbeit)
los gehts...
Einrichtung der Python-Umgebung -- pyhton3.6 funktionierte am 1.1.2017 noch nicht, deshalb nehmen wir python3.5, alle weiteren Befehle müssen an der Konsole ausgeführt werden:
# einmalig python3.5 -m venv js-env # jedesmal ... cd js-env source ./bin/activate # einmalig pip install nodeenv # jetzt die JS-Umbegung vorbereiten pip install nodeenv nodeenv vue
Arbeiten in der virtuellen Umgebung
# jedesmal ... cd js-env/vue source ./bin/activate # webpack-cli für Vue installieren # einmalig pro Umgebung npm install -g vue-cli
Ein neues Vue-Projekt
# jedesmal ... cd js-env/vue source ./bin/activate # berlin-clock ist hier der Projektname vue init webpack berlin-clock
Dialog und die Ausgaben...
This will install Vue 2.x version of template. For Vue 1.x use: vue init webpack#1.0 course-order ? Project name berlin-clock ? Project description JS-Test-Projekt ? Author Peter Koppatz ? Vue build standalone ? Use ESLint to lint your code? Yes ? Pick an ESLint preset Standard ? Setup unit tests with Karma + Mocha? Yes ? Setup e2e tests with Nightwatch? Yes vue-cli · Generated "berlin-clock". To get started: cd berlin-clock npm install npm run dev Documentation can be found at https://vuejs-templates.github.io/webpack
Was weiter oben steht ausführen...
Arbeiten im Projekt: build
cd js-env/vue source /bin/activate cd berlin-clock npm run build cd my-project/dist/
Projekt mit Webserver...
npm run build cd dist python -m http.server Im Browser dann: :: http://localhost:8000