ホームページ >ウェブフロントエンド >jsチュートリアル >Webpack と vue2 ビルド vue プロジェクトのスケルトンの説明
Webpack と vue2 ビルド vue プロジェクトのスケルトンの説明
- 小云云オリジナル
- 2018-01-11 09:32:142099ブラウズ
この記事では主に 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 サイトの他の関連記事を参照してください。