ホームページ > 記事 > ウェブフロントエンド > 小さくて美しい Vue プロジェクトの動作: 軽量の Vue および Webpack アプリケーション
小さくて美しい Vue プロジェクトの動作: 軽量の Vue および Webpack アプリケーション
- WBOYオリジナル
- 2023-06-09 16:07:191458ブラウズ
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 サイトの他の関連記事を参照してください。