vue项目中使用iview框架


通过几个项目的了解,个人感觉iview框架是vue框架中比较容易上手,比较好用的框架,主要是各种例子比较齐全,且网上的资料比较多,易于查找。

废话不多说附上步骤:

一:iview (pc端前端框架)安装

npm install iview --save

二:一般在 webpack 入口页面 main.js 中如下配置

import iView from 'iview';
import 'iview/dist/styles/iview.css';

Vue.use(iView);

三:iview 按需引入

借助插件 babel-plugin-import可以实现按需加载组件,减少文件体积。首先安装,并在文件 .babelrc 中配置:

npm install babel-plugin-import --save-dev

按需引用仍然需要导入样式,即在 main.js 或根组件执行 
import 'iview/dist/styles/iview.css';

// .babelrc
{
  "plugins": [["import", {
    "libraryName": "iview",
    "libraryDirectory": "src/components"
  }]]
}
然后这样按需引入组件,就可以减小体积了:

import { Button, Table } from 'iview';
Vue.component('Button', Button);
Vue.component('Table', Table);

好了,很简单吧,顺便附上iview框架首页地址:http://v1.iviewui.com/

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM