インフラストラクチャ:Vue、小包＆ワークボックス

24295 ワード
webdev vue javascript tutorial テキストリンク
単一ページアプリケーション(SPA)は、単一のWebページに含まれているWebアプリケーションであり、シームレスにナビゲーション体験を提供し、ダウンロードして、各ページのHTMLを解析する必要はありません.進行中のWebアプリケーション(PWA)は、サービスワーカー「プロキシ」とマニフェストファイルを使用して、貧弱な、またはネットワーク条件が使用できないようにブラウザでアプリケーションのキャッシュを許可するために必要なインフラストラクチャを提供するWebアプリケーションです.すべての現代のブラウザーとOsesは、ローカルに「インストールされます」、そして、したがって、ネイティブのようなユーザーエクスペリエンスを提供するのを許します.
PWAはしばしば小さなチームのために、ネイティブのアプリケーションを構築するための実行可能な代替である、ほとんどのアプリケーション店は現在、pisとすべての主要なOses(Windows、Android、IOS)を受け入れるので、インストールされ、デスクトップ上に表示されるpisを許可します.Popenは即座に開きます、そして、ブラウザーはそれが非表示のようにネイティブのものを提供しているコントロールを隠すように向けられることができます.
近代的なツールは、開発を簡素化することができますが、それを設定するには、時間がかかるタスクをすることができます.スパ＆PWAプロジェクトのセットアップ方法を見てみましょう.このチュートリアルの範囲はセットアップを記述することであり、それぞれのフレームワーク/ツールではありません.

フレームワーク

Vuejs
私たちは、天文学のためにVue生態系を使います:

  • Vue.js これらを定義する際に宣言的なアプローチを提供し、単一のファイルコンポーネントのコードを分離することで、ビューを処理します.

  • VueX 状態管理に使用されます

  • Vue Router スパルートの処理に使用されます

    • ノード.js
    node.js は、必要となる可能性があるすべてのユーティリティと

    小包.js
    Parcel バンドルは、アプリケーションを構築し、バンドルに使用されます

    ワークボックス
    Workbox サービスワーカーの詳細を処理します.

    ファイルレイアウト
  • ./src このプロジェクトのすべてのソースコードが含まれます.
  • ./src/web Webアプリケーションのソースコードが含まれます.
  • ./src/db (オプション)データベース初期化スクリプトを含みます.
  • ./src/server (オプション)サーバ側のプロジェクトを含みます.
  • ./dist は、生成された全てのアーティファクトを含んでおり、
  • ./dist/web 組み込みのWebアプリケーションが含まれます.
  • ./dist/db (オプション)データベースのSCRITSで生成された任意のアーティファクトを格納します
  • ./dist/server (オプション)サーバサイドプロジェクト(コンパイル)
  • ./.cache は小包によって生成され、Git
  • ./node_modules NPMまたは小包によって生成され

    • 暗号
    このコードはproject's github repo

    JavaScript依存性


    エントリーポイント./src/web/index.html 私たちのエントリポイントと一緒にすべてのリンク
  • <link rel="manifest" href="./manifest.webmanifest"> リンク.webmanifestファイル
  • <div id="vueapp"></div> Vueマウントポイント
  • <script src="./index.js"></script> Vueアプリケーションを含むスクリプトを読み込みます
  • navigator.serviceWorker.register('/service-worker.js'); サービスワーカースクリプトを登録する
    • <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <link rel="manifest" href="./manifest.webmanifest">

        <title>Vue.js Single Page Application Template</title>       
    </head>

    <body>
        <div id="vueapp"></div>          

        <script src="./index.js"></script>
        <script>
            if ('serviceWorker' in navigator) {
                window.addEventListener('load', () => {
                    navigator.serviceWorker.register('/service-worker.js');
                });
            }            
        </script>
    </body>
</html>

    マニフェスト./src/web/manifest.webmanifest アプリケーションについて説明し、アプリケーションがPWAと見なされるために必要です.
    それを維持することが重要です.小包互換性のためのWebManifest拡張.
    {
    "name": "My application name",  
    "short_name": "app",

    "start_url": "/",
    "background_color": "#3367D6",
    "display": "standalone",
    "scope": "/",
    "theme_color": "#3367D6",

    "icons": [
        {
            "src": "/res/app-256.png",
            "type": "image/png",
            "sizes": "256x256"
        }
    ]
}

    サービスワーカー./src/web/service-worker.js アプリケーションがPWAであることを考慮して要求されるサービスワーカーを実装します.Googleのワークボックスが使用されます.Workboxは複数の状態を定義します(ネットワーク最初、キャッシュ、最初は再起動します).この例では、すべてのリソースは、これが最もResponsiceアプローチであり、オフラインで動作する機能を維持しているので、ネットワーク最初の戦略を使用して提供されます.
    console.log("service-worker.js")
// import service worker script
importScripts('https://storage.googleapis.com/workbox-cdn/releases/4.2.0/workbox-sw.js');

