Vue2 +のWebPACK + express4ビルド単一ページのアプリケーション（II）

Vue2 +のWebPACK + express4ビルド単一ページのアプリケーションは、（）小さな基本的なアプリケーションを構築していますが、jqueryのAJAX要求を解決していない、スタイルモジュールはあまり問題に使用されています

まず、非同期要求および転送

1.クライアントが要求を開始します

アヤックス（XMLHttpRequestを）達成するためには、代替技術の最近の上昇はフェッチAJAXの非同期要求で達成され、XMLHttpRequestが、ラフなデザインのAPIである懸念（関心事の分離）の分離の原則に準拠していない、構成、および呼び出しは非常に混乱します非同期イベントベースのモデルでも、現代の約束、発電機/利回り、非同期を書くために/フレンドリー待っています。

XHRの問題を解決するために見える取得します。

私はGitHubの上のサポート均質周りプラグ端をフェッチすることを選んだ：https://github.com/matthew-andrews/isomorphic-fetch

NPMの導入プラグインのプロジェクトをダウンロードし、あなたはそれが必要とされる以下の方法を使用することができます--save同型フェッチES6-約束をインストールします。

import es6Promise from 'es6-promise';
import fetch from 'isomorphic-fetch'; es6Promise.polyfill(); fetch('//offline-news-api.herokuapp.com/stories') .then(function(response) { if (response.status >= 400) { throw new Error("Bad response from server"); } return response.json(); } ) .then(function(stories) { console.log(stories); });

一般に、このプロジェクトは、別途の方法が使用された文書ファイルIncorporatedのコールを引き抜く方法に引き出されたコードの上に書き込まれます

非同期要求の2.node先端

そこノードミドルウェアHTTPプロキシ・ミドルウェアのhttp転送A

NPMインストールHTTPプロキシ・ミドルウェア--saveダウンロードミドルウェア

ミドルウェアは、導入とapp.jsに登録されています

var proxy = require('http-proxy-middleware'); app.use('/api', proxy({target: 'http://www.example.org', changeOrigin: true}));

使用詳細、参照https://github.com/chimurai/http-proxy-middleware#options

第二に、少ないコンパイル済みの言語の使用

今のスタイルを書くことは、一般的に、プリコンパイル言語以下SASSを使用することができます

私はいくつかの構成を有しているためにあまり必要性を使用して、以下の個人的な習慣に合わせてお選び：

.vueファイルの<style>を必要としている1. LANG =「少ない」のような属性を追加します。

<style lang="less">

2.ダウンロードあまりローダー、以下のプラグイン、NPM少ない--save-devの少ないローダーをインストール

3. webpack.base.conf.jsプラスpostcss：[（ 'autoprefixer'）が必要（）]、次のように

vue: { 
    loaders: {  js: 'babel' }, postcss: [require('autoprefixer')()] }

これは.vue書き込み少ない文法内のスタイルにすることができ

第三に、.vueのCSSのファイル、CSSとして白羽

エキス・テキストのWebPACK-プラグインプラグインを使用するWebPACKの必要性

参照文献：https://vue-loader.vuejs.org/en/configurations/extract-css.html

NPMエキス・テキストのWebPACK-プラグイン--save-devのインストール

一般的にのみビルド環境に抽出する必要があるので、追加webpack.prod.conf.js

vue: { 
    loaders: {  
        css: ExtractTextPlugin.extract('vue-style-loader', 'css'), // you can also include <style lang="less"> or other langauges less: ExtractTextPlugin.extract('vue-style-loader', 'css!less') } }

CSSはstyle.cssにファイル出力/静的/ CSSで生成されるように、プラグインの新しいExtractTextPlugin（「静的/ CSS /のstyle.css」）を追加します。

第四に、参照画像

テンプレートやスタイルは絵の中で参照する場合は、ファイル・ローダーを追加する必要があります

参考：https://vue-loader.vuejs.org/en/configurations/asset-url.html

1.ダウンロードLoaderは--save-FILE-DEVファイル・ローダーのインストールNPM
webpack.base.conf.js 2.ローダー内のアドオンを

 {
    test: /\.png$|\.jpg$|\.gif$|\.ico$/, 
    loader: "file?name=static/img/[name].[hash].[ext]", exclude: /node_modules/ }

第五に、遅延ロードを実装する（オンデマンド・ロード）

ページの比較的大きな数では、家に以前のjsの方法に従ってパッケージ化単一ページのアプリケーションが負荷に非常に遅いにつながることができ、この問題を解決するために、あなたは、パッケージを変更することができ、コードにホームページの負荷のみ共通のコードや家庭を聞かせて、ジャンプあなたが遅いロードホームプロジェクトの大きな問題を解決することができるので、他のページのリロードのjs対応するページに進みます。

公式文書アドレス

1.変更ルーティング

compenent遅延ロードをルーティングすることにより書き換えられます

const Plugin = r => require.ensure([], () => r(require('../views/Plugins/plugin')), 'Plugin');

特定のルーティングページ次のように：

Paste_Image.png

2.変更した構成のWebPACK

出力中にwebpack.prod.conf.jsに追加

chunkFilename: 'static/js/[id].[name]_[chunkhash:7].js'

私たちは、各モジュールrequire.ensureが個別に生成されたJSを導入していることがわかりますファイル名を指定して実行NPM実行ビルドこの時間

Paste_Image.png

ファイル名を指定して実行NPM実行PROD開始生産工程、ページ訪問のhttp：/ 3001：// localhostと
私はルートホームを定義していないので、それは以下のモジュールにジャンプします。

Paste_Image.png

表示要求は、唯一のindex.jsとnotFoundComponent.js要求されました。

Paste_Image.png

私は、アクセスルートを定義HTTP：// localhostを：3001 /プラグインの言葉を通るルートがジャンプしない場合は（定義された独自のビューのルートに応じて）、あなたは一般的なindex.jsに加えて、それを見ることができ、そして他のjsがロードされていませんリロードindex.js

Paste_Image.png

慎重にあなたが密接に見れば、あなたは問題があるstyle.cssにパッケージ内のcss app.vueに加えて、パッケージ内の他のVUEは、JSを行っていないことがわかります

webpack.prod.conf.jsでプラグインでこのように必要

new ExtractTextPlugin("static/css/style.css")

に改訂

//实现css分块，讲所有vue文件中的css打包到一个一个入口css中
new ExtractTextPlugin('static/css/[id].[name]_[chunkhash:7].css', { allChunks: true }) //加上这个插件，可以将通用的css和js单独打包成一个vendors.css和vendors.js new webpack.optimize.CommonsChunkPlugin({ name:'vendors', filename:'static/js/[id].[name].[hash].js', minChunks: function () { return true } })

minChunks：NUM NUMこれはCommonChunk内部の場所のみを必要と表し、

再ビルドを実行実行NPMは、ディレクトリについて生成されます。

Paste_Image.png

App.vue CSSはapp.vue JSとVUE / VUE-ルータvendor.jsにパッケージされている中で、中vendor.cssにパックされている内部のでしょう。

これは、遅延ロードを完了します。

しかし、それは、単一のファイル、展示会の神にVUEのCSSファイルをインストールする方法については達成されていません！

メモ：ライフサイクル（参考）

Paste_Image.png

3足の親指アップ

技術のブログ

著者：のライオン愛Zhamaの終了
します。https：リンク//www.jianshu.com/p/1696e256d774
出典：ジェーンの本が
著者によって著作権で保護されています。著者は認可商業転載してください接触、非商用の転載は、ソースを明記してください。