Petit et beau projet Vue en action : applications légères Vue et Webpack

L'essor du framework Vue a changé la manière de développer front-end. Sa simplicité, sa facilité d'utilisation, son efficacité et sa flexibilité ont été reconnues par la majorité des développeurs. En tant que puissant outil de packaging de modules, Webpack joue également un rôle important dans le développement de l’ingénierie front-end. Cet article présentera un petit et beau projet Vue en pratique. Il est développé à l'aide de Vue.js léger et Webpack. Il peut être rapidement démarré et fournit une référence d'apprentissage pour les débutants.

1. Connaissances préalables

Avant d'étudier cet article, nous devons disposer des réserves de connaissances suivantes :

• De base Capacités de développement HTML, CSS, JavaScript ;

• Connaissance de base de Vue.js et utilisation des API courantes

• Connaissance de base de Webpack et utilisation d'éléments de configuration courants ; .

Si vous n'êtes pas familier avec les connaissances ci-dessus, il est recommandé de faire d'abord un apprentissage de base et une pratique.

2. Processus de développement du projet

Nous développerons le projet à partir des étapes suivantes :

•Initialiser le projet# 🎜🎜#

• Installer les dépendances

• Configurer le Webpack

• Concevoir la mise en page

• Écrire les composants Vue

# 🎜🎜#•Packaging Project

Ensuite, entrons étape par étape dans le parcours de développement d'applications de Vue et Webpack.

Projet d'initialisation

3. Utilisez Vue-cli pour générer rapidement le squelette du projet Vue.js et prédéfinir certains éléments de configuration courants Pratique. pour que nous puissions nous développer rapidement. Ici, nous utilisons Vue-cli pour initialiser le projet.

La première étape consiste à installer l'outil Vue-cli :

npm install -g @vue/cli

La deuxième étape consiste à créer un nouveau projet avec Vue-cli et à saisir le répertoire de travail sur la commande line :

vue create vue-webpack-project

Le projet que nous avons créé ici s'appelle vue-webpack-project, et Vue-cli générera un dossier de projet nommé vue-webpack-project dans le répertoire courant.

Installation des dépendances

Entrez le répertoire racine du projet et exécutez la commande suivante pour installer les dépendances requises :

npm install vue vue-router --save

#🎜🎜 #Nous y sommes Les dépendances qui doivent être installées incluent Vue.js et Vue-router est un plug-in de routage officiellement fourni par Vue.js, qui peut facilement gérer les problèmes liés au routage frontal.

Configuration du Webpack

5. Dans le développement réel, la configuration du Webpack est généralement plus compliquée que l'écriture de code, nous n'avons donc besoin que d'en configurer certains ceux couramment utilisés Les éléments de configuration suffisent.

La première étape consiste à créer un nouveau fichier webpack.config.js pour stocker la configuration de Webpack :

const path = require('path');
const { VueLoaderPlugin } = require('vue-loader');

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /.vue$/,
        use: 'vue-loader'
      },
      {
        test: /.js$/,
        use: 'babel-loader'
      },
      {
        test: /.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ]
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ]
};

Ici nous avons configuré trois règles : traitement des fichiers .vue vue-loader, babel-loader qui traite les fichiers .js, les plugins css-loader et vue-style-loader qui traitent les fichiers .css.

La deuxième étape consiste à modifier le fichier package.json et à ajouter une commande dans l'attribut scripts pour exécuter Webpack dans le répertoire racine du projet :

{
  "scripts": {
    "build": "webpack"
  },
  ……
}

pour la conception de la mise en page

6. Avant le développement du projet, nous devons d'abord concevoir la mise en page. Ici, nous utilisons la bibliothèque de composants ElementUI pour un développement rapide et utilisons les composants directement dans le fichier HTML.

<!DOCTYPE html>
<html>
  <head>
    <title>vue-webpack-project</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  </head>
  <body>
    <div id="app">
      <el-container>
        <el-header>Header</el-header>
        <el-container>
          <el-aside>Aside</el-aside>
          <el-main>Main</el-main>
        </el-container>
      </el-container>
    </div>
    <script src="./dist/bundle.js"></script>
  </body>
</html>

Ecriture des composants Vue

7. Dans le répertoire src, créez deux nouveaux fichiers .vue : Header.vue et Main.vue, le code est la suivante ：

Header.vue

<template>
  <el-header>
    <h1>Header</h1>
  </el-header>
</template>

<script>
export default {
}
</script>

<style scoped>
el-header {
  text-align: center;
  color: #fff;
  background-color: #409EFF;
}
</style>

Main.vue

<template>
  <el-main>
    <h1>Main</h1>
  </el-main>
</template>

<script>
export default {
}
</script>

<style scoped>
el-main {
  text-align: center;
}
</style>

Ici, nous utilisons les composants ElementUI pour implémenter la disposition de Header et Main.

Packaging Project

8. Dans la ligne de commande, exécutez la commande suivante pour effectuer le packaging Webpack :

npm run build

Webpack Selon notre configuration, le projet sera empaqueté et le répertoire dist et le fichier bundle.js seront générés.

Summary

9. Cet article présente l'utilisation de Vue.js légers et de Webpack à travers un petit et beau projet Vue, comprenant Initialiser le projet, installer les dépendances, configurer Webpack, concevoir la mise en page, écrire les composants Vue et empaqueter le projet, etc. En tant que débutant de Vue et Webpack, vous pouvez vous référer à cet article pour pratiquer et apprendre quelques utilisations et configurations de base, et approfondir votre compréhension de Vue.js et Webpack.

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!