小さくて美しい Vue プロジェクトの動作: 軽量の Vue および Webpack アプリケーション-Vue.js-php.cn

小さくて美しい Vue プロジェクトの動作: 軽量の Vue および Webpack アプリケーション

WBOY

リリース： 2023-06-09 16:07:19

オリジナル

1496 人が閲覧しました

Vue フレームワークの台頭により、フロントエンド開発の方法が変わり、そのシンプルさ、使いやすさ、効率性、柔軟性が大多数の開発者に認められました。 Webpack は、強力なモジュールパッケージングツールとして、フロントエンドエンジニアリングの開発でも重要な役割を果たします。この記事では、軽量の Vue.js と Webpack を使用して開発され、すぐに開始でき、初心者向けの学習リファレンスとなる、小さくて美しい Vue プロジェクトを実際に紹介します。

前提知識

この記事を学ぶ前に、次の知識を蓄えておく必要があります:

• 基本的な HTML、CSS、および JavaScript の開発能力;

• Vue.js の基本知識と一般的な API の使用;

• Webpack の基本知識と一般的な設定項目の使用。

上記の知識に慣れていない場合は、まず基礎的な学習と演習を行うことをお勧めします。

プロジェクト開発プロセス

次の手順でプロジェクトを開発します。

• プロジェクトを初期化する

#• 依存関係をインストールする

• Webpack の構成

• ページレイアウトのデザイン

• Vue コンポーネントの作成

• プロジェクトのパッケージ化

次に、ステップバイしてみましょうVue と Webpack のアプリケーション開発の旅に足を踏み入れましょう。

プロジェクトの初期化

Vue-cli を使用すると、Vue.js プロジェクトのスケルトンをすばやく生成でき、迅速な開発を促進するためにいくつかの共通の構成項目をプリセットできます。ここでは、Vue-cli を使用してプロジェクトを初期化します。

最初のステップは、Vue-cli ツールをインストールすることです:

npm install -g @vue/cli

ログイン後にコピー

2 番目のステップは、Vue-cli で新しいプロジェクトを作成し、コマンドラインで作業ディレクトリを入力することです:

vue create vue-webpack-project

ログイン後にコピー

ここで作成したプロジェクトの名前は vue-webpack-project で、Vue-cli は現在のディレクトリに vue-webpack-project という名前のプロジェクトフォルダーを生成します。

依存関係のインストール

プロジェクトのルートディレクトリに入り、次のコマンドを実行して必要な依存関係をインストールします:

npm install vue vue-router --save

ログイン後にコピー

ここにインストールする必要がある依存関係Vue.js と Vue-router を含めます。Vue-router は、Vue.js によって公式に提供されているルーティングプラグインで、フロントエンドのルーティング関連の問題を簡単に処理できます。

Webpack の構成

実際の開発では、Webpack の構成は通常、コードを記述するよりも複雑であるため、いくつかの一般的な構成項目を構成するだけで十分です。

最初のステップは、Webpack の構成を保存する新しい webpack.config.js ファイルを作成することです:

const path = require('path');
const { VueLoaderPlugin } = require('vue-loader');

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /.vue$/,
        use: 'vue-loader'
      },
      {
        test: /.js$/,
        use: 'babel-loader'
      },
      {
        test: /.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ]
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ]
};

ログイン後にコピー

ここでは 3 つのルールを構成します: .vue ファイルを処理するための vue-loader、babel .js ファイルを処理する -loader、.css ファイルを処理する css-loader および vue-style-loader プラグイン。

2 番目の手順では、package.json ファイルを変更し、プロジェクトルートディレクトリで Webpack を実行するコマンドを script 属性に追加します。

{
  "scripts": {
    "build": "webpack"
  },
  ……
}

ログイン後にコピー

ページレイアウトをデザインします

プロジェクト開発の前に、最初にページレイアウトを設計する必要があります。ここでは、迅速な開発のために ElementUI コンポーネントライブラリを使用し、コンポーネントを HTML ファイルで直接使用します。

<!DOCTYPE html>
<html>
  <head>
    <title>vue-webpack-project</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  </head>
  <body>
    <div id="app">
      <el-container>
        <el-header>Header</el-header>
        <el-container>
          <el-aside>Aside</el-aside>
          <el-main>Main</el-main>
        </el-container>
      </el-container>
    </div>
    <script src="./dist/bundle.js"></script>
  </body>
</html>

ログイン後にコピー

Vue コンポーネントの書き込み

src ディレクトリに、Header.vue と Main.vue という 2 つの新しい .vue ファイルを作成します。コードは次のとおりです。

Header.vue

<template>
  <el-header>
    <h1>Header</h1>
  </el-header>
</template>

<script>
export default {
}
</script>

<style scoped>
el-header {
  text-align: center;
  color: #fff;
  background-color: #409EFF;
}
</style>

ログイン後にコピー

Main.vue

<template>
  <el-main>
    <h1>Main</h1>
  </el-main>
</template>

<script>
export default {
}
</script>

<style scoped>
el-main {
  text-align: center;
}
</style>

ログイン後にコピー

ここでは、ElementUI コンポーネントを使用して、Header と Main のレイアウトを実装します。

プロジェクトのパッケージ化

コマンドラインで、次のコマンドを実行して Webpack をパッケージ化します。

npm run build

ログイン後にコピー

Webpack は、次の手順に従ってプロジェクトをパッケージ化します。構成、 dist ディレクトリと Bundle.js ファイルを生成します。

概要

この記事では、プロジェクトの初期化、依存関係のインストール、次のような手順など、小さいながらも美しい Vue プロジェクトを通じて軽量の Vue.js と Webpack の使用方法を紹介します。 Webpack の設定、ページレイアウトの設計、Vue コンポーネントの作成、およびプロジェクトのパッケージ化。 Vue と Webpack の初心者は、この記事を参照して基本的な使用法と構成を練習および学習し、Vue.js と Webpack についての理解を深めてください。

以上が小さくて美しい Vue プロジェクトの動作: 軽量の Vue および Webpack アプリケーションの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。