webpack+vue+ts project中引入iview

1. 首先需要在Project中安装iview 。^_^!!

   npm install iview --save-dev

2. 安装iview-loader

   npm install iview-loader --save-dev

   修改webpack配置项

   {
      // ...
       {
           test: /\.vue$/,
           use: [
               {
                   loader: "vue-loader",
                   options: {...}
               },
               {
                   loader: "iview-loader",
                   options: {
                       prefix: false  
                       // false时可以使用大写标签，不需要前缀
                       // 在ts里，除了全局引入，否则貌似没有起作用 T_T||
                   }
               }
           ]
       }
   }

3. 目前iview的2.14.0版本貌似还没有TS声明文件QAQ，需要手动声明，否则会报模块未找到错误。在.d.ts文件中声明iview module

   //...
   declare module 'iview' {
       const Iview: any
       export default Iview
   }

4. 引入iview，在3.中的.d.ts文件声明需要用到的组件，以大写字母打头，详情可以参考iview的文档就可以愉快的使用iview了，不管是这样 P_P：

   // main.ts
   ...
   import "iview/dist/styles/iview.css"
   import Iview from "iview"
   ​
   Vue.use(Iview)

   还是这样 D_D：

   // main.ts
   import {Row, Col} from 'iview'
   ​
   Vue.components('Row', Row)
   Vue.components('Col', Col)

   还是这样 B_B:

   // .vue
   <script lang="ts">
       import {Row, Col} from 'iview'
       @Component({
           components: {
               Row,
               Col
           }
       })
       export default class App extends Vue{
           //...
       }
   script>

总结:

1. 很麻烦，比在js中用要麻烦。

2. 貌似没有全局或者局部引用的区别，生成的app.j一样大(Why?) —— 可能是我打开姿势不对.jpg。

3. 暂时没有第三点。