El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Ús de Webpack amb Vue

Següent ►
►

En aquest tema, aprendrem com configurar Webpack per a un projecte Vue.js. Vue.js és un framework progressiu per a la construcció d'interfícies d'usuari, i Webpack és una eina excel·lent per gestionar els recursos i optimitzar el rendiment de les aplicacions Vue.

Objectius

  • Configurar un projecte Vue amb Webpack.
  • Utilitzar vue-loader per gestionar components Vue.
  • Configurar Webpack per a un entorn de desenvolupament i producció amb Vue.

Requisits Previs

  • Coneixements bàsics de Vue.js.
  • Coneixements bàsics de Webpack.

Passos per Configurar Webpack amb Vue

  1. Inicialitzar el Projecte

Primer, crearem un nou projecte i instal·larem les dependències necessàries.

mkdir vue-webpack-project
cd vue-webpack-project
npm init -y

  1. Instal·lar les Dependències

Instal·larem Vue, Webpack i altres paquets necessaris.

npm install vue vue-loader vue-template-compiler webpack webpack-cli webpack-dev-server --save-dev

  1. Estructura del Projecte

Organitzarem el projecte amb la següent estructura:

vue-webpack-project/
├── dist/
├── src/
│   ├── components/
│   │   └── HelloWorld.vue
│   ├── App.vue
│   └── main.js
├── package.json
├── webpack.config.js
└── index.html

  1. Crear Components Vue

Crearem un component bàsic HelloWorld.vue dins de src/components/.

<!-- src/components/HelloWorld.vue -->
<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue with Webpack!'
    };
  }
};
</script>

<style scoped>
h1 {
  color: #42b983;
}
</style>

  1. Crear el Component Principal

Crearem el component principal App.vue.

<!-- src/App.vue -->
<template>
  <div id="app">
    <HelloWorld />
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue';

export default {
  components: {
    HelloWorld
  }
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

  1. Punt d'Entrada

Crearem el fitxer main.js com a punt d'entrada.

// src/main.js
import Vue from 'vue';
import App from './App.vue';

new Vue({
  render: h => h(App),
}).$mount('#app');

  1. Fitxer HTML

Crearem el fitxer index.html per carregar l'aplicació.

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue with Webpack</title>
</head>
<body>
  <div id="app"></div>
  <script src="bundle.js"></script>
</body>
</html>

  1. Configuració de Webpack

Crearem el fitxer de configuració de Webpack webpack.config.js.

// webpack.config.js
const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ]
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ],
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000
  }
};

  1. Scripts de NPM

Actualitzarem el package.json per afegir scripts de desenvolupament i producció.

// package.json
{
  "name": "vue-webpack-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack serve --mode development",
    "build": "webpack --mode production"
  },
  "dependencies": {
    "vue": "^2.6.12"
  },
  "devDependencies": {
    "vue-loader": "^15.9.6",
    "vue-template-compiler": "^2.6.12",
    "webpack": "^5.38.1",
    "webpack-cli": "^4.7.0",
    "webpack-dev-server": "^3.11.2",
    "babel-loader": "^8.2.2",
    "css-loader": "^5.2.6",
    "vue-style-loader": "^4.1.3"
  }
}

  1. Executar el Projecte

Finalment, executarem el projecte en mode desenvolupament.

npm run dev

Exercici Pràctic

  1. Afegir un Nou Component: Crea un nou component GoodbyeWorld.vue que mostri el missatge "Goodbye, Vue with Webpack!" i inclou-lo en el component App.vue.

Solució

<!-- src/components/GoodbyeWorld.vue -->
<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Goodbye, Vue with Webpack!'
    };
  }
};
</script>

<style scoped>
h1 {
  color: #ff6347;
}
</style>
<!-- src/App.vue -->
<template>
  <div id="app">
    <HelloWorld />
    <GoodbyeWorld />
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue';
import GoodbyeWorld from './components/GoodbyeWorld.vue';

export default {
  components: {
    HelloWorld,
    GoodbyeWorld
  }
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Conclusió

En aquesta secció, hem après a configurar un projecte Vue.js amb Webpack, incloent-hi la configuració de vue-loader i la creació de components bàsics. Aquesta configuració ens permet aprofitar al màxim les capacitats de Webpack per optimitzar i gestionar els nostres projectes Vue. En el següent mòdul, explorarem tècniques avançades i integracions amb altres eines.

◄ Anterior
◄
Següent ►
►
El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats