プロジェクトの構築には webpack+vue2 を使用します-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

プロジェクトの構築には webpack+vue2 を使用します

亚连

Jun 12, 2018 pm 06:03 PM

vuevue2

この記事では主に webpack+vue2 で Vue プロジェクトのスケルトンを構築する方法を紹介しますので、参考にしてください。

フロントエンドプロジェクトパッケージングツール webpack とフロントエンド開発フレームワーク vue は、フロントエンドとバックエンドの分離後、現在非常に人気のあるテクノロジとなっています。今日は、webpack と vue2 を使用して基本的なスケルトンを構築する方法について主に説明します。フロントエンドとバックエンドの分離プロジェクト。 vue-cli スキャフォールディングを使用するとプロジェクトのスケルトンを構築するのに役立ちますが、それでも原則を理解することが重要だと思うので、この記事では主に webpack と vue を使用した基本的なプロジェクトの構築について書きます。前提として、nodejsがインストールされていることが前提となります。

プロジェクト全体には、npm を通じて依存関係をインストールする必要があります

css: style-loader、css-loader、sass-loader、node-sass

js: babel-core、babel-loader、babel-preset-es2015

webpack: webpack、webpack-dev-server

vue: vuer、vue-loade、vue-html-loader、vue-template-compiler

新しいプロジェクトディレクトリを作成します

まず、新しいプロジェクトディレクトリを作成する必要がありますmyApp プロジェクトを配置し、ターミナルにプロジェクトを入力して、プロジェクトの初期化を開始します。

プロジェクトの初期化

$ npm init

プロジェクトを初期化する際は、特に必要がなければそのまま「Enterキー」を押してください。プロジェクトの初期化が完了すると、主にプロジェクトの依存関係ディレクトリを保存し、プロジェクトの起動コマンドを構成するために package.json ファイルが生成されます。

依存関係のインストール

$ npm i style-loader --D

npmを使用して依存関係をインストールする場合、最後に「--D」を追加します。「--D」を追加するとpackge.jsonに記録が残るためです。他のシステムでプロジェクトを開くと、開発中に npm を通じてインストールされた依存関係が使用できないことがわかります。これは、システムの互換性のためです。また、プロジェクトの開発時にインストール依存関係に「--D」を追加すると、プロジェクトを開く前にプロジェクト内のノードモジュールをコピーする必要がなく、npm を介してすべての依存関係をインストールするだけです。

$ npm i

webpack.config.js ファイルを構成します

すべての Webpack 構成は webpack.config.js ファイルに含まれるため、プロジェクトを初期化した後、新しい webpack.config.js ファイルを作成して構成する必要があります。 Webpack の基本的な設定については前回書いたので、ここでは繰り返しません。設定コードを直接貼り付けます。

