nuxt.js 究極按需引入-ant design vue

在網絡上看了很多ui組件按需加載的案例，但是那不是我想要的

1. 首先我們看一下 錯誤的示範！！

1.1.配置插件 plugins\antd-ui.js

import Vue from 'vue'
import Button from 'ant-design-vue/lib/button'
import Steps from 'ant-design-vue/lib/steps'
import Form from 'ant-design-vue/lib/form'
import Input from 'ant-design-vue/lib/input'

Vue.use(Button)
Vue.use(Steps) // 步驟條
Vue.use(Form)
Vue.use(Form.Item)
Vue.use(Input)

1.2.引入css樣式 nuxt.config.js

# nuxt.config.js

module.exports = {
  css: [
    './style/basic.less'
    'ant-design-vue/lib/button/style/index.css',
    'ant-design-vue/lib/steps/style/index.css',
    'ant-design-vue/lib/form/style/index.css',
    'ant-design-vue/lib/input/style/index.css'
  ],

  plugins: [{ src: '@/plugins/antd-ui', ssr: true }],
  
}

不知道大家看出錯什麼問題

我們去官方文檔中尋找一點線索

重點來嘍！！！！！

css引入的樣式是全局樣式！！！如果這裏是SPA，我覺着這OK，但是我們是SSR，需要進一步的優化

2. 真正的按需加載

我們拋棄在全局樣式中進行加載，在組件中引用

<template>
  <div >
  </div>
</template>

<script>
import '@/node_modules/ant-design-vue/lib/button/style/index.css'
import '@/node_modules/ant-design-vue/lib/steps/style/index.css'
import '@/node_modules/ant-design-vue/lib/form/style/index.css'
import '@/node_modules/ant-design-vue/lib/input/style/index.css'
export default {
  components: {}
}
</script>

  }
}
</style>

雖然這樣或許不是很優雅，但是這纔是真正意義上的SSR按需加載UI組件