在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_modules\fsevents):
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
                        }
                    }
                ]
            },

 最後重啓服務就行啦：