序文
VUE-cliの建築プロジェクトを使用してのVue +のWebPACKの建築プロジェクト、。
レディ
VUEの独立したプロジェクトでは、ノードのパッケージマネージャのNPMに依存するため、あなたはノードをインストールする必要があります。
NPMの共通コマンド関連記事：
ステップ
足場の取り付けVUE-CLI
npm install -g vue-cliテンプレートを選択しWebPACKの
# vue init webpack 项目名称
vue init webpack lx-note-front
注文が完了するのを待っています。
私たちは、プロジェクトを実行するためには、このコマンドを実行することができ、上記のインターフェースから見ることができます：cd lx-note-frontプロジェクトディレクトリを開き、プロジェクトの完了後にコマンド構造を実行します。
プロジェクトの実行
実行してnpm run dev、次のようにプロジェクトを開始するコマンドを、プロジェクト開始の効果は次のとおりです。
インターフェース上に表示されますが、我々が正常に設定されていることを示しています。
プロジェクトディレクトリを説明
- 構築：WebPACKのコンフィギュレーション関連;
- build.js：NPMの実行は、実行されるスクリプトを構築します。
- versions.jsチェック：ノードとNPMのバージョンを確認します。
- utils.js：工具方法、及び主としてCSSLoader styleLoader構成を生成するために使用されます。
- VUE-loader.conf.js：vueloader構成情報。
- webpack.base.conf.js：devのと共通の構成ををprod。
- webpack.dev.conf.js：DEV環境を設定します。
- webpack.prod.conf.js：prod環境を設定します。
- 設定：環境変数の設定。
- dev.env.js：環境変数の設定をdevの。
- DEVとはprod環境index.jsいくつかの基本的な構成。
- prod.env.js：prod環境変数の設定。
- node_modules：NPMの依存関係は、コードライブラリをインストール。
- SRC：ソースプロジェクト。
- 静的：静的なストレージリソースのCSS、JSなど。
- .gitkeep：空のファイルでも、リポジトリにコミットすることができますします。
- .babbelrc：バベルの設定（バベル：ES5ほとんどのブラウザを識別することができる構文にES6の構文を変換します）。
- .editorconfig：コンフィギュレーションエディタは、コード、インデントを修正します。
- .eslintignore：ファイルディレクトリの無視された構文チェック。
- .eslintrc.js：eslintプロファイル、管理およびテストツールのjsコードスタイル。
- .gitignore：ファイルのバージョンに含まれていないgitのを無視する必要があります。
- .postcssrc.js：サフィックスを追加するためのプライベートブラウザ（別のブラウザのCSSスタイルと互換性のあります）。
- index.htmlを：HTMLドキュメントの入口。
- パッケージlock.json：ロックがインストールされている場合、パッケージのバージョン番号で、開発者のための一貫した開発環境を確保するためには、gitのにアップロードする必要があります。
- package.json：プロジェクトプロファイルは、プロジェクトの説明、コマンド、プラグインに依存し;
- README.md：プロジェクトの説明や他の主要な書類。
WebPACKのパッケージVUEプロジェクト
何がそれをWebPACKの？
WebPACKのパッカーモジュールは、すべてのモジュール一緒にパックHTML、CSS、JS、画像、その他のファイル間の依存関係が可能です。
# 重新生成打包js
webpack --display-modules --display-chunks --config webpack.config.js
# 实时自动打包 webpack -w
webpack --watch
# 显示异常信息
webpack --display-error-details
# 压缩混淆脚本
webpack -p
# 提供source map，方便调式代码
webpack -dブートストラップをインストールするのWebPACKのVUEプロジェクト
：jQueryの依存性ブートストラップ、それは導入前はjQueryのブートストラップ、jQueryの依存popper.jsを含める必要があり
、インストール時：
- インストールポッパー
- インストールのjqueryの
- インストールのブートストラップ
導入ポッパー依存性
npm install popper.js --save-devの導入に依存してはJQuery
npm install jquery
# 或者限定jQuery的版本
npm install [email protected] --save-devブートストラップの導入に依存
npm install [email protected] --save-devはじめにブートストラップjqueryの
- ビルドディレクトリに追加されたwebpack.base.conf.js：
const webpack = require('webpack')- コンフィギュレーションのjQuery：次のフォーマットを作成しないでください、プラグインを探し、ファイルでmodule.exportsはを見つけます：
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'windows.jQuery': 'jquery',
Popper: ['popper.js', 'default']
})
]ブートストラップとjQueryで導入Main.js
import $ from 'jquery'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min'あなたは、スタイルを追加することができますし、$記号とブートストラップ法の満了後に導入が成功したかどうかをテストすることができます。
他のプラグインの導入
npm install [email protected] --save-dev
npm install [email protected] --save-dev
npm install [email protected] --save-dev
npm install [email protected] --save-dev
