ホームページ >ウェブフロントエンド >Vue.js >Vue3 に Ant Design を導入する方法

Vue3 に Ant Design を導入する方法

PHPz
PHPz転載
2023-05-11 19:28:042790ブラウズ

まず、デフォルトで vue-cli 3 によって生成されるディレクトリ構造を紹介します

+ 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. Ant Design のインストール

npm は Node のパッケージ管理ツールで、npm を通じて Ant Design をインストールできます

--save オプションを使用すると、package.json の依存関係フィールド (本番環境の依存関係) に同時に構成を書き込むことができます

npm install --save ant-design-vue

2. Ant 設計の紹介

Vue Ant Design での導入方法には完全導入と部分導入の 2 つの方法がありますが、以下ではそれぞれを紹介します

(1) 全導入

main にすべてのコンポーネントを導入して登録します。 js. すべてのコンポーネントを他のページで直接使用する

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

この導入方法では、コンポーネントが使用されているかどうかに関係なくすべてのコンポーネントが読み込まれますが、これは明らかに良い方法ではありません

(2) 部分的はじめに

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'
import 'ant-design-vue/lib/button/style'
 
// 新增代码:注册特定组件
Vue.component(Button.name, Button)
 
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

この導入方法を使用すると、必要なコンポーネントのみを確実に導入することができます (必要に応じて導入) )

しかし、コンポーネントを導入するたびに、それに対応するスタイル ファイルを同時に手動で導入する必要があり、非常に面倒です

babel-plugin-import プラグインこの作業を完了するのに役立ちます。最初に babel-plugin-import プラグインをインストールします。

--save-dev オプションを追加し、package.json の devDependency フィールドに構成を書き込みます (開発環境の依存関係)

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

その後、babel.config.js プラグインで設定します

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

次に、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')
## にオンデマンドでコンポーネントを導入します#最後に、npm runserve を使用してアプリケーションを再起動することを忘れないでください。他のページでも使用できます。特定のコンポーネントを使用してください。

vue-cli 3 を使用してプロジェクトを作成するときに Less を設定すると、次のような結果が得られる場合があることに注意してください。アプリケーション実行時のエラー:

インライン JavaScript が有効になっていません。オプションで設定されていますか?

これは、Webpack の Less-loader のデフォルト設定が不適切であるためです。そのため、ルートで構成を変更する必要があります。

次の構成項目をディレクトリ内のプロジェクト構成ファイル vue.config.js に追加します (そのようなファイルがない場合は、自分で作成します)

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

3. Ant Design を使用します

Ant After Design をインストールして導入すると、ページ

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

で Ant Design のコンポーネントを使用できます。この時点で、青色のマークが表示されていれば、ボタンがページに表示されたら、設定が成功したことを意味します

以上がVue3 に Ant Design を導入する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事はyisu.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。