[JavaScript知识库]Vue-CLI界面优化框架——IView & Element UI

IView的使用

使用按需引入组件，可以减少文件体积：

（1）使用插件安装：npm install babel-plugin-import --save-dev，安装成功后在根目录新建文件.babelrc，写入如下代码：

{
    "plugins": [["import", {
        "libraryName": "iview",
        "libraryDirectory": "src/components"
    }]]
}

（2）npm方式：$ npm install iview --save，在项目中根目录下的main.js文件中加入以下代码：

import 'iview/dist/styles/iview.css';
import { Row, Col, Button } from 'iview'; // 中括号中为iview里的组件
Vue.component('Row', Row)
Vue.component('Col', Col)
Vue.component('Button', Button)

参考链接：https://iviewui.com/docs/guide/start

?Element UI的使用

（1）npm安装：npm install element-ui -save

（2）Vue-cli搭建的项目使用命令：vue add element添加vue-cli-plugin-element，如下：

这里可以选择进行Fully import（全局引入），或者Import on demand（按需引入）。

（3）Do you wish to overwrite Element's SCSS variables?(y/N)? 可以重载样式为SCSS，根据自己的需求来进行选择：

?（4）操作成功后，入口文件main.js会自动引入plugins文件，在src文件中会自动添加plugins文件，如下，这样就能够直接在.vue文件中使用Element UI组件：

??????? 如果需要使用按需引入Element UI组件的话，可以借鉴IView框架的使用方法，并参考链接：https://element.eleme.cn/#/zh-CN/component/quickstart