VUE+mint-ui按需引入总结

末蓝、 2023-10-11 13:57 30阅读 0赞

第一步：安装mint-ui（这里不细说）

第二步；运行npm install babel-plugin-component （文档写的npm install babel-plugin-component -D,）(我按文档知道装了报错，项目无法编译，可能是和版本有关系？？？多次尝试后把-D删掉就可以)

第三部： 修改.babelrc 文件，一般安装在项目根目录下  
（我按文档说的修改的内容走报错无法运行，后来发现只需要在.babelrc文件里面的plugin加上以下内容即可）  
\["component", \[ \{ "libraryName": "mint-ui", "style": true \} \] \]

我的最终结果如下：

\{  
"presets": \[  
\["env", \{ "modules": false \}\],  
"stage-2"  
\],  
"plugins": \["transform-runtime"\],  
"comments": false,  
"env": \{  
"test": \{  
"presets": \["env", "stage-2"\],  
"plugins": \[  
"istanbul" ,  
\["component", \[  
\{  
"libraryName": "mint-ui",  
"style": true  
\}  
\]\]  
\]  
\}  
\}  
\}

第四部：修改main.js文件  
首先，引入使用的组件（以下是我用到的）

//按需引入  
import \{ Button, TabContainer, TabContainerItem, Loadmore , \} from 'mint-ui'  
  
然后，声明使用组件（文档说可以写成Vue.use(xxxx)，我这么写报错，具体原因未知，建议用下面的写法）

//按需引入  
Vue.component(Button.name, Button);  
Vue.component(TabContainer.name, TabContainer);  
Vue.component(TabContainerItem.name, TabContainerItem);  
Vue.component(Loadmore.name, Loadmore);  
  
第五步：npm run build 运行无报错，成功

附全局引入：（这里多了个CSS文件的引入，按需引入的话这行也要注释掉）

// 全局引入  
// import MintUI from 'mint-ui'  
// import 'mint-ui/lib/style.css'

// 全局引入  
// Vue.use(MintUI)

发表评论取消回复

表情：

评论列表（有 0 条评论，30人围观）

还没有评论，来说两句吧...

相关阅读

相关 VUE+mint-ui按需引入总结

第一步：安装mint-ui（这里不细说）第二步；运行npm install babel-plugin-component （文档写的npm install babel-pl

末蓝、/ 2023年10月11日 13:57/ 0 赞/ 31 阅读

相关 echarts5在Vue中按需引入

安装 `echarts5.x` npm install echarts --save 按需引入 `echarts` 图表和组件先在项目根路径下新建 `p

痛定思痛。/ 2023年01月12日 04:14/ 0 赞/ 404 阅读

相关 babel-plugin-import 实现自动按需引入

Vant 支持一次性导入所有组件，引入所有组件会增加代码包体积，因此不推荐这种做法 babel-plugin-import 是一款 babel 插件，它会在编译过程中将 im

怼烎@/ 2023年01月11日 08:42/ 0 赞/ 186 阅读

相关 vue中更好的按需引入echarts

echarts很大。如果项目中直接全局引入，在不开启gzip的情况下，打包的体积会增加1M。以下未引入之前 ![在这里插入图片描述][watermark_type_

不念不忘少年蓝@/ 2022年12月26日 00:56/ 0 赞/ 242 阅读

相关 vue-cli按需引入element-ui

按照element-ui官方提供的步骤一步一步调整，最后可能会报错，对应不同错误，有如下不同的执行方式：如果报错Module build failed: Error: Co

清疚/ 2022年04月02日 15:52/ 0 赞/ 274 阅读

相关 Antd按需引入【Vue版】

antd给了两种按需导入的，我很想用第一种，但是弄了半天，就是弄不好，就算了。有知道的小伙伴可以在下面留言告诉我 ![在这里插入图片描述][watermark_type_Z

╰+攻爆jí腚メ/ 2022年02月15日 04:43/ 0 赞/ 902 阅读

相关 react antd 按需引入

react antd 按需加载实现方式 > 以前有人说按照官方文档实现antd按需引入会有些问题,今天亲自尝试了一下,还是没有问题的, > 下面时我的具体步骤 >

迈不过友情╰/ 2022年01月23日 06:29/ 0 赞/ 406 阅读

相关 VUE项目中按需引入ECharts.js

安装ECharts包 > npm install echarts --save 引入 ECharts 　　按需引入\--在main.js中引入 1 //

落日映苍穹つ/ 2021年12月24日 08:13/ 0 赞/ 1434 阅读

相关 UI组件--element-ui--全部引入和按需引入

主要就是一句话, 如果用到的组件少, 要按需引入, 如果用到的组件很多,就全部引入, 因为按需引入全部的, 和全部引入效果一样完整引入在 main.js 中写入以下

╰半橙微兮°/ 2021年12月14日 10:41/ 0 赞/ 366 阅读

相关 vue项目中引入mint-ui的方式（全部引入与按需引入）

一、全部引入 1、安装mint-ui npm intall mint-ui --save 2、main.js中引入mint-ui import MintUI fr

ゝ一纸荒年。/ 2021年09月16日 20:10/ 0 赞/ 678 阅读