module.exports = {

 entry: &#39;./src/main.js&#39;,

 output:{

  path: __dirname + &#39;/dist/&#39;,

  filename: &#39;bundle.js&#39;

 },

 devtool:&#39;source-map&#39;,

 devServer:{

  // 主要改变项目的根目录

  contentBase: __dirname + &#39;/dist/&#39;,

  port:8080,

  inline:true

 },

 module:{

  loaders:[

   {test:/\.css$/,loader :&#39;style-loader!css-loader&#39;},

   {test:/\.js$/, loader:&#39;babel-loader&#39;,exclude:/node_modules/},

   { test: /\.vue$/, loader: &#39;vue-loader&#39; }

  ]

 },

 //vue文件想要解析必须要要加上这句才能成功

 resolve: { alias: { &#39;vue&#39;: &#39;vue/dist/vue.js&#39; } }

}

Configuration package.json

で設定する必要がある主要なプロジェクト起動コマンドpackage.json は次のとおりです: 開発モードの開始とパッケージプロジェクトのビルド。

プロジェクトを開始する

$ npm start

プロジェクトをパッケージ化する

$ npm run build

プロジェクト全体のディレクトリ

src: 開発するソースファイルはこのディレクトリに配置されます

components: すべてのコンポーネントを保存するために使用されます

styles : すべてのスタイルファイルを保存します

utils: 自分で記述する必要があるすべてのメソッド関数を保存します

app.vue: すべての vue ファイルのエントリファイル

main.js: プロジェクト全体の JS エントリファイル

index .html: このファイルは、実際のプロジェクト myApp のルートディレクトリに配置できます。ルートディレクトリに配置されている場合は、webpack.config.js の __dirname に配置されます。それは dist にあり、その後 contentBase : __dirname + '/dist/' になります。主な目的は、プロジェクトのサービスルートディレクトリの場所を変更することです。これは、localhos:8080 を開いたときにブラウザによって表示されるディレクトリです。 (テスト後、主に開発モードでリアルタイム更新を実現するために、パッケージによって生成された dist ディレクトリに配置することをお勧めします。これは正確ではない可能性があり、後のテスト後に変更されます)

index .html ファイルコード

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>webpack+vue</title>
</head>
<body>
 <p id="app"></p>
 <script src="./bundle.js"></script>
</body>
</html>

main.js ファイルコード

//引入vue框架<br>
//import是es6的写法，其实和var Vue = require(&#39;vue&#39;)是相同的意义<br>import Vue from &#39;vue&#39;;<br>
//引入App.vue文件，这个文件也是vue所有组件的入口，我们的项目就是将这个文件追加到index.html文件里面
import App from &#39;./App.vue&#39;;
new Vue({
 el:&#39;#app&#39;,
 components: {App},<br>//主要目点就是将App追加到“#app”里面去
 render: h => h(App)
}) 
App.vue文件代码
<template>
  <p>Hello VueJS!</p>  
</template>
<script>
 export default{
   name:"app"
  }
</script>

ここでプロジェクト全体の基本構造が完成しました。ブラウザに「localhost:8080」と入力すると、次の表示が表示されます。

上記は私がコンパイルしたものです。将来すべての人にとって役立つことを願っています。

async-validator を使用して Form コンポーネントを作成する方法 (詳細なチュートリアル)

casperjs とimilare.js を使用してピクセル比較を実装する方法 (詳細なチュートリアル)

を使用してクイックソートを実装する方法JavaScript (詳細なチュートリアル) チュートリアル)

以上がプロジェクトの構築には webpack+vue2 を使用しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

JavaScriptのコア：CまたはCの上に構築されていますか？May 05, 2025 am 12:07 AM

javascriptisnotbuiltoncorc;それは、解釈されていることを解釈しました。

JavaScriptアプリケーション：フロントエンドからバックエンドまでMay 04, 2025 am 12:12 AM

JavaScriptは、フロントエンドおよびバックエンド開発に使用できます。フロントエンドは、DOM操作を介してユーザーエクスペリエンスを強化し、バックエンドはnode.jsを介してサーバータスクを処理することを処理します。 1.フロントエンドの例：Webページテキストのコンテンツを変更します。 2。バックエンドの例：node.jsサーバーを作成します。

Python vs. Javascript：どの言語を学ぶべきですか？May 03, 2025 am 12:10 AM

PythonまたはJavaScriptの選択は、キャリア開発、学習曲線、エコシステムに基づいている必要があります。1）キャリア開発：Pythonはデータサイエンスとバックエンド開発に適していますが、JavaScriptはフロントエンドおよびフルスタック開発に適しています。 2）学習曲線：Python構文は簡潔で初心者に適しています。 JavaScriptの構文は柔軟です。 3）エコシステム：Pythonには豊富な科学コンピューティングライブラリがあり、JavaScriptには強力なフロントエンドフレームワークがあります。

JavaScriptフレームワークのパワーは、開発を簡素化し、ユーザーエクスペリエンスとアプリケーションのパフォーマンスを向上させることにあります。フレームワークを選択するときは、次のことを検討してください。1。プロジェクトのサイズと複雑さ、2。チームエクスペリエンス、3。エコシステムとコミュニティサポート。

JavaScript、C、およびブラウザの関係May 01, 2025 am 12:06 AM

はじめに私はあなたがそれを奇妙に思うかもしれないことを知っています、JavaScript、C、およびブラウザは正確に何をしなければなりませんか？彼らは無関係であるように見えますが、実際、彼らは現代のウェブ開発において非常に重要な役割を果たしています。今日は、これら3つの間の密接なつながりについて説明します。この記事を通して、JavaScriptがブラウザでどのように実行されるか、ブラウザエンジンでのCの役割、およびそれらが協力してWebページのレンダリングと相互作用を駆動する方法を学びます。私たちは皆、JavaScriptとブラウザの関係を知っています。 JavaScriptは、フロントエンド開発のコア言語です。ブラウザで直接実行され、Webページが鮮明で興味深いものになります。なぜJavascrを疑問に思ったことがありますか

node.jsは、型を使用してストリーミングしますApr 30, 2025 am 08:22 AM

node.jsは、主にストリームのおかげで、効率的なI/Oで優れています。ストリームはデータを段階的に処理し、メモリの過負荷を回避します。大きなファイル、ネットワークタスク、リアルタイムアプリケーションの場合。ストリームとTypeScriptのタイプの安全性を組み合わせることで、パワーが作成されます

Python vs. JavaScript：パフォーマンスと効率の考慮事項Apr 30, 2025 am 12:08 AM

PythonとJavaScriptのパフォーマンスと効率の違いは、主に以下に反映されています。1）解釈された言語として、Pythonはゆっくりと実行されますが、開発効率が高く、迅速なプロトタイプ開発に適しています。 2）JavaScriptはブラウザ内の単一のスレッドに限定されていますが、マルチスレッドおよび非同期I/Oを使用してnode.jsのパフォーマンスを改善でき、両方とも実際のプロジェクトで利点があります。

JavaScriptの起源：その実装言語の調査Apr 29, 2025 am 12:51 AM

JavaScriptは1995年に発信され、Brandon Ikeによって作成され、言語をCに実現しました。 2。JavaScriptのメモリ管理とパフォーマンスの最適化は、C言語に依存しています。 3. C言語のクロスプラットフォーム機能は、さまざまなオペレーティングシステムでJavaScriptを効率的に実行するのに役立ちます。

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター

SecLists

SecLists は、セキュリティテスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティテスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティテストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジングペイロード、機密データパターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテストマシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。