Erklärung des Webpack- und Vue2-Build-Vue-Projektskeletts

In diesem Artikel wird hauptsächlich die Methode von webpack + vue2 zum Erstellen des Grundgerüsts des Vue-Projekts vorgestellt. Der Herausgeber findet sie recht gut, daher werde ich sie jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Das Front-End-Projektverpackungstool Webpack und das Front-End-Entwicklungsframework Vue sind nach der Front-End- und Back-End-Trennung mittlerweile sehr beliebte Technologien. Heute sprechen wir hauptsächlich über die Verwendung von Webpack und Vue2 zum Erstellen Grundgerüst eines Front-End- und Back-End-Trennungsprojekts. Obwohl die Verwendung des Vue-Cli-Gerüsts uns beim Aufbau eines Projektskeletts helfen kann, halte ich es dennoch für wichtig, die Prinzipien zu verstehen. Daher geht es in diesem Artikel hauptsächlich um den Aufbau eines Basisprojekts mit Webpack und Vue. Voraussetzung ist, dass nodejs installiert wurde.

Das gesamte Projekt muss über NPM-Abhängigkeiten installiert werden

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

Neues Projektverzeichnis erstellen

Wir müssen zuerst ein neues Verzeichnis myApp erstellen, um unser Projekt zu speichern, das Projekt im Terminal eingeben, und starten Sie dann „Projekt initialisieren“.

Initialisierung des Projekts

$ npm init

Wenn beim Initialisieren des Projekts kein besonderer Bedarf besteht, drücken Sie einfach die Eingabetaste Schlüssel" Kann. Nach Abschluss der Projektinitialisierung wird eine package.json-Datei generiert, in der hauptsächlich das Projektabhängigkeitsverzeichnis gespeichert und der Projektstartbefehl konfiguriert wird.

Abhängigkeiten installieren

$ npm i style-loader --D

Wenn Sie npm zum Installieren von Abhängigkeiten verwenden, fügen wir am Ende „--D“ hinzu , da das Hinzufügen von „--D“ einen Eintrag in package.json hinterlässt. Wenn wir das Projekt in anderen Systemen öffnen, werden wir feststellen, dass die über npm während der Entwicklung installierten Abhängigkeiten nicht verwendet werden können. Dies liegt an der Systemkompatibilität. Und wenn Sie beim Entwickeln des Projekts „--D“ zu den Installationsabhängigkeiten hinzufügen, müssen die node_modules im Projekt nicht kopiert werden. Vor dem Öffnen des Projekts müssen wir nur alle Abhängigkeiten über npm installieren.

$ npm i

Konfigurieren Sie die Datei webpack.config.js

Alle Konfigurationen von Webpack befinden sich in webpack.config.js file , also müssen wir nach der Initialisierung des Projekts eine neue webpack.config.js-Datei erstellen und diese konfigurieren. Da ich das letzte Mal über die Grundkonfiguration von Webpack geschrieben habe, werde ich es hier nicht wiederholen, sondern meinen Konfigurationscode direkt einfügen:

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' } }

}

Konfiguration package. Die wichtigsten Dinge, die in json

package.json konfiguriert werden müssen, sind der Projektstartbefehl, ein Entwicklungsmodusstart und der gepackte Projektaufbau.

Projekt starten

$ npm start

Projekt verpacken

$ npm run build

Verzeichnis des gesamten Projekts

src: Die von uns entwickelten Quelldateien werden in diesem Verzeichnis abgelegt.

Komponenten: werden zum Einfügen verwendet alle Komponenten

Stile: speichert alle Stildateien

Utils: speichert alle Methoden und Funktionen, die Sie selbst schreiben müssen

app.vue: Eintragsdateien für alle Vue-Dateien

main.js: Die js-Eintragsdatei des gesamten Projekts

index.html: Diese Datei kann im Stammverzeichnis myApp des eigentlichen Projekts oder im von generierten Verzeichnis dist abgelegt werden Webpack-Verpackung. Wenn es im Stammverzeichnis platziert ist, contentBase: __dirname in webpack.config.js, und wenn es in dist platziert ist, contentBase: __dirname + '/dist/'. Der Hauptzweck besteht darin, den Speicherort des Dienststammverzeichnisses des Projekts zu ändern. Dies ist das Verzeichnis, das vom Browser angezeigt wird, wenn wir localhos:8080 öffnen. (Nach dem Testen ist es besser, es im vom Paket generierten dist-Verzeichnis abzulegen. Es kann hauptsächlich im Entwicklungsmodus Echtzeitaktualisierungen durchführen. Dies ist möglicherweise nicht genau. Sie können es später nach dem Testen ändern.)

index.html-Dateicode

<!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-Dateicode

//引入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>

Hier Wenn das gesamte Projekt im Grunde die Grundstruktur abgeschlossen hat, geben Sie im Browser Folgendes ein:

Verwandte Empfehlungen:

Vue-Projekthomepage Teilen von Beispielen zur Optimierung der Ladegeschwindigkeit

Austausch über gemeinsame Komponenten und Framework-Struktur von Vue-Projekten

So erstellen Sie ein neues Vue-Projekt

Das obige ist der detaillierte Inhalt vonErklärung des Webpack- und Vue2-Build-Vue-Projektskeletts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!