Display different Vuejs components in mobile browsers

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 | Schreib einen Kommentar

Vue Router-Link active

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.


router-link-exact-active

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 , | Schreib einen Kommentar

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

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:

vue-cli Update

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

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

  • Ü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

Kotlin Einführung mit WebIDE

https://try.kotlinlang.org

Veröffentlicht unter Kotlin | Schreib einen Kommentar

ShareLaTeX

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

Veröffentlicht unter LaTeX, Uncategorized | Schreib einen Kommentar

Installation von Htop unter Debian/Raspberry

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

install_htop_debian

Veröffentlicht unter Linux, Raspberry | Schreib einen Kommentar

Linksammlung

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

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

Mount USB-Strick – Raspberry

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