Webpack と vue2 ビルド vue プロジェクトのスケルトンの説明-jsチュートリアル-php.cn

Webpack と vue2 ビルド vue プロジェクトのスケルトンの説明

小云云

リリース： 2018-01-11 09:32:14

オリジナル

2098 人が閲覧しました

この記事では主に 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: &#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; } }

}

ログイン後にコピー

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(&#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」と入力すると、次の表示が表示されます。推奨事項:

vue プロジェクトのホームページの読み込み速度の最適化例の共有

vue プロジェクトの共通コンポーネントとフレームワーク構造についての共有

新しい vue プロジェクトの作成方法

以上がWebpack と vue2 ビルド vue プロジェクトのスケルトンの説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。