// Network First
[ 
    '/$',  // Index 
    '/*',  // Anything in the same host
    '.+/*' // Anything in any host 
]
.forEach(mask => {
    workbox.routing.registerRoute(
        new RegExp(mask),
        new workbox.strategies.NetworkFirst( { cacheName: 'dynamic' } ) 
    );
});

    Vue結合./src/web/index.js は、VueアプリケーションとCSS(SCSSで)をバインドするために使用されます.Vueフレームワーク、Vueアプリケーションコードをインポートしますapp.vue ) そして、我々のスタイルstyles.scss ) - これらのファイルはすべて./src/web/ しかし、インポートの相対パスを使用しています.最後にvueアプリケーションを対応するdiv要素にマウントします.
    import Vue from 'vue';

import App from './app.vue';
import './style.scss'

new Vue(App).$mount('#vueapp')

    VUEアプリケーション./src/web/app.vue つのファイルコンポーネントとしてのVueアプリケーションを含んでいます.
    に<template> 我々は、単純なナビゲーションメニューを構築し、我々の単一のページアプリケーションのホストであるルータビュー、すべての他のページは、ルータビューの要素にマウントされます.このテンプレートではpug html .
    に<script> Vueフレームワークと2つのカスタムモジュールをインポートします_router.js と_store.js そして、我々はちょうどロードされた店とルータモジュールでデフォルトVueアプリケーションを広げることによって我々のVueアプリケーションを作成します.
    に<style> SCSSを使用してメニュー用のいくつかのローカル(スコープ付き)スタイリングを提供します
    <template lang="pug">
    div
        nav.navbar
            router-link(to="/") home
            router-link(to="/profile") profile
            router-link(to="/about") about
        router-view
</template>


<script>
    import Vue from "vue";
    import {router} from './_router.js';
    import {store} from './_store.js'

    export default Vue.extend({ 
        store: store,
        router: router    
    });    
</script>


<style lang="scss" scoped>

    .navbar {
        text-align: center;

        * + * {
            margin-left: 8px;
        }
    }
</style>

    ルータ./src/web/_router.js すべてのページをロードして、それらのルートを宣言することによってVueルータを構成して、初期化します.
    import Vue from "vue";

import VueRouter from 'vue-router';

Vue.use(VueRouter)

// 1. Import Components
import home    from './vues/home.vue'
import about   from './vues/about.vue'
import profile from './vues/profile.vue'

// 2. Define some routes
const routes = [
    { path: '/'       , component: home    },   
    { path: '/profile', component: profile },
    { path: '/about'  , component: about   }
]

// 3. Create & Export the router 
export const router = new VueRouter({
    routes: routes
})

    店./src/web/_store.js VUEXストアモジュールの設定と初期化.これはグローバル状態と利用可能な突然変異を宣言します.VIEXは、フレームワークの反応性を管理しながら、グローバル状態をすべてのビューコンポーネント(突然変異を通して)に変更することを可能にします.(突然変異を行うと、状態変化によって影響を受けるすべてのコンポーネントが更新されます).
    import Vue from 'vue'
import Vuex from 'vuex';

Vue.use(Vuex);

export const store = new Vuex.Store({
    state: {
        name: 'Unknown'
    },

    // Usege: $store.commit('mutationan', parameter)
    mutations: {
        setName(state, name) {
            Vue.set(state, 'name', name);
        }
    }
});

    ページ
    私たちの例では3ページがあり、ホームとほぼ同じです.両方ともストアのNameプロパティを表しています.
    プロファイルは、入力ボックスの値を入力するときにユーザーが自分の名前を瞬時にグローバル状態を更新する入力ボックスを提供します../src/web/vues/about.vue
    <template lang="pug">
    div 
        h1 About
        p  Welcome: {{$store.state.name}}
</template>

<script>
    export default {

    }
</script>
    ./src/web/vues/home.vue
    <template>
    <div> 
        <h1>Home</h1> 
        <p> Welcome: {{$store.state.name}}</p>

    </div>   
</template>


<script>
    export default {
    }
</script>
    ./src/web/profile.vue
    <template lang="pug">
  div 
    h1 Profile
    p  Welcome: {{$store.state.name}}
    div.form 
      table
        tr
          td Name
          td
            input(:value="$store.state.name" @input="$store.commit('setName',$event.target.value)")
</template>

<script>
    export default {

    }
</script>
<style lang="scss" scoped>
    .form {
        display: flex;
        justify-content: center;
    }
</style>

    開発
    このテンプレートで開発するには以下の手順が必要です
  • ダウンロードまたはクローンcode
  • 小包をインストールするnpm i -g parcel-bundler
  • プロジェクト依存関係のインストールnpm install (プロジェクトルートで)
  • devスクリプトを実行するnpm run dev

    • Original post at greek developer
    statement文アクション
    mysqlデータベースはどのようにemojiの表情を保存して、utf 8 mb 4を変更した後にどうしてすべて疑問符が現れます