nuxt以按需引入组件的方式使用ui框架 |
您所在的位置：网站首页 › 如何使用ui › nuxt以按需引入组件的方式使用ui框架 |
nuxt以按需引入组件的方式使用ui框架
|
这里不对nuxt进行一个介绍，我们这里只介绍下ui框架如何在nuxt按需引入，ui框架如：vant-ui 、element-ui等。 我们以vant-ui按需引入为例，在vant-ui官网中，按需引入步骤如下： 1、npm i vant -S 2、npm i babel-plugin-import -D 3、.babelrc中配置，代码如下 // 注意：webpack 1 无需设置 libraryDirectory { "plugins": [ ["import", { "libraryName": "vant", "libraryDirectory": "es", "style": true }] ] } // 对于使用 babel7 的用户，可以在 babel.config.js 中配置 module.exports = { plugins: [ ['import', { libraryName: 'vant', libraryDirectory: 'es', style: true }, 'vant'] ] };那我们在nuxt中又该如何配置呢？ 步骤1和步骤2也是一样，接下去我们还需要两步的操作， 步骤3：:在plugins文件夹下新建一个van-ui.js目录如图： 步骤4： 在nuxt.config.js中修改两个地方，plugins模块和build模块： /* ** Plugins to load before mounting the App */ plugins: [ '~/plugins/vant-ui', //引入我们的vant-ui.js ], build: { /* ** You can extend webpack config here */ /*extend(config, ctx) { },*/ babel: { //vant官网的步骤3就在这里配置 "plugins": [ ['import', { libraryName: 'vant', libraryDirectory: 'es', style: true }, 'vant'] ] } }这样就可以实现按需引入了，其他ui框架也是一样的道理，希望对你有所帮助。 |
里面放入需要用到的组件如：【本文地址】
今日新闻 |
推荐新闻 |