脚本宝典收集整理的这篇文章主要介绍了

基于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群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过