Tutorial Bermula VUE3: Membungkus dan Membina dengan Webpack

Vue ialah rangka kerja JavaScript yang sangat baik yang boleh membantu kami membina aplikasi web yang interaktif dan cekap dengan cepat. Vue 3 ialah versi terbaru Vue, yang memperkenalkan banyak ciri dan fungsi baharu. Webpack kini merupakan salah satu pembungkus modul JavaScript dan alat binaan yang paling popular, yang boleh membantu kami mengurus pelbagai sumber dalam projek kami.

Artikel ini akan memperkenalkan cara menggunakan Webpack untuk membungkus dan membina aplikasi Vue 3.

1. Pasang Webpack

Pertama, kita perlu memasang Webpack secara setempat. Anda boleh menggunakan pengurus pakej npm untuk memasang, masukkan arahan berikut:

npm install --save-dev webpack webpack-cli

Nota: Webpack versi 4 dan ke atas dipasang di sini.

2. Cipta projek Vue

Kami perlu mencipta projek Vue 3 Anda boleh menggunakan alat rasmi yang disediakan oleh Vue @vue/cli untuk mencipta projek. Masukkan arahan berikut untuk memasang:

npm install -g @vue/cli

Selepas pemasangan selesai, masukkan arahan berikut untuk mencipta projek Vue 3:

vue create my-project

di mana my-project ialah nama projek, yang juga boleh ditakrifkan mengikut keperluan.

Selepas projek Vue 3 dibuat, kita perlu menggunakannya dengan Webpack. Dalam direktori akar projek, gunakan pengurus pakej npm untuk memasang Webpack dan pemuat dan pemalam yang berkaitan Masukkan arahan berikut:

npm install webpack webpack-cli webpack-dev-server html-webpack-plugin -D
npm install --save-dev vue-loader vue-template-compiler css-loader style-loader sass-loader sass node-sass

Antaranya, webpack-dev-server ialah pelayan pembangunan Webpack dan boleh dinyahpepijat. setempat; html-webpack-pluginUntuk menambah fail html. vue-loader dan vue-template-compiler digunakan untuk menghuraikan fail .vue, dan css-loader, style-loader, sass-loader dan sass, node-sass digunakan untuk memproses fail gaya.

3. Konfigurasikan Webpack

Kita perlu mencipta fail webpack.config.js dalam direktori akar projek untuk mengkonfigurasi pelbagai parameter Webpack. Kandungan khusus adalah seperti berikut:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development',
  devServer: {
    port: 8080,
    historyApiFallback: true,
    noInfo: true,
    overlay: true,
  },
  entry: path.resolve(__dirname, './src/main.js'),
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/',
    filename: 'build.js',
  },
  module: {
    rules: [
      {
        test: /.vue$/,
        loader: 'vue-loader',
        exclude: /node_modules/,
      },
      {
        test: /.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
      },
      {
        test: /.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader'],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, './index.html'),
      filename: 'index.html',
    }),
  ],
  resolve: {
    alias: {
      vue$: 'vue/dist/vue.esm-bundler.js',
    },
    extensions: ['*', '.js', '.vue', '.json'],
  },
};

Dalam konfigurasi di atas, mode ialah mod pembangunan, entry ialah fail kemasukan dan output ialah laluan dan nama fail output. module dalam rules bermaksud memproses pelbagai fail. plugins menunjukkan pemalam yang kami gunakan.

4. Tulis komponen Vue

Buat berbilang fail .vue dalam direktori src projek. Berikut ialah komponen ringkas sebagai contoh:

<template>
    <div>我是一个Vue组件</div>
</template>
<script>
    export default {
        name: 'my-component'
    }
</script>

Ini ialah komponen Vue ringkas bernama my-component. Kita boleh menggunakan komponen ini dalam App.vue:

<template>
    <div>
        <my-component />
    </div>
</template>
<script>
    import MyComponent from './MyComponent.vue';
    export default {
        components: {
            MyComponent
        }
    }
</script>

5. Jalankan projek

Dalam direktori akar projek, masukkan arahan berikut untuk menjalankan projek:

npm run serve

Kemudian, anda boleh melawati http://localhost:8080 dalam penyemak imbas anda untuk melihat kesan projek.

6 Pakej projek

Selepas pembangunan selesai, kami perlu membungkus projek dan menjana versi keluaran kod. Dalam direktori akar projek, masukkan arahan berikut:

npm run build

Webpack akan membungkus pelbagai bahagian projek ke dalam folder dist dan fail yang dijana boleh digunakan untuk menggunakan aplikasi web.

Di atas adalah keseluruhan proses pembungkusan dan pembinaan aplikasi Vue 3 menggunakan Webpack. Semoga ia membantu semua orang.

Atas ialah kandungan terperinci Tutorial Bermula VUE3: Membungkus dan Membina dengan Webpack. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!