DANIEL STIEFEL

Display different Vuejs components in mobile browsers

Publiziert am 7. Februar 2019 von stiefeld

Quelle:
https://stackoverflow.com/questions/48515023/display-different-vuejs-components-for-mobile-browsers/51053611#51053611

Let’s suppose that I have the Main.vue and the MainMobile.vue. I will add an Init.vue that will redirect. So my router/index.js is that:

import Router from 'vue-router'
import Vue from 'vue'
import Main from '@/components/Main'
import MainMobile from '@/components/MainMobile'
import Init from '@/components/Init'

Vue.use(Router)

export default new Router({
  routes: [
     {
        path: '/',
        name: 'Root',
        component: Init
     },
    {
      path: '/Main',
      name: 'Main',
      component: Main
    },
    {
      path: '/MainMobile',
      name: 'MainMobile',
      component: MainMobile
    },
  ]
})

At the Init.vue file, the mobile/desktop detection will happen:

<template>
</template>
<script>
    export default {
        name: 'Init',
        methods: {
            isMobile() {
                if( screen.width <= 760 ) {
                    return true;
                }
                else {
                    return false;
                }
            }
        },
        created() {
            if (this.isMobile()) {
                this.$router.push('/MainMobile');
            }
            else {
                this.$router.push('/Main');
            }
        }
    }
</script>
<style scoped>
</style>

The isMobile() function used is very simple, you can change to any other.

Veröffentlicht unter Programmiersprachen, vue.js | Verschlagwortet mit mobile | Schreib einen Kommentar

Vue Router-Link active

Publiziert am 6. Februar 2019 von stiefeld

Es gibt hierzu einen sehr guten Eintrag auf stackoverflow.com:
https://stackoverflow.com/questions/46083220/how-to-vuejs-router-link-active-style

Die Wichtigen Dinge daraus:

Vue-Router

vue-router automatically applies two active classes, .router-link-active and .router-link-exact-active, to the <router-link> component.

`router-link-active`

This class is applied automatically to the <router-link> component when its target route is matched.

The way this works is by using an inclusive match behavior. For example, <router-link to="/foo">will get this class applied as long as the current path starts with /foo/ or is /foo.

So, if we had <router-link to="/foo"> and <router-link to="/foo/bar">, both components would get the router-link-active class when the path is /foo/bar.

This class is applied automatically to the <router-link> component when its target route is an exactmatch. Take into consideration that both classes, router-link-active and router-link-exact-active, will be applied to the component in this case.

Using the same example, if we had <router-link to="/foo"> and <router-link to="/foo/bar">, the router-link-exact-activeclass would only be applied to <router-link to="/foo/bar"> when the path is /foo/bar.

The exact prop

Lets say we have <router-link to="/">, what will happen is that this component will be active for every route. This may not be something that we want, so we can use the exact prop like so: <router-link to="/" exact>. Now the component will only get the active class applied when it is an exact match at /.

CSS

We can use these classes to style our element, like so:

 nav li:hover,
 nav li.router-link-active,
 nav li.router-link-exact-active {
   background-color: indianred;
   cursor: pointer;
 }

The <router-link> tag was changed using the tag prop, <router-link tag="li" />.

Change default classes globally

If we wish to change the default classes provided by vue-router globally, we can do so by passing some options to the vue-router instance like so:

const router = new VueRouter({
  routes,
  linkActiveClass: "active",
  linkExactActiveClass: "exact-active",
})

Change default classes per component instance (`<router-link>`)

If instead we want to change the default classes per <router-link> and not globally, we can do so by using the active-class and exact-active-class attributes like so:

<router-link to="/foo" active-class="active">foo</router-link>

<router-link to="/bar" exact-active-class="exact-active">bar</router-link>

Veröffentlicht unter Programmiersprachen, vue.js | Verschlagwortet mit router-link, vue-router | Schreib einen Kommentar

Vue-cli Update (2.x)auf 3.x

Publiziert am 6. Februar 2019 von stiefeld

Um das vue-cli von Version 2 auf Version 3 upzudaten ist es nötig die alte Version zu deinstallieren da sich der Paketname geändert hat.
Vorgehen wie im Bild:

Veröffentlicht unter Git, npm, vue.js | Schreib einen Kommentar

Start a new Vue.js-Projekt (über cli, mit Installation)

Publiziert am 5. Januar 2018 von stiefeld

