VueがWebPACKの開発環境を使用してゼロから構築されました

その他 2019-09-26 21:02:36 訪問数: null

プロジェクトを作成します。

空のディレクトリを作成し、ディレクトリ内のコマンドラインを開き、実行するnpm initプロジェクトを作成するためのコマンドを（NPMコマンドを実行していない？インストールする必要があるノードを終えたときに行に入力して自由に、）、このプロセスは、いくつかのコンテンツを入力するように求められます、それはパッケージを自動的に生成します。先ほど入力した内容が含まれているJSONファイル、

index.htmlページを作成Vueの開発は、単一ページのアプリケーションの使用に起因して、それは通常のHTMLファイルで十分です、内容も非常に簡単です、ただのdiv＃アプリ

事業

  project-name
+ |- index.html
  |- package.json

index.htmlを

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>这是标题</title>
</head>
<body>
<div id="app"></div>
</body>
</html>

事業

  project-name
  |- index.html
+ |- index.js
  |- package.json
+ |- webpack.config.js

WebPACKの設定ファイルをwebpack.config.jsとして、次のようにメインの入り口としてIndex.jsは、ファイルを作成し、プロジェクトを作成するには

webpack.config.js

'use strict'

const path = require('path')

module.exports = {
  mode: 'development',
  entry: './index.js',
  output: {
    filename: 'index.js',
    path: path.resolve(__dirname, 'dist')
  }
}

実行しnpm install --save-dev webpack-cli、インストールのWebPACK

package.jsonファイルで対応するscripts書き込みコマンド

package.json

  {
    "scripts": {
+     "build": "webpack"
    }
  }

実行npm run build現在一つだけのファイルindex.jsのうち、梱包、（からのコンフィギュレーション・ファイルで定義される）distディレクトリで成功した後、パッケージ、パッケージファイルを完了するために

ローカルサービスを開始

使用のWebPACK-devのサーバーを開発し、地元のデバッグを容易に、ローカルサービスを開始するには

実行 npm install --save-dev webpack webpack-dev-server

package.jsonファイルで対応するscripts書き込みコマンド

package.json

  {
    "scripts": {
+     "dev": "webpack-dev-server",
      "build": "webpack"
    }
  }

実行がnpm run devローカルサービスを開始するには、訪問はlocalhostは次のように8080から8080には、デフォルトのポート番号は、ポート設定がある変更

webpack.config.js

module.exports = {
  // ...
  devServer: {
    compress: true,
    port: 8080
  }
}

HTMLファイルを生成します

使用するHTML-WebPACKの-プラグインを HTMLファイルを生成します

実行 npm install --save-dev html-webpack-plugin

webpack.config.jsプロファイルを追加

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  // ...
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: './index.html'
    })
  ]
}

インストールのVue

実行 npm install --save-dev vue-loader vue-template-compiler

実行 npm install --save vue vue-router

.vueを導入するVUEローダファイルタイプに配置Webpack.config.js

webpack.config.js

const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: [
          {
            loader: 'vue-loader'
          }
        ]
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ]
}

新しいルーティングコンポーネントのコンテナとしてApp.vueファイル

事業

  project-name
+ |- app.vue
  |- index.html
  |- index.js
  |- package.json
  |- webpack.config.js

app.vue

<template>
<router-view></router-view>
</template>

<script>
export default {}
</script>

index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

import appView from 'app.vue'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: require('./index.vue').default
    }
  ]
})

new Vue({
  el: '#app',
  router,
  render(h) { return h(appView) }
})

index.vueホームなどの新しいファイルを作成します。

事業

  project-name
  |- app.vue
  |- index.html
  |- index.js
  |- package.json
+ |- index.vue
  |- webpack.config.js

index.vue

<template>
<div>
  <h1>这是首页</h1>
</div>
</template>

<script>
export default {}
</script>

ページを追加

about.vueとしてページファイルについての追加

事業

  project-name
+ |- about.vue
  |- app.vue
  |- index.html
  |- index.js
  |- package.json
  |- index.vue
  |- webpack.config.js

about.vue

<template>
<div>
  <h1>这是关于页</h1>
</div>
</template>

<script>
export default {}
</script>

ページ上のルーティングの設定

index.js

// ...

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: require('./index.vue').default
    },
    {
      path: '/about',
      component: require('./about.vue').default
    },
  ]
})

// localhostを：8080 /＃/ページに表示しようとします。httpをご覧ください

ドキュメントの分類

ページの増加に伴い、VUEファイルが現在のディレクトリにあるソースファイルの開発を配置するためにsrcディレクトリを作成するには、プロジェクトのルートディレクトリに、より多くの科学ではないだろう

ページディレクトリにVUEのページファイルを配置するsrcディレクトリページ内のディレクトリ、app.vue、index.vue、about.vueファイルを作成し、対応する参照パスを変更

