Webpack と vue2 ビルド vue プロジェクトのスケルトンの説明
この記事では主に 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」を追加するとpackage.jsonにレコードが残るためです。他のシステムでプロジェクトを開くと、開発中に npm を通じてインストールされた依存関係が使用できないことがわかります。これは、システムの互換性のためです。また、プロジェクトの開発時にインストール依存関係に「--D」を追加すると、プロジェクトを開く前にプロジェクト内のノードモジュールをコピーする必要がなく、npm を介してすべての依存関係をインストールするだけです。
$ npm i
webpack.config.js ファイルを設定します
webpack のすべての設定は webpack.config.js ファイルにあるため、プロジェクトを初期化した後、新しい webpack.config.js ファイルを作成する必要がありますそしてそれを設定します。 webpack の基本的な設定については前回書いたので省略し、設定コードを直接貼り付けます:
module.exports = {
entry: './src/main.js',
output:{
path: __dirname + '/dist/',
filename: 'bundle.js'
},
devtool:'source-map',
devServer:{
// 主要改变项目的根目录
contentBase: __dirname + '/dist/',
port:8080,
inline:true
},
module:{
loaders:[
{test:/\.css$/,loader :'style-loader!css-loader'},
{test:/\.js$/, loader:'babel-loader',exclude:/node_modules/},
{ test: /\.vue$/, loader: 'vue-loader' }
]
},
//vue文件想要解析必须要要加上这句才能成功
resolve: { alias: { 'vue': 'vue/dist/vue.js' } }
}package.json の設定
package.json の Start コマンドでは、開発モードが開始され、パッケージ化されたプロジェクトがビルドされます。
プロジェクトを開始します
$ npm start
プロジェクトをパッケージ化します
$ npm run build
プロジェクト全体のディレクトリ
src: 開発したソースファイルはこのディレクトリに配置されます
componエント:すべてのコンポーネントを保存するために使用されます
styles: すべてのスタイル ファイルを保存します
utils: 自分で記述する必要があるすべてのメソッドと関数を保存します
app.vue: すべての vue ファイルのエントリ ファイル
main.js: js エントリ ファイルプロジェクト全体用
index.html: このファイルは、実際のプロジェクトのルート ディレクトリ myApp に配置できます。ルート ディレクトリに配置されている場合は、webpack の contentBase: __dirname に配置されます。 .config.js、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('vue')是相同的意义<br>import Vue from 'vue';<br>
//引入App.vue文件，这个文件也是vue所有组件的入口，我们的项目就是将这个文件追加到index.html文件里面
import App from './App.vue';
new Vue({
el:'#app',
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」と入力すると、次の表示が表示されます。推奨事項:
以上がWebpack と vue2 ビルド vue プロジェクトのスケルトンの説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7562
15
1384
52
84
11
28
99
VUE3 入門チュートリアル: Webpack を使用したパッケージ化とビルド
Jun 15, 2023 pm 06:17 PM
Vue は、インタラクティブで効率的な Web アプリケーションを迅速に構築するのに役立つ優れた JavaScript フレームワークです。 Vue3 は、多くの新機能が導入された Vue の最新バージョンです。 Webpack は現在最も人気のある JavaScript モジュール パッケージャーおよびビルド ツールの 1 つで、プロジェクト内のさまざまなリソースの管理に役立ちます。この記事では、Webpack を使用して Vue3 アプリケーションをパッケージ化してビルドする方法を紹介します。 1.Webpackをインストールする
Nginx Webサーバーキャディの使用方法
May 30, 2023 pm 12:19 PM
Caddy の概要 Caddy は強力で拡張性の高い Web サーバーであり、現在 Github 上に 38,000 以上のスターが付いています。 Caddy は Go 言語で書かれており、静的リソースのホスティングとリバース プロキシに使用できます。 Caddy には以下の主な特徴があります: Nginx の複雑な構成と比較して、元の Caddyfile 構成は非常にシンプルです; 提供する AdminAPI を通じて構成を動的に変更できます; デフォルトで自動 HTTPS 構成をサポートし、自動的に適用して構成できますHTTPS 証明書; 数万のサイトのデータに拡張可能; 追加の依存関係なしでどこでも実行可能; Go 言語で記述されているため、メモリの安全性がより保証されます。まずはCentOに直接インストールします
Java API開発におけるWebサーバー処理にJetty7を使用する
Jun 18, 2023 am 10:42 AM
JavaAPI 開発における Web サーバー処理に Jetty7 を使用する インターネットの発展に伴い、Web サーバーはアプリケーション開発の中核部分となり、多くの企業でも注目を集めています。増大するビジネス ニーズを満たすために、多くの開発者が Web サーバー開発に Jetty の使用を選択しており、その柔軟性と拡張性は広く認識されています。この記事では、JavaAPI 開発における Jetty7 の使用方法を紹介します。
ウェブ上の顔面ブロック攻撃に対するリアルタイム保護 (機械学習に基づく)
Jun 10, 2023 pm 01:03 PM
顔面遮蔽弾幕とは、映像内の人物を遮ることなく大量の弾幕が浮遊し、人物の背後から浮遊しているように見せることです。機械学習は数年前から普及していますが、これらの機能がブラウザでも実行できることは多くの人に知られていません。この記事では、ビデオ連発における実際的な最適化プロセスを紹介します。記事の最後に、適用可能なシナリオをいくつか示します。このソリューションを開くことを望んでいます。いくつかのアイデアがあります。 mediapipeDemo (https://google.github.io/mediapipe/) は、顔ブロック弾幕のオンデマンドアップアップロードの主流の実装原理を示していますサーバーのバックグラウンド計算により、ビデオ画面内のポートレート領域を抽出し、SVG ストレージに変換しますクライアントがビデオを再生している間、サーバーから SVG をダウンロードし、弾幕、ポートレートと組み合わせる
Golang を使用して Web アプリケーションのフォーム検証を実装する方法
Jun 24, 2023 am 09:08 AM
フォーム検証は Web アプリケーション開発において非常に重要なリンクであり、フォーム データを送信する前にデータの有効性をチェックして、アプリケーションのセキュリティ脆弱性やデータ エラーを回避できます。 Web アプリケーションのフォーム検証は、Golang を使用すると簡単に実装できます。この記事では、Golang を使用して Web アプリケーションのフォーム検証を実装する方法を紹介します。 1. フォーム検証の基本要素 フォーム検証の実装方法を紹介する前に、フォーム検証の基本要素が何であるかを知る必要があります。フォーム要素: フォーム要素は
FRPS サーバーと Web がポート 80 を共有するように nginx を設定する方法
Jun 03, 2023 am 08:19 AM
まず、frpって何？という疑問があると思います。簡単に言うと、frp はイントラネット侵入ツールであり、クライアントを設定すると、サーバー経由でイントラネットにアクセスできるようになります。現在、私のサーバーは Web サイトとして nginx を使用しており、ポート 80 が 1 つだけあります。では、FRP サーバーもポート 80 を使用したい場合はどうすればよいでしょうか?クエリ後、nginx のリバース プロキシを使用してこれを実現できます。追加: frps はサーバー、frpc はクライアントです。ステップ 1: サーバーの nginx.conf 構成ファイルを変更し、次のパラメータを nginx.conf の http{} に追加します。server{listen80
ウェブ標準とは何ですか?
Oct 18, 2023 pm 05:24 PM
Web 標準は、W3C およびその他の関連組織によって策定された一連の仕様とガイドラインです。HTML、CSS、JavaScript、DOM、Web アクセシビリティおよびパフォーマンスの最適化の標準化が含まれます。これらの標準に従うことで、ページの互換性を向上させることができます。 、メンテナンス性とパフォーマンス。 Web 標準の目標は、Web コンテンツをさまざまなプラットフォーム、ブラウザー、デバイス上で一貫して表示および操作できるようにして、より優れたユーザー エクスペリエンスと開発効率を提供することです。
コックピット Web UI から管理アクセスを有効にする方法
Mar 20, 2024 pm 06:56 PM
Cockpit は、Linux サーバー用の Web ベースのグラフィカル インターフェイスです。これは主に、初心者/熟練ユーザーにとって Linux サーバーの管理を容易にすることを目的としています。この記事では、Cockpit アクセス モードと、CockpitWebUI から Cockpit への管理アクセスを切り替える方法について説明します。コンテンツ トピック: コックピット エントリ モード 現在のコックピット アクセス モードの確認 CockpitWebUI からコックピットへの管理アクセスを有効にする CockpitWebUI からコックピットへの管理アクセスを無効にする まとめ コックピット エントリ モード コックピットには 2 つのアクセス モードがあります。 制限付きアクセス: これは、コックピット アクセス モードのデフォルトです。このアクセス モードでは、コックピットから Web ユーザーにアクセスできません。
