對於iview組件進行系統學習，由於前端基礎太差，不會webpcak，又新看了webpack。個人理解就是一個對模塊進行打包的工具
不過處於對iview組件的迫切使用，直接在html本地中測試了組件，嗯，比我寫的好看一萬倍了。此處有坑就是不在node環境下template中寫直接在HTML中寫iview的話部分組件應該使用i-小寫的，如此處闌珊布局，Col應寫成i-col才好使,此處放上所有iview不在template中應修改的標簽（不該的話直接放html里就會不對哦，來自於iview官網）：
以下組件，在非 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-：
- Switch:
i-switch - Circle:
i-circle
另外，在iview官網下有個坑就是Form表單的源代碼，首先應把Form改為i-form，然后再官網下FormItem是使用的駝峰標識，在Vue.js的官網中也提到了，因此應該把FormItem改為Form-item,此處表示找錯找了半小時才想到。。。。。。被坑得不要不要的了~
本地測試代碼
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>iview example</title> <link rel="stylesheet" href="iview/dist/styles/iview.css" /> <script type="text/javascript" src="js/vue.min.js" ></script> <script type="text/javascript" src="iview/dist/iview.min.js" ></script> <link rel="stylesheet" href="css/syle.css" /> </head> <body> <div id="app"> <Row> <i-col span="12"> <Steps :current="2"> <Step title="已完成" content="這里是該步驟的描述信息"></Step> <Step title="進行中" content="這里是該步驟的描述信息"></Step> <Step title="待進行" content="這里是該步驟的描述信息"></Step> <Step title="待進行" content="這里是該步驟的描述信息"></Step> </Steps> </i-col> <i-col span="12"> <Tabs value="name1"> <Tab-pane label="我是" name="name1">你好</Tab-pane> <Tab-pane label="你好" name="name2">我是</Tab-pane> </Tabs> <i-button @click="show">Click me!</i-button> </i-col> </Row> <Modal v-model="visible" title="Welcome">歡迎使用 iView</Modal> <Slider v-model="value1"></Slider> <Slider v-model="value2" range></Slider> <Slider v-model="value3" range disabled></Slider> </div> <script> new Vue({ el: '#app', data: { visible: false, theme1: 'light', value1: 25, value2: [20, 50], value3: [20, 50] }, methods: { show: function () { this.visible = true; } } }) </script> </body> </html>
結果圖：