事業

  project-name
- |- about.vue
- |- app.vue
  |- index.html
  |- index.js
  |- package.json
- |- index.vue
  |- webpack.config.js
+ |- /src
+   |- /pages
+     |- about.vue
+     |- app.vue
+     |- index.vue

index.js

// ...

import appView from './src/pages/app.vue'

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: require('./src/pages/index.vue').default
    },
    {
      path: '/about',
      component: require('./src/pages/about.vue').default
    },
  ]
})

同じように./src/pages/index.vue、この長いパスはあまりにも面倒、webpack.config.jsでエイリアスの設定パラメータを書き始め

webpack.config.js

module.exports = {
  // ...
  resolve: {
    alias: {
      '@': path.join(__dirname, 'src')
    }
  }
}

ページのパスは、上記再び書き換えることができます。

index.js

// ...

import appView from '@/pages/app.vue'

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: require('@/pages/index.vue').default
    },
    {
      path: '/about',
      component: require('@/pages/about.vue').default
    },
  ]
})

個別に抽出された一方で、ルーティング設定、routes.jsのsrc / jsのディレクトリに新しいファイル（jsの新しいディレクトリに必要）

事業

  project-name
  |- index.html
  |- index.js
  |- package.json
  |- webpack.config.js
  |- /src
+   |- /js
+     |- routes.js
    |- /pages
      |- about.vue
      |- app.vue
      |- index.vue

routes.js

module.exports = [
  {
    path: '/',
    component: require('@/pages/index.vue').default
  },
  {
    path: '/about',
    component: require('@/pages/about.vue').default
  },
]

index.js

// ...

import routes from '@/js/routes'

const router = new VueRouter({
  routes
})

バベルの設定

前のコードの構文ES2015ので、より多くのブラウザのプロジェクトが互換性を持たせるためには、あなたが使用する必要があるバベルのコード変換を

実行 npm install --save-dev @babel/core @babel/preset-env babel-loader

webpack.config.js

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader'
          }
        ]
      }
    ]
  }
}

.babelrcファイルを作成します（作成する方法がわからない？プロジェクトから直接コピーすることができます）

事業

  project-name
+ |- .babelrc
  |- index.html
  |- index.js
  |- package.json
  |- webpack.config.js
  ...

.babelrc

{
  "presets": ["@babel/preset-env"]
}

CSS

このプロジェクトは、確かにプロジェクトのスタイルが内部に記述することができ、最初の新しいファイルのstyle.cssスタイルを作成、CSSを使用します。

事業

  project-name
  |- .babelrc
  |- index.html
  |- index.js
  |- package.json
+ |- style.css
  |- webpack.config.js
  ...

その後、インストールNormalize.cssをさまざまなブラウザで一貫性のある結果をレンダリングするために、これはほかに、あなたが選択することができ、スタイルの初期化方式は任意であるだけであるブートストラップやブルマや他のスタイルライブラリは、開発のための基礎として、より多くのスタイルが含まれています

実行 npm install --save normalize.css

内部index.jsへの直接参照に

index.js

import 'normalize.css'
import './style.css'
// ...

ここで引用されたcssファイルので、直接のjsファイルで、必要であるCSS-ローダー処理するために、

実行 npm install --save-dev css-loader style-loader

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader'
          }
        ]
      }
    ]
  }
}

また、あなたはVUE内部のCSSファイルを書き込むことができます

index.vue

<template>
<div>
  <h1>这是首页</h1>
</div>
</template>

<script>
export default {}
</script>

<style>
h1 {
  text-align: center;
}
</style>

書き込み形式モードのどちらのタイプには、特定のニーズを使用するように選択することができます

抽出されたスタイルファイル

内部JS方法CSSのCSSコードの上に導入し、最終的なパッケージの後に、別のCSSを必要とするサイトのパフォーマンスのために使用して抽出されたミニCSS-抽出物プラグイン CSSを抽出するためにプラグインを

実行 npm install --save-dev mini-css-extract-plugin

webpack.config.js

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader // 代替 style-loader
          },
          {
            loader: 'css-loader'
          }
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: `[name].css`
    })
  ]
}

写真付き

プロジェクトは、絵に有用であることが必要である場合は、ファイル・ローダー処理するために、

実行 npm install --save-dev file-loader

webpack.config.js

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i,
        loader: 'file-loader'
      }
    ]
  }
}

SRC / imagesディレクトリに画像にlogo.gifを準備する（画像はこの絵をテストするために使用され、新しいディレクトリを作成する必要があります）

事業

  project-name
  |- .babelrc
  |- index.html
  |- index.js
  |- package.json
  |- style.css
  |- webpack.config.js
  |- /src
+   |- /images
+     |- logo.gif
    |- /js
      |- routes.js
    |- /pages
      |- about.vue
      |- app.vue
      |- index.vue