Überprüfung ob Node.js installiert ist
node.js version überprüfen
Installation von Node.js als Laufzeitumgebung
Einfache Möglichkeit über Windows-Installer
https://nodejs.org/en/download/
Installation über .exe ausführen.
Überprüfung der Installation
überprüfen der Installation: es sollte nun node und zusätzlich auch der npm (node package manager) installiert sein
Installation des Node.js Versionmanager n (Optional) – nicht für Windows!
https://github.com/tj/n
maybe you have to set a/your proxy
https://forum.freecodecamp.org/t/npm-behind-a-proxy-server/19386
Installation des vue-cli

Installation VUE-CLI
Erstellen eines Projekts mit dem Vue-CLI
Navigation in den Ordner in dem das Projekt erstellt werden soll:
z.B. C:\Users\<username>\vuerepo
Dann erstellen des Projekts mit Angabe eines Templates:

Projekterstellung
Beantwortung der Fragen
init-Fragen
Git
Standardmäsig wird bein ertellen eines Projekts auch gleich ein git-Repository erstellt. Sollte git auf dem Rechner nicht installiert sein, oder der Befehl nicht im Pfad verfügbar sein, wird dieser Schritt übersprungen und eine Fehlermeldung angezeigt.

Der Git-Befehl wurde nicht gefunden
Um das Beispielprogramm zu starten, jetzt einfach noch die, nach der Projekterstellung, angezeigten Befehle eintippen.
Anwendung starten
über localhost:8080 ist die Anwendung nun erreichbar:
Anwendung läuft
Fertig!

Veröffentlicht unter vue.js | Schreib einen Kommentar

Kotlin Einführung

Publiziert am 24. November 2017 von stiefeld

Kotlin Einführung mit WebIDE

https://try.kotlinlang.org

Veröffentlicht unter Kotlin | Schreib einen Kommentar

ShareLaTeX

Publiziert am 19. Mai 2017 von stiefeld

https://de.sharelatex.com/project/58c2d10e0d2b81b36b264906

Veröffentlicht unter LaTeX, Uncategorized | Schreib einen Kommentar

Installation von Htop unter Debian/Raspberry

Publiziert am 14. Juli 2016 von stiefeld

Debian:
The installation process for Debian is even simpler, as it is already available in the repositories.

– Open up an SSH session.
– Log in with your root user log in credentials.
– Type “apt-get install htop”.
– To run htop, type “htop”.
– If you wish to quit htop at any point, press F10.

Quelle 14.07.2016

Veröffentlicht unter Linux, Raspberry | Schreib einen Kommentar

Linksammlung

Publiziert am 6. Juni 2016 von stiefeld

VUE.JS
https://jsonplaceholder.typicode.com
https://www.makeuseof.com/tag/what-is-javascript/
https://github.com/vuejs/vue-cli
https://www.npmjs.com/get-npm
https://github.com/tj/n
https://nodejs.org/en/download/

GCP-App
Schnellstart GCP-App

RAID auf Raspberry:
Link

JSF:
jsfatwork.irian.at
execution-order-of-events-when-pressing-primefaces-pcommandbutton
understanding-process-and-update-attributes-of-primefaces
installing-the-latest-version-of-eclipse-ide-mars-in-debian
jsf-login-and-register-application
authentication-based-secure-login-logout-using-jsf-2-0-and-primefaces-3-4-1
Die-Android-Testing-Support-Library-erreicht-Version-1-0-3783373.html

Plain JSF-Login

Glassfish Form Based Authentication Example

JSF Authentication Login Logout Database Example

Veröffentlicht unter Raspberry | Schreib einen Kommentar

Linksammlung

Publiziert am 6. Juni 2016 von stiefeld

GCP-App
Schnellstart GCP-App

RAID auf Raspberry:
Link

Plain JSF-Login

Glassfish Form Based Authentication Example

JSF Authentication Login Logout Database Example

Veröffentlicht unter Raspberry | Schreib einen Kommentar

Mount USB-Strick – Raspberry

Publiziert am 18. Mai 2016 von stiefeld

Step 1
Zunächst installieren wir Treiber, damit NTFS und HFS+ Speichermedien eingebunden werden können.

sudo apt-get -y install ntfs-3g hfsutils hfsprogs exfat-fuse

Step 2
Wir legen nun einen Ordner im Verzeichnis /media an, in den das USB-Speichermedium später eingebunden wird (Mountpoint genannt). In meinem Fall nenne ich den Ordner usbstick. Der Name kann frei gewählt werden, sollte aber keine Sonder- und Leerzeichen enthalten.

sudo mkdir /media/usbstick

