阅读 1007

nuxt按需加载vant组件和样式

安装

yarn add babel-plugin-import less less-loader

github.com/ant-design/…

第一种方式加载css格式的

nuxt.config.js 的build添加配置

babel: {
      plugins: [
        ['import', {
          libraryName: 'vant',
          "style": (name) => {
            return `${name}/index.css`
          }
        }, 'vant']
      ],
  },
复制代码

第二种方式加载less格式的【推荐】

nuxt.config.js 的build添加配置


  build: {
   // 添加这个是关键,添加后babel才会处理依赖包vant里面的代码
    transpile: [ /vant.*?less/ ], 
   
    babel: {
      plugins: [
        ['import', {
          libraryName: 'vant',
          "style": (name) => {
            return `${name}/style/less.js`
          }
        }, 'vant']
      ],
    },
  }
复制代码

进一步使用自定义变量修改主题

 loaders: {
      less: {
        javascriptEnabled: true,
        modifyVars: {
          "nav-bar-title-font-size": "80px",
        }
      }
    }
复制代码

另外在组件内注册使用也可以的

<template>
  <NavBar title="标题" left-text="返回"
    right-text="按钮"  left-arrow />
</template>
<script>
  import { NavBar } from 'vant'
  export default {
    components: {
      NavBar
    }
  }
</script>
复制代码

测试使用

// plugins/vant-ui.js
import Vue from 'vue'
import { NavBar } from 'vant'
Vue.use(NavBar)


// nuxt.config.js
 plugins: [
    { src: '@/plugins/vant-ui', ssr: true },
  ],
复制代码

在线 demo

codesandbox.io/s/nuxt-vant…

end

有疑问请留言。。。

nuxt other

关注下面的标签,发现更多相似文章
评论