単一のファイルの成分の使用における柔軟性VUE - 最小構成パッケージ部品.vue - コードワールド

VUE単一ファイルコンポーネントの場合、我々はVUE-CLIの使用が急速にプロジェクト構造を生成することができることを知って、NPMの実行ビルドコマンドを使用して、アセンブリ.vue単一ファイルを書き込むことがプロジェクトの依存関係（main.jsから通常main.jsを梱包開始しますApp.vue、ページの構成要素として、最高レベル、App.vueに参照される当社独自のコンポーネントを作成する）引用し、ビルド結果は、単一のページを記述するためのパッケージ化され、静的なJS / CSSファイルとのindex.htmlを、生成されますアプリケーションは非常に簡単ですが、変化するニーズは常に〜がたくさんあります

私は（より多くの個人がhtmlページを書いて使用する傾向がある）私はVUEのコンポーネントを書いたhtmlページで使用する場合は、全体ではなく単一ページのアプリケーションを構築するには、VUE-CLIをすることができ、それには？？？もちろん、あなたが望むように、我々はパッケージ効果の一つの成分のみを行うことができます見て修正、それらの構成を理解するために、行うことができます。

しかし、非常に多くのスパイシーなプロファイルを持つ、または0からそれ自身、すべての後、私はちょうど.vueコンポーネントをパックします。サンプルコードを書いて、正式な開始前に、完全を期す、簡単にはいくつかのツールを紹介します。

WebPACKの

WebPACKのはしているのですか？彼は、彼の目標は、タグの<script>でロードすることができ、ブラウザでの使用のために、一緒にパッケージされているJavaScriptファイルにある、モジュールパッカーです。
言い換えれば、WebPACKのは本当に唯一のjsファイルを知っているメンバーを、ファイルの他の種類の私たちはどうすればよいですか？ここでは、ファイルまたはリソースのために使用され、JavaScriptが、言葉では、プロセス等の画像、変換されたSASS /純度の低いCSSに使用することができますよう、ローダが（例えば活字体など）、異なる言語からのファイルを変換することができ、ローダーを使用する必要があり、ロードされたWebPACKのですパッケージの前処理。

ここでは、上記の説明は、そう、また、ニーズを特定し、.vueファイルを変換するために使用することができますローダーを考えることは困難で、我々はVUEコンポーネントをパッケージ化したい、私たちのニーズを考え、使用WebPACKのではありません。

ビューローダー

要するに、フォーマットが準備VUE JSモジュールであり、次のコンポーネントに変換されます。変換のためとして、我々は以下について説明しますどのようになります。終わり。

<template></template>
<script></script>
<style></style>

今すぐ開始

最初のフォルダを作成します。testprojectを。
testprojectへのコマンドライン、実行NPMの初期化、プロンプトのコマンドラインによると、プロジェクトのいくつかの初期化動作、

完了すると、私たちのプロジェクトはpackage.jsonファイル、オープンpackage.jsonは、configureニーズをパッケージいくつかの依存性を持つことになり、ここで次のように私は、いくつかの基本的な依存関係を超えるpackage.jsonのVUE-CLIのプロジェクトからファイルをコピーしました：
依存部分に依存関係をクリーンアップしています

{
  "name": "webpacktest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "lodash": "^4.17.4",
    "css-loader": "^0.28.0",
    "url-loader": "^0.5.8",
    "vue-loader": "^13.3.0",
    "vue-style-loader": "^3.0.1",
    "vue-template-compiler": "^2.5.2",
    "babel-core": "^6.22.1",
    "babel-loader": "^7.1.1",
    "babel-preset-env": "^1.3.2",
    "babel-preset-stage-2": "^6.22.0",
    "babel-register": "^6.22.0",
    "file-loader": "^1.1.4"
  }
}

