Webpack et vue2 construisent l'explication du squelette du projet Vue

Cet article présente principalement la méthode webpack+vue2 pour construire le squelette du projet Vue. L'éditeur la trouve plutôt bonne, je vais donc la partager avec vous maintenant et la donner comme référence. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.

L'outil d'empaquetage de projets front-end webpack et le framework de développement front-end vue sont désormais des technologies très populaires après la séparation front-end et back-end. Aujourd'hui, nous parlons principalement de l'utilisation de webpack et vue2 pour construire le. squelette de base d’un projet de séparation front-end et back-end. Bien que l'utilisation de l'échafaudage vue-cli puisse nous aider à construire un squelette de projet, je pense qu'il est toujours important de comprendre les principes, c'est pourquoi cet article parle principalement de la construction d'un projet de base avec webpack et vue. Le principe est que nodejs a été installé.

L'ensemble du projet doit être installé via les dépendances 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

Créer un nouveau répertoire de projet

Nous devons d'abord créer un nouveau répertoire myApp pour stocker notre projet, saisir le projet dans le terminal, puis démarrez Initialiser le projet.

Initialisation du projet

$ npm init

Lors de l'initialisation du projet, s'il n'y a pas de besoin particulier, appuyez simplement sur la touche "Entrée clé" Can. Une fois l'initialisation du projet terminée, un fichier package.json sera généré pour stocker principalement le répertoire des dépendances du projet et configurer la commande de démarrage du projet.

Installation des dépendances

$ npm i style-loader --D

Lors de l'utilisation de npm pour installer des dépendances, nous ajouterons "--D" à la fin , car l'ajout de "--D" laissera un enregistrement dans package.json. Si nous ouvrons le projet sur d'autres systèmes, nous constaterons que les dépendances installées via npm pendant le développement ne peuvent pas être utilisées. Cela est dû à la compatibilité du système. Et si vous ajoutez "--D" aux dépendances d'installation lors du développement du projet, les node_modules du projet n'ont pas besoin d'être copiés. Avant d'ouvrir le projet, il suffit d'installer toutes les dépendances via npm.

$ npm i

Configurer le fichier webpack.config.js

Toutes les configurations de webpack sont dans le webpack.config.js fichier , donc après avoir initialisé le projet, nous devons créer un nouveau fichier webpack.config.js et le configurer. Puisque j'ai écrit sur la configuration de base de webpack la dernière fois, je ne le répéterai pas ici, je collerai directement mon code de configuration :

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

}

Configuration. package. Les principales choses qui doivent être configurées dans json

package.json sont la commande de démarrage du projet, un démarrage en mode développement et la construction du projet packagé.

Démarrer le projet

$ npm start

Emballer le projet

$ npm run build

Répertoire de l'ensemble du projet

src : Les fichiers sources que nous développons sont placés dans ce répertoire

composants : utilisés pour mettre all Components

styles : stocke tous les fichiers de style

utils : stocke toutes les méthodes et fonctions qui doivent être écrites par vous-même

app.vue : fichiers d'entrée pour tous les fichiers vue

main.js : Le fichier d'entrée js de l'ensemble du projet

index.html : Ce fichier peut être placé dans le répertoire racine myApp du projet actuel, ou dans le répertoire dist généré par packaging webpack. S'il est placé dans le répertoire racine, contentBase : __dirname dans webpack.config.js, et s'il est placé dans dist, contentBase : __dirname + '/dist/'. L'objectif principal est de changer l'emplacement du répertoire racine du service du projet, qui est le répertoire affiché par le navigateur lorsque nous ouvrons localhos:8080. (Après le test, il sera préférable de le placer dans le répertoire dist généré par le package. Il peut réaliser des mises à jour en temps réel principalement en mode développement. Cela peut ne pas être exact. Vous pourrez le modifier après le test plus tard)

Code du fichier 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>

Code du fichier 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>

À ce À ce moment-là, l'ensemble du projet a pratiquement terminé la structure de base. Entrez : localhost:8080 dans le navigateur, vous pouvez voir l'affichage :

Recommandations associées :

Page d'accueil du projet Vue. Partage d'exemples d'optimisation de la vitesse de chargement

Partage des composants communs et de la structure du cadre des projets vue

Comment créer un nouveau projet vue

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!