So führen Sie Ant Design in Vue3 ein

Führen Sie zunächst die von vue-cli 3 standardmäßig generierte Verzeichnisstruktur ein

+ 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. Install Ant Design

npm ist das Paketverwaltungstool von Node, wir können npm verwenden Installieren Sie Ant Design

Fügen Sie die Option --save hinzu. Sie können die Konfiguration auch in das Abhängigkeitsfeld von package.json schreiben (Abhängigkeiten der Produktionsumgebung)

npm install --save ant-design-vue

2 Ant vorstellen Design# 🎜🎜#

Es gibt zwei Möglichkeiten, Ant Design in Vue einzuführen, nämlich die vollständige Einführung und die teilweise Einführung. Im Folgenden wird eine nach der anderen vorgestellt

(1) Vollständige Einführung#🎜🎜 ##🎜 🎜#Führen Sie alle Komponenten in main.js ein und registrieren Sie sie, und Sie können alle Komponenten direkt auf anderen Seiten verwenden

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

Mit dieser Einführungsmethode werden alle Komponenten geladen, unabhängig davon, ob sie verwendet werden oder nicht. Offensichtlich kein guter Weg

(2) Lokale Einführung

Einführen und Registrieren bestimmter Komponenten in main.js, und nur bestimmte Komponenten können auf anderen Seiten verwendet werden# 🎜🎜 #

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

Mit dieser Einführungsmethode können Sie sicherstellen, dass nur die erforderlichen Komponenten eingeführt werden (Einführung nach Bedarf)

Aber jedes Mal, wenn eine Komponente eingeführt wird, muss die entsprechende Stildatei vorhanden sein Gleichzeitig manuell eingeführt.

babel-plugin-import Plug-in kann helfen, diese Arbeit abzuschließen. Installieren Sie zuerst das babel-plugin-import Plug-in

#🎜🎜 # plus die Option --save-dev und gleichzeitig das in package.json geschriebene Feld devDependencies (Abhängigkeiten der Entwicklungsumgebung) konfigurieren

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

Konfigurieren Sie dann das Plug-In in babel.config.js

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

Führen Sie dann Komponenten bei Bedarf in main.js ein.

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

Denken Sie schließlich daran, npm run dienen zu verwenden, um das neu zu starten Anwendung zur Verwendung bestimmter Komponenten auf anderen Seiten

Hinweis: Wenn Sie beim Erstellen eines Projekts mit vue-cli 3 Weniger konfigurieren, wird beim Ausführen der Anwendung möglicherweise die folgende Fehlermeldung angezeigt:

#🎜🎜 #

Inline-JavaScript ist in Ihren Optionen nicht aktiviert?

Das liegt daran, dass die Standardkonfiguration von Webpack für Less-Loader ungeeignet ist, daher müssen wir die Konfiguration ändern

im Stammverzeichnis Fügen Sie die folgenden Konfigurationselemente zur Projektkonfigurationsdatei vue.config.js hinzu (wenn keine solche Datei vorhanden ist, erstellen Sie selbst eine)

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

3. Verwenden Sie Ant Design

während der Installation und Einführung. Nach Ant Design können wir die Komponenten in Ant Design auf der Seite verwenden

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

Zu diesem Zeitpunkt sehen Sie eine blaue Schaltfläche Wenn auf der Seite angezeigt wird, bedeutet dies, dass die Konfiguration erfolgreich war#🎜 🎜#

Das obige ist der detaillierte Inhalt vonSo führen Sie Ant Design in Vue3 ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!