全局引入了ant-design-vue组件，但是不生效是什么原因？ #922

qingleizhang123 · 2022-06-02T09:46:28Z

qingleizhang123
Jun 2, 2022

clientAppEnhance.js中引入ant-design-vue组件后，.vuepress/components下的组件使用显示不生效，控制台显示Failed to resolve component: a-button

clientAppEnhance.js代码

import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'

import { defineClientAppEnhance } from '@vuepress/client'

export default defineClientAppEnhance(({ app, router, siteData }) => {
  app.use(Antd)
})

components/Button的代码

<template>
  <a-button type="primary">Primary Button</a-button>
  <a-button>Default Button</a-button>
  <a-button type="dashed">Dashed Button</a-button>
  <a-button type="text">Text Button</a-button>
  <a-button type="link">Link Button</a-button>
</template>

config.js配置

const { path } = require('@vuepress/utils')
const { registerComponentsPlugin } = require('@vuepress/plugin-register-components')
const navbar = require('./config/navbar')
const sidebar = require('./config/sidebar')
const { defaultTheme } = require('@vuepress/theme-default');

const locales = {
  '/': {
    'hide-text': 'Hide',
    'show-text': 'Expand',
    'copy-button-text': 'Copy',
    'copy-success-text': 'Copy success'
  },
   '/zh': {
    'hide-text': '隐藏代码',
    'show-text': '显示代码',
    'copy-button-text': '复制代码片段', 
    'copy-success-text': '复制成功'
  }
}

module.exports = {
  // 站点配置
  lang: 'zh-CN',
  title: 'ST-UI-LIB',
  description: 'ST前端组件库',
  head: [ // 注入到当前页面的 HTML <head> 中的标签
    ['link', {
      rel: 'icon',
      href: '/img/logo.png'
    }], // 增加一个自定义的 favicon(网页标签的图标)
  ],
  theme: defaultTheme({
    logo: '/img/logo.png',
    //项目地址，会在顶部导航栏和侧边栏显示GitHub的地址
    repo: "https://github.com/qingleizhang123/st-ui-v2",
    navbar,
    sidebar,
    sidebarDepth: 2, // 侧边栏显示2级
  }),
  plugins: [
    [
      registerComponentsPlugin({
        componentsDir: path.resolve(__dirname, './components'),
      }),
    ],
    ['vuepress-plugin-demoblock-plus', { locales }]
 ]
}

Answered by yzqdev

Jun 2, 2022

If you are using the latest version of vuepress, you could find the clientAppEnhance.js has been renamed to client.js,the api also has changed.
It seems that vuepress works well with antdv.
Here is my demo. https://yzqbugs.github.io/vuepress-bugs/
source code:https://github.com/yzqbugs/vuepress-bugs

View full answer

yzqdev · 2022-06-02T13:36:54Z

yzqdev
Jun 2, 2022

If you are using the latest version of vuepress, you could find the clientAppEnhance.js has been renamed to client.js,the api also has changed.
It seems that vuepress works well with antdv.
Here is my demo. https://yzqbugs.github.io/vuepress-bugs/
source code:https://github.com/yzqbugs/vuepress-bugs

0 replies

Mister-Hope · 2022-06-02T14:13:21Z

Mister-Hope
Jun 2, 2022
Collaborator

As the other reply said, plz make sure you follow the latest docs, and follow changelog.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

全局引入了ant-design-vue组件，但是不生效是什么原因？ #922

Uh oh!

{{title}}

Uh oh!

Replies: 2 comments

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

全局引入了ant-design-vue组件，但是不生效是什么原因？ #922

Uh oh!

qingleizhang123 Jun 2, 2022

Replies: 2 comments

Uh oh!

yzqdev Jun 2, 2022

Uh oh!

Mister-Hope Jun 2, 2022 Collaborator

qingleizhang123
Jun 2, 2022

yzqdev
Jun 2, 2022

Mister-Hope
Jun 2, 2022
Collaborator