zoukankan      html  css  js  c++  java
  • 在vue里面使用iView框架

    iView框架的文档   https://www.iviewui.com/docs/guide/install

    这里使用的是 npm 来安装,在项目下执行下面命令npm install iview --save:

    $ npm install iview --save

    npm WARN ajv-keywords@3.2.0 requires a peer of ajv@^6.0.0 but none is installed. You must install peer dependencies yourself.
    npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modulesfsevents):
    npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

    + iview@2.14.3
    added 10 packages from 12 contributors and audited 32865 packages in 17.509s
    found 7 vulnerabilities (1 low, 1 moderate, 4 high, 1 critical)
    run `npm audit fix` to fix them, or `npm audit` for details

    在main.js 里面引入:

    import iView from 'iview';
    import 'iview/dist/styles/iview.css';
    
    Vue.use(iView);

    然后在页面中使用:

    <template>
        <Row>
             <Col span="14">
                 col-14
             </Col>
             <Col span="4">
                 col-4
             </Col>
        </Row>
    </template>

    运行就可以看到实现的效果  :)

    上面是全部引入该组件库,如果仅使用里面的部分组件,也可以选择按需引入

    最后就是统一 iView 标签书写规范,所有标签都可以使用首字母大写的形式,包括 Vue 限制的两个标签 Switch 和 Circle

    <Circle :percent="80">
         <span class="demo-Circle-inner" style="font-size:24px">
    80% </span> </Circle>

     可以看到虽然添加了进度环,但是在页面上并没有显示出来:

    虽然不推荐,但通过 loader 选项配置,可以开启所有标签前缀的写法了,比如 i-date-picker

    首先通过 npm 安装 iview-loader  : 

    npm install iview-loader --save-dev

    然后配置 webpack,改写平时 vue-loader 的配置,如下图:

      module: {
        rules: [
          // {
          //   test: /.vue$/,
          //   loader: 'vue-loader',
          //   options: vueLoaderConfig
          // },
          {
                    test: /.vue$/,
                    use: [{
                            loader: 'vue-loader',
                            options: {
    
                            }
                        },
                        {
                            loader: 'iview-loader',
                            options: {
                                prefix: false
                            }
                        }
                    ]
                },

     最后重启服务就行啦:

  • 相关阅读:
    day14_oracle数据库备份
    day13_存储过程小记
    day13_先沃联盟定时任务
    day13_自动抽取数据——监控存储过程
    [笔记]《HTTP权威指南》- 实体和编码
    [笔记]《白帽子讲Web安全》- Web框架安全
    [笔记]《Vue移动开发实战技巧》- Vue-router使用
    WPF与Win32互操作
    [翻译]HTML5
    学习资料收藏
  • 原文地址:https://www.cnblogs.com/stella1024/p/8298081.html
Copyright © 2011-2022 走看看