ランは、インストールの瞬間を待って、私たちはモジュールOKを必要とするNPM。
あなたは、設定の依存関係を書いていないが「依存関係の依存関係」の場合ここで説明するのは、NPMパッケージ間の依存関係が存在する、コマンドラインが見に注意を払うように求められます。なぜ私はそれが「ファイル・ローダー」、スキップされたときに、私はコピーに依存しているため、これを言うん
SO SADを。^ _ ^

hellobundle.jsは今、私たちの例の内容を書き込むことができ、ここではhellobundle.jsと呼ばれるコンポーネントパッケージの名前の後に、我々は後にパッケージ化され、参照するコンポーネントをsayhello.html、hello.vueへの書き込みに私たちのアセンブリを設定します直接、ディレクトリtestprojectに新しいファイルに関連する次のように読み取ります。

<!--sayhello.html-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script src="./hellobundle.js"></script>
</head>
<body>
<div id="app">
  <hello></hello>
</div>
<script>
  var vm=new Vue({
    el:'#app',
    components:{
      hello:hello.default    //这里我们后面会解释为什么这样写
    }
  })
</script>
</body>
</html>

<!--hello.vue-->
<template>
  <h1>{{text}}</h1>
</template>
<script>
  export default{
    name:'hello',
    data:function() {
      return  {
        text:'hello~~~'
      }
    }
  }
</script>
<style>
  h1{
    color: #ffb93f;
  }
</style>

（あなたは非常に詳細に記述し、WebPACKの公式ガイドを移動することができますどこかわからない）私たちは、パッケージコマンド+ webpack.config.js方法については、スクリプトを使用することを選択し、コンテンツが非常に簡単で、今我々はhello.vueに、このコンポーネントをパッケージ化したい、またはルートでディレクトリ、次のように、webpack.config.jsファイルを作成します。

//webpack.config.js
const path = require('path')
module.exports = {
  entry  : './hello.vue',             //入口文件
  output : {
    filename : 'hellobundle.js',     //出口文件名
    path     : path.resolve(__dirname),    //当前目录
    library  : 'hello'       // 打包后模块的名称
  },
  module : {     
    rules : [    //定义不同类型的文件使用的loader
      {
        test   : /\.vue$/,
        loader : 'vue-loader'
      },
      {
        test   : /\.js$/,
        loader : 'babel-loader'
      }
    ]
  }
}

ここでは、ほぼほとんどの簡素化構成は次のように、これを書かれ、最終的な外部モジュールの設定ファイル名、パスと名前をエクスポートし、package.jsonにスクリプトコマンドを追加し、hello.vueは、私たちのエントリ文書としてパッケージ化され、あります：

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build":"webpack"     //<-------就四这行，，
  },

コンポーネントファイル、WebPACKの設定ファイル.vue書かれた、そして今、我々は、NPMの実行ビルドを実行し、その結果は次の通りです：

testprojectディレクトリでは、我々はまた、次のようにhellobundle.jsはそうhello.vueパッケージした後、全体testproject結果があるんです

最後に、我々はパッケージが利用可能hellobundle.js、ブラウザで開いてsayhello.htmlであることを確認することができます：

あなたは黄色のハローを見ることができます勿論,,ここにコンポーネントを登録するときに使用される当社のsayHelloページは約言っている：
コンポーネント：{

  hello:hello.default    //这里我们后面会解释为什么这样写
}

実際には、最初に、私は、所望の効果は、あなたがのsayHelloページを開いたとき、我々はhellobundle.js変数のコンソール出力に少しハローを印刷発生しなかった、WebPACKの設定ハロー変数を使用します。

そう、少しハロー参照を修正します。

エピローグ

最も単純な原則では、プロジェクト構造の例は、SRC / distのディレクトリ構造などの仕様に応じて、書き込みにはありませんが、我々はWebPACKのダイナミックパッケージ論文のコマンドライン引数を使用し、さらに私たちのパッケージの機能を改善し続けることができ、このステップの後に書きましたなど、ホットリロード、これがそうである、それはそれらを繰り返さない、複雑ました。--end ^ _ ^私を修正してください