Vue3에 Ant Design을 도입하는 방법

먼저 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은 npm을 통해 Ant Design을 설치할 수 있습니다

--save 옵션을 추가하세요. , Ant Design을 동시에 설치할 수 있습니다 package.json에 작성된 종속성 필드 구성(프로덕션 환경 종속성)

npm install --save ant-design-vue

2. Ant Design 소개

Vue에서 Ant Design을 소개하는 방법에는 전체 소개와 두 가지가 있습니다. 부분 소개는 아래에서 하나씩 소개하겠습니다

(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- 플러그인 가져오기 플러그인은 이 작업을 완료하는 데 도움이 될 수 있습니다. 먼저 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에 도입합니다. 다른 페이지의 특정 구성 요소를 사용하려면 애플리케이션

vue-cli 3을 사용하여 프로젝트를 생성할 때 Less를 구성하면 애플리케이션을 실행할 때 다음 오류가 발생할 수 있습니다.

인라인 JavaScript가 활성화되어 있지 않습니다. 옵션에 설정되어 있나요?

Webpack for Less-loader의 기본 구성이 부적절하기 때문에 수정이 필요합니다. 구성

다음 구성 항목을 프로젝트 구성 파일 vue.config.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')

3. Ant Design 사용하기

Ant Design을 설치하고 소개한 후, 페이지

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

에서 Ant Design의 구성 요소를 사용할 수 있습니다. , 페이지에 파란색 버튼이 나타나면 구성이 성공한 것입니다

위 내용은 Vue3에 Ant Design을 도입하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!