脚本宝典收集整理的这篇文章主要介绍了基于vue-cli工程的应用之——iView，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

一、快速上手

1、搭建基础工程--vue-cli
    
    // 新建iview-PRoject工程文件夹
    $ vue inIT webpack iview-project
    
    // 安装过程中自定义选项，新手的话也可以选择**一路回车**
    
    // 进入 iview-project文件
    $ cd iview-project/
    
    // 安装依赖模块
    $ npm i
    
    // 测试
    $ npm run dev
    
    至此，浏览器打开localhost：8080，出现Vue.js页面,表示基础工程搭建**成功了**！

2、NPM安装 iView
    $ npm i -s iview   

3、引入 iView 
    1)、整体引入
        一般在 webpack 入口页面 main.js 中如下配置：
        import iView From 'iview';
        import 'iview/dist/styles/iview.css';

        Vue.use(iView);
    
    2）、按需引入
        如果您想在 webpack 中按需使用组件，减少文件体积，可以这样写：
        import { Button, Table } from 'iview';
        Vue.component('Button', Button);
        Vue.COMponent('Table', Table);
        
        **提醒：***按需引用仍然需要导入样式，即在 main.js 
        或根组件执行 import 'iview/dist/styles/iview.css';*
     

    4、组件使用规范
        a、动态传值，使用 :prop = ''
        b、在非 template/render 模式下（例如使用 CDN 引用时），
           组件名要分隔（驼峰命名改为烤肉串），例如 DatePicker 必须要写成 date-picker
        c、以下组件，在非 template/render 模式下，需要加前缀 i-：
            ·Button: i-button
            ·Col: i-col
            ·Table: i-table
            ·Input: i-input
            ·Form: i-form
            ·Menu: i-menu
            ·Select: i-select
            ·Option: i-option
            ·Progress: i-progress
           以下组件，在所有模式下，必须加前缀 i-，除非使用 iview-loader：
             ·Switch: i-switch
             ·Circle: i-circle

              
    

脚本宝典总结

以上是脚本宝典为你收集整理的基于vue-cli工程的应用之——iView全部内容，希望文章能够帮你解决基于vue-cli工程的应用之——iView所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。