Bagaimana untuk memperkenalkan Reka Bentuk Semut dalam Vue3

Perkenalkan struktur direktori yang dihasilkan oleh vue-cli 3 secara lalai

+ demo
    + node_modules（存放第三方模块）
    + public（存放静态文件）
        - favicon.ico（图标）
        - index.html （页面模板）
    + src（我们自己写的文件一般放在这个文件夹下）
        + assets（存放资源文件）
        + components（存放公共组件）
        + router.js（路由管理：Router）
        + store.js （状态管理：Vuex）
        + views（存放视图组件）
        - App.vue（页面入口文件）
        - main.js（程序入口文件）
    - package.json（项目配置文件）
    - package-lock.json（项目配置文件）
    - babel.config.js（babel 配置文件）
    - README.md（项目说明文档）
    - ...（其它配置文件）

1 Pasang Ant Design

npm ialah alat pengurusan pakej Node melalui npm

Dengan pilihan --save, konfigurasi boleh ditulis ke medan dependencies package.json (kebergantungan persekitaran pengeluaran) pada masa yang sama

npm install --save ant-design-vue

2 Pengenalan Reka Bentuk Semut

Diperkenalkan dalam Vue Ant Design mempunyai dua kaedah iaitu pengenalan penuh dan pengenalan separa Berikut akan memperkenalkannya satu persatu

(1) Semua pengenalan

Perkenalkan dan daftarkan semua komponen dalam utama. .js. Secara langsung menggunakan semua komponen dalam halaman lain

// main.js
 
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
 
// 新增代码：引入全部组件及样式
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'
 
// 新增代码：注册全部组件
Vue.use(Antd)
 
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

Dengan kaedah pengenalan ini, semua komponen akan dimuatkan tanpa mengira sama ada ia digunakan atau tidak, yang jelas bukan kaedah yang baik

( 2) Pengenalan separa

Perkenalkan dan daftarkan komponen tertentu dalam main.js, dan hanya komponen tertentu boleh digunakan dalam halaman lain

// main.js
 
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
 
// 新增代码：引入特定组件及样式
import {
  Button
} from 'ant-design-vue'
import 'ant-design-vue/lib/button/style'
 
// 新增代码：注册特定组件
Vue.component(Button.name, Button)
 
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

Menggunakan kaedah pengenalan ini, anda boleh memastikan bahawa hanya komponen yang diperlukan diperkenalkan (pengenalan atas permintaan )

Tetapi setiap kali komponen diperkenalkan, fail gaya yang sepadan mesti diperkenalkan secara manual pada masa yang sama, yang terlalu menyusahkan

plug babel-plugin-import -in boleh membantu dalam menyelesaikan kerja ini mula-mula pasang babel- Plugin-import plug-in

Tambah pilihan --save-dev, dan tulis konfigurasi ke dalam medan devDependencies package.json (pergantungan persekitaran pembangunan. )

npm install --save-dev babel-plugin-import

Kemudian konfigurasikannya dalam babel.config.js Plug-in

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  // 新增代码
  plugins: [
    [
      'import',
      { libraryName: 'ant-design-vue', libraryDirectory: 'es', style: true }
    ]
  ]
}

Kemudian perkenalkan komponen atas permintaan dalam main.js

// main.js

// main.js
 
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
 
// 新增代码：引入特定组件
// 此时会自动引入对应的样式文件，无需再手动逐一引入
import {
  Button
} from 'ant-design-vue'
 
// 新增代码：注册特定组件
Vue.component(Button.name, Button)
 
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

Akhir sekali, ingat untuk menggunakan npm run serve untuk memulakan semula aplikasi, dan anda boleh menggunakannya dalam halaman lain Gunakan komponen tertentu

Perhatikan bahawa jika anda mengkonfigurasi Less apabila mencipta projek menggunakan vue-cli 3, anda mungkin mendapat ralat berikut semasa menjalankan aplikasi:

JavaScript Sebaris tidak didayakan Adakah ia ditetapkan dalam pilihan anda?

Ini kerana konfigurasi lalai Webpack untuk Kurang. -loader tidak sesuai, jadi kita perlu mengubah suai konfigurasi

pada akar Tambahkan item konfigurasi berikut pada fail konfigurasi projek vue.config.js dalam direktori (jika tiada fail sedemikian, buat sendiri )

module.exports = {
  css: {
    loaderOptions: {
      less: {
        javascriptEnabled: true
      }
    }
  }
}

3. Gunakan Ant Design

untuk memasang dan memperkenalkan Ant After Design, kita boleh menggunakan komponen dalam Ant Design pada halaman

<template>
  <div>
    <a-button type="primary" @click="handleClick">Primary</a-button>
  </div>
</template>
 
<script>
export default {
  methods: {
    handleClick: function (e) {
      console.log(&#39;click&#39;, e)
    }
  }
}
</script>

Pada masa ini, jika anda boleh melihat butang biru muncul pada halaman, ini bermakna konfigurasi telah berjaya

Atas ialah kandungan terperinci Bagaimana untuk memperkenalkan Reka Bentuk Semut dalam Vue3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!