index.vue

<template>
<div>
  <h1>这是首页</h1>
  <img src="@/images/logo.gif">
</div>
</template>

<script>
export default {}
</script>

<style>
h1 {
  text-align: center;
}
</style>

実装npm run buildパッケージが正常に映像パッケージが入って来たが発見されたが、絵の名前は、画像の名前を変更したくない場合は、ファイル・ローダーのパラメータを設定することができ、変更されました

webpack.config.js

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i,
        loader: 'file-loader',
        options: {
          name: 'images/[name].[ext]'
        }
      }
    ]
  }
}

CSSの圧縮

使用cssnano CSS、PostCSS生態系のプラグインの一部を圧縮するので、インストールする必要があるpostcssローダーを

実行 npm install --save-dev cssnano postcss-loader

Postcss.config.jsはPostCSSの設定ファイルであるファイルを、この中に書かれている構成を作成します

事業

  project-name
  |- .babelrc
  |- index.html
  |- index.js
  |- package.json
+ |- postcss.config.js
  |- style.css
  |- webpack.config.js
  ...

postcss.config.js

module.exports = {
  plugins: {
    'cssnano': {
      safe: true
    }
  }
}

webpack.config.js

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader
          },
          {
            loader: 'css-loader'
          },
          {
            loader: 'postcss-loader'
          }
        ]
      }
    ]
  }
}

CSSの前処理

本明細書で使用される場合、postcssプリセット-ENV前処理したCSSは、（サスを代わりに使用など以下であってもよいです）

実行 npm install --save-dev postcss-preset-env

プラグインはまた、PostCSS生態系に直接postcss.config.jsに割り当てを増やすことができ属し

postcss.config.js

  module.exports = {
    plugins: {
+     'postcss-preset-env': {},
      'cssnano': {
+       autoprefixer: false, // 这里两个插件都包含了 autoprefixer，只执行其中一个就行
        safe: true
      }
    }
  }

HTTPリクエスト

使用Axiosは Axios約束ベースのHTTPリクエストを送信し、そのインストールES6-プロミスポリフィルを

実行 npm install --save axios es6-promise

index.js

+ import 'es6-promise/auto'
+ import axios from 'axios'

  // ...

プロジェクトにリクエストを送ります

index.js

  import 'es6-promise/auto'
  import axios from 'axios'

+ axios.post('/login')

  // ...

この要求を実行した後、明らかに404を返し、その後、どのようにそれが有効なデータを返すん、で設定webpack.config.js devServerパラメータ

webpack.config.js

  module.exports = {
    // ...
    devServer: {
+     before(app, server) {
+       app.post('/login', (req, res) => {
+         res.json({success: true})
+       })
+     },
      compress: true,
      port: 8080
    }
  }

再起動後、あなたはデータを返すために、要求/ログインアドレスを見ることができ{"success": true}ますが、ローカルでのインターフェイスをデバッグすることができるように、

もちろん、すべてのインターフェイスが書かれている、あまりにも多くの問題は、使用することができますproxy行く他のアドレスへのパラメータインタフェースプロキシ要求を

webpack.config.js

  module.exports = {
    // ...
    devServer: {
      before(app, server) {
        app.post('/login', (req, res) => {
          res.json({success: true})
        })
      },
+     proxy: {
+       '/api': {
+         target: 'http://localhost:3000'
+       }
+     },
      compress: true,
      port: 8080
    }
  }

この場合、例えば、要求/ API /ポストが実際に委任されます http://localhost:3000/api/posts

俵

コンフィギュレーションモードパラメータ

webpack.config.js

module.exports = {
  mode: 'production'
  // ...
}

productionそして、developmentモードパラメータの2種類が明らかである、production出版のために、development開発のために、特に違いは何で、ここを見てこちらをクリック

実行はnpm run build、ディレクトリdistの中に作成されたファイルをパックした後、包装することができます

もっと

おすすめ

転載: www.cnblogs.com/xyzhanjiang/p/11590778.html
おすすめ
ランキング
SLAM 14 講義 - ch3 演習
bootstrap4在庫スタイルリスト（見つけるために）
件名インターネット
スレッドのタイムアウト
LinuxのLinuxのコマンド必見マスター初心者注3。
コンピュータネットワークのネットワークアプリケーションの00 05基本原則
「10の花」
Classic topic: the maximum value of the sliding window + the first K high-frequency elements
fastjson の脆弱性のさまざまなバージョンのペイロード テスト
PythonクローラーBaidu広告フィルタリングシステム
アーカイブ
もっと
2024-04-25(31)
2024-04-24(30)
2024-04-23(31)
2024-04-22(5)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)
2024-04-17(31)
2024-04-16(23)

コードワールド

© 2018 codetd.com