Step 3
Nun führen wir folgenden Befehl in der Konsole aus und stecken anschließend das USB-Medium an. Daraufhin sollte in der Konsole eine Ausgabe aller angeschlossenen Speichermedien erscheinen. USB-Sticks heißen meist sda und externe Festplatten hd, ggf. mit anhängender Nummer. Uns interessiert die erste und letzte Spalte des richtigen Gerätes mit dessen device Pfad und UUID.

sudo blkid -o list -w /dev/null

Step 4
Nachdem wir nun den device Pfad des USB-Speichermediums kennen und einen Mountpoint erstellt haben, können wir den USB-Stick oder die USB-Festplatte mit folgendem Kommando einbinden. Dabei muss man je nach Dateisystem ein anderes Kommando verwenden, sda durch den Namen des USB-Speichermediums und /media/usbstick/ durch den Mountpoint ersetzt werden. Die zwei pi Angaben müssen, sofern ein anderer Benutzer als pi auf das USB-Speichermedium zugreifen soll, durch dessen Namen ersetzt werden.

FAT32
sudo mount -t vfat -o utf8,uid=pi,gid=pi,noatime /dev/sda /media/usbstick

NTFS
sudo mount -t ntfs-3g -o utf8,uid=pi,gid=pi,noatime /dev/sda /media/usbstick

HFS+
sudo mount -t hfsplus -o utf8,uid=pi,gid=pi,noatime /dev/sda /media/usbstick

exFAT
sudo mount -t exfat -o utf8,uid=pi,gid=pi,noatime /dev/sda /media/usbstick

ext4
sudo mount -t ext4 -o defaults /dev/sda /media/usbstick

Bedeutung der Parameter nach -o für Option:

utf8: Die Dateinamen verwenden den UTF-8-Zeichensatz und dürfen somit auch Umlaute enthalten
uid=pi,gid=pi: Das Speichermedium wird dem Benutzer (uid) und der Gruppe (gpi) pi zugewiesen
noatime: Die Inode Access Time (letzter Lesezugriff) wird nicht aktualisiert und damit werden unnötige Schreiboperatoren vermieden
defaults: Dem Gerät werden die Optionen rw, suid, dev, exec, auto, nouser und async (siehe auch ubuntuusers Wiki) zugewiesen

Step 5 (optional)
Um das Speichermedium wieder zu dismounten/auszuwerfen, wenden wir folgenden Befehl an, wobei wir wieder den Mountpoint anpassen müssen.

sudo umount /media/usbstick

Step 6 (optional)
Soll der USB-Stick oder die USB-Festplatte nun bei jedem Start des Raspberry Pis automatisch eingebunden werden, können wir dies für einen Eintrag in fstab erlauben, wozu wir die zuvor ausgelesene UUID benötigen. Je nach Dateisystem muss man eine der folgenden Zeilen am Ende der Datei /etc/fstab eintragen. Zum Bearbeiten der Datei nutzen wir den Editor nano in dem wir zum Speichern STRG + X, Y und anschließend Enter drücken müssen.

sudo nano -w /etc/fstab

FAT32
UUID=3241-40CE /media/usbstick/ vfat utf8,uid=pi,gid=pi,noatime 0

NTFS
UUID=3241-40CE /media/usbstick/ ntfs-3g utf8,uid=pi,gid=pi,noatime 0

HFS+
UUID=3241-40CE /media/usbstick/ hfsplus utf8,uid=pi,gid=pi,noatime 0

exFAT
UUID=3241-40CE /media/usbstick/ exfat utf8,uid=pi,gid=pi,noatime 0

ext4
UUID=3241-40CE /media/usbstick/ ext4 defaults 0

Beitrag übernommen aus:
Quelle Stand: 18.05.2016

Veröffentlicht unter Linux, Raspberry | Schreib einen Kommentar

Display different Vuejs components in mobile browsers

Vue Router-Link active

Vue-Router

`router-link-active`

`router-link-exact-active`

The exact prop

CSS

Change default classes globally

Change default classes per component instance (`<router-link>`)

Vue-cli Update (2.x)auf 3.x

Start a new Vue.js-Projekt (über cli, mit Installation)

Kotlin Einführung

ShareLaTeX

Installation von Htop unter Debian/Raspberry

Linksammlung

Linksammlung

Mount USB-Strick – Raspberry

Archive

Meta

Vue-Router

CSS

Change default classes globally

Change default classes per component instance (<router-link>)

Archive

Meta

Change default classes per component instance (`<router-link>`)