Vue+iview 记录一下在vue+element项目中按需引入iview组件遇到的一个小坑

前言

最近在鼓捣我的那个vue+element+mysql的小系统时，有些功能用element不好实现，于是在度娘的帮助下，找到了一个思路可以用iview组件库来实现。如果全部引入iview库，但我只要用到当中的几个组件，其中大部分是用不到的，只会让项目包变得更大。所以，按需引入，你值得拥有，毕竟三千弱水，只要取几瓢就好了嘛🐶废话不多说，先看下按需引入iview的步骤

按需引入iview组件

1、npm安装iview依赖

首先，打开项目根目录，
npm下载iview

npm install iview --save //npm 5.0+ 版本在默认情况下会将安装的模块添加到 package.json 文件中的 dependencies 列表中。对于较老的 npm 版本，你就必须指定 --save 参数。

2、安装iview插件: vue-cli-plugin-iview

在这里，我们可以有两种方式来安装：

一是利用vue-cli的GUI图形界面，命令行打开

vue ui

打开后的界面如下：

接下来，点击左侧功能栏>插件

添加插件

然后在查找插件一栏中搜索vue-cli-plugin-iview，安装

接着在安装选项中选择按需引入，后面的选项默认选择，点击完成安装

好啦，iview组件的安装到这里就结束啦，才怪咧，还有第二种方法咧

二是在命令行中输入，选项照旧

//项目根目录下，运行命令，是安装在devDependencies下的
vue add iview
//卸载
npm uninstall vue-cli-plugin-iview

3、安装完成

我们来看看项目文件结构有什么变化

可以看到在/src 文件夹下多了一个 /plugins 的文件夹，文件下有一个iview.js文件，这里就是我们按需引入iview组件的地方

还有一个地方也有变化


最后，我们就可以愉快的使用引入的组件啦🐱‍🐉
随便搞搞，找个页面，就你了，对，就你，最绿的那个

遇到的小坑

在按需引入iview的过程中，iview的插件安装会覆写app.vue 入口文件的内容，如果是把路由入口 router-view 写在这就要注意了

好了，今天的记录就到这了，接下的日子我会继续更新在学习前端开发过程中所遇到的问题和一些记录，希望能一起分享交流学习，哦呀斯密