Comment introduire Ant Design dans Vue3

Tout d'abord, présentons la structure de répertoires générée par vue-cli 3 par défaut

+ 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 Installer Ant Design

npm est l'outil de gestion de packages de Node Nous pouvons installer Ant Design via npm

Ajoutez l'option --save. , vous pouvez installer Ant Design en même temps Configurer le champ de dépendances écrit dans package.json (dépendances de l'environnement de production)

npm install --save ant-design-vue

2 Introduction d'Ant Design

Il existe deux façons d'introduire Ant Design dans Vue, à savoir l'introduction complète et. introduction partielle, qui sera présentée un par un ci-dessous

(1) Importez tout

Introduisez et enregistrez tous les composants dans main.js, et vous pourrez utiliser tous les composants directement dans d'autres pages

// 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')

Avec cette méthode d'introduction, tous les composants seront chargés, qu'ils soient utilisés ou non. Évidemment, ce n'est pas une bonne façon

(2) Introduction locale

Introduisez et enregistrez des composants spécifiques dans main.js, et seuls des composants spécifiques peuvent être utilisés dans d'autres pages

// 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')

Utilisation. cette méthode d'introduction, vous pouvez vous assurer que seuls les composants requis sont introduits (Introduction à la demande)

Mais chaque fois qu'un composant est introduit, son fichier de style correspondant doit être introduit manuellement en même temps, ce qui est trop gênant

babel- Le plug-in plugin-import peut vous aider à terminer ce travail, installez d'abord le plug-in babel-plugin-import

Ajoutez l'option --save-dev et écrivez la configuration dans le champ devDependencies de package.json (environnement de développement dépendances)

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

Puis configurez le plug-in dans babel.config.js

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

Puis introduisez-le à la demande dans main.js Component

// 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')

Enfin, pensez à utiliser npm run serve pour redémarrer l'application pour utiliser des composants spécifiques dans d'autres pages

Notez que si vous configurez Less lors de la création d'un projet à l'aide de vue-cli 3, alors vous L'erreur suivante peut se produire lors de l'exécution de l'application :

JavaScript en ligne n'est pas activé. défini dans vos options ?

C'est parce que la configuration par défaut de Webpack pour Less-loader est inappropriée, nous devons donc la modifier. Configurez-le

Ajoutez les éléments de configuration suivants au fichier de configuration du projet vue.config.js dans le répertoire racine (si vous n'avez pas ce fichier, créez-en un vous-même)

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

3. Utilisez Ant Design

Après avoir installé et introduit Ant Design, nous pouvons utiliser les composants d'Ant Design sur la page

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

À ce stade. , si vous voyez un bouton bleu apparaître sur la page, cela signifie que la configuration a réussi

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!