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

Configuració d'un Projecte Vue

Següent ►
►

En aquest tema, aprendrem a configurar un projecte Vue utilitzant Webpack. 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 les dependències del projecte. Seguint aquests passos, podrem crear un entorn de desenvolupament eficient i optimitzat per a un projecte Vue.

  1. Inicialització del Projecte

Pas 1: Crear una Carpeta de Projecte

Primer, crearem una carpeta per al nostre projecte Vue.

mkdir vue-webpack-project
cd vue-webpack-project

Pas 2: Inicialitzar un Projecte Node.js

Iniciarem un projecte Node.js per gestionar les dependències.

npm init -y

Aquest comandament crearà un fitxer package.json amb la configuració bàsica del projecte.

  1. Instal·lació de Dependències

Pas 3: Instal·lar Vue i Webpack

Instal·larem Vue, Webpack i altres paquets necessaris.

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

Pas 4: Instal·lar Babel

Babel és necessari per compilar el codi JavaScript modern a una versió compatible amb tots els navegadors.

npm install @babel/core @babel/preset-env babel-loader --save-dev

  1. Configuració de Webpack

Pas 5: Crear el Fitxer de Configuració de Webpack

Crearem un fitxer webpack.config.js a la carpeta del projecte amb la següent configuració bàsica:

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$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ],
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000
  }
};

Explicació del Fitxer de Configuració

  • entry: Defineix el punt d'entrada del nostre projecte.
  • output: Especifica on es guardarà el fitxer de sortida.
  • module.rules: Defineix les regles per a carregar diferents tipus de fitxers.
    • vue-loader per a fitxers .vue.
    • babel-loader per a fitxers .js.
    • style-loader i css-loader per a fitxers .css.
  • plugins: Inclou el VueLoaderPlugin necessari per a Vue.
  • devServer: Configura el servidor de desenvolupament.

  1. Estructura del Projecte

Pas 6: Crear l'Estructura de Carpetes

Crearem les carpetes i fitxers necessaris per al nostre projecte.

mkdir src
touch src/main.js src/App.vue

Pas 7: Configurar main.js

El fitxer main.js és el punt d'entrada del nostre projecte Vue.

import Vue from 'vue';
import App from './App.vue';

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

Pas 8: Configurar App.vue

El fitxer App.vue és el component principal de la nostra aplicació.

<template>
  <div id="app">
    <h1>Hello Vue with Webpack!</h1>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

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

  1. Construcció i Execució del Projecte

Pas 9: Actualitzar package.json

Afegirem scripts al fitxer package.json per construir i executar el projecte.

"scripts": {
  "serve": "webpack-dev-server --open --mode development",
  "build": "webpack --mode production"
}

Pas 10: Executar el Projecte

Per executar el projecte en mode desenvolupament, utilitzarem el següent comandament:

npm run serve

Per construir el projecte per a producció, utilitzarem:

npm run build

Resum

En aquest tema, hem après a configurar un projecte Vue utilitzant Webpack. Hem cobert la inicialització del projecte, la instal·lació de dependències, la configuració de Webpack, la creació de l'estructura del projecte i la construcció i execució del projecte. Amb aquests coneixements, estem preparats per desenvolupar aplicacions Vue eficients i ben estructurades.

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