Projek Vue yang kecil dan cantik sedang beraksi: aplikasi Vue dan Webpack yang ringan-View.js-php.cn

Projek Vue yang kecil dan cantik sedang beraksi: aplikasi Vue dan Webpack yang ringan

WBOY

Lepaskan： 2023-06-09 16:07:19

asal

1498 orang telah melayarinya

Kebangkitan rangka kerja Vue telah mengubah cara pembangunan bahagian hadapan Kesederhanaan, kemudahan penggunaan, kecekapan dan fleksibilitinya telah diiktiraf oleh majoriti pembangun. Sebagai alat pembungkusan modul yang berkuasa, Webpack juga memainkan peranan penting dalam pembangunan kejuruteraan bahagian hadapan. Artikel ini akan memperkenalkan projek Vue yang kecil tetapi cantik dalam amalan Ia dibangunkan menggunakan Vue.js dan Webpack yang ringan Ia boleh dimulakan dengan cepat dan menyediakan rujukan pembelajaran untuk pemula.

Pengetahuan prasyarat

Sebelum mengkaji artikel ini, kita perlu mempunyai rizab pengetahuan berikut:

• Keupayaan pembangunan HTML, CSS dan JavaScript asas ;

• Pengetahuan asas tentang Vue.js dan penggunaan API biasa;

Sekiranya anda tidak biasa dengan ilmu di atas, digalakkan untuk melakukan pembelajaran dan latihan asas terlebih dahulu.

Proses pembangunan projek

Kami akan membangunkan projek dari langkah berikut:

• Mulakan projek

• Pasang kebergantungan

• Konfigurasi Webpack

• Reka bentuk reka letak halaman

• Tulis komponen Vue

• Bungkus projek

Seterusnya, mari Langkah demi melangkah ke dalam perjalanan pembangunan aplikasi Vue dan Webpack.

Mulakan projek

Menggunakan Vue-cli boleh menjana rangka projek Vue.js dengan cepat dan pratetap beberapa item konfigurasi biasa untuk memudahkan pembangunan pesat kami. Di sini kami menggunakan Vue-cli untuk memulakan projek.

Langkah pertama ialah memasang alat Vue-cli:

npm install -g @vue/cli

Salin selepas log masuk

Langkah kedua ialah mencipta projek baharu dengan Vue-cli dan masukkan direktori kerja pada baris arahan:

vue create vue-webpack-project

Salin selepas log masuk

Projek yang kami buat di sini dinamakan vue-webpack-project, dan Vue-cli akan menjana folder projek bernama vue-webpack-project dalam direktori semasa.

Pasang kebergantungan

npm install vue vue-router --save

Salin selepas log masuk

Kebergantungan yang perlu kita pasang di sini termasuk Vue.js Dan Vue-router, Vue-router ialah pemalam penghalaan yang disediakan secara rasmi oleh Vue.js, yang boleh mengendalikan isu berkaitan penghalaan hadapan dengan mudah.

Mengkonfigurasi Webpack

Langkah pertama ialah mencipta fail webpack.config.js baharu untuk menyimpan konfigurasi 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()
  ]
};

Salin selepas log masuk

Di sini kami telah mengkonfigurasi tiga peraturan: vue-loader untuk memproses fail .vue, Babel-loader yang memproses fail .js, pemalam css-loader dan vue-style-loader yang memproses fail .css.

Langkah kedua ialah mengubah suai fail package.json dan menambah arahan dalam atribut skrip untuk menjalankan Webpack dalam direktori akar projek:

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

Salin selepas log masuk

Reka bentuk reka letak halaman

<!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>

Salin selepas log masuk

Menulis komponen Vue

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>

Salin selepas log masuk

Main.vue

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

<script>
export default {
}
</script>

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

Salin selepas log masuk

Di sini kami menggunakan komponen ElementUI untuk melaksanakan reka letak Pengepala dan Utama.

Membungkus projek

npm run build

Salin selepas log masuk

Webpack akan membungkus projek mengikut kami konfigurasi , jana direktori dist dan fail bundle.js.

Ringkasan

Artikel ini memperkenalkan penggunaan Vue.js dan Webpack yang ringan melalui projek Vue yang kecil dan cantik, termasuk memulakan projek, memasang kebergantungan, Langkah-langkah seperti mengkonfigurasi Webpack, mereka bentuk susun atur halaman, menulis komponen Vue dan projek pembungkusan. Sebagai pemula Vue dan Webpack, anda boleh merujuk artikel ini untuk berlatih dan mempelajari beberapa penggunaan dan konfigurasi asas serta mendalami pemahaman anda tentang Vue.js dan Webpack.

Atas ialah kandungan terperinci Projek Vue yang kecil dan cantik sedang beraksi: aplikasi Vue dan Webpack yang ringan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!