1、iView是一套基于Vue.js的开源UI组件库，主要服务于PC界面的中后台产品，比如某产品的运营平台、数据监控平台、管理平台等，从工程配置、到样式布局，甚至后面规划的业务套件，是一整套的解决方案，所以它可能不太适合一些to C 的产品，比如 QQ空间 这类的。
Element 饿了么前端出品的一套 基于 Vue 2.0 的桌面端组件库，可用来构建中大型后台管理项目
2、搭建

  1. #Element
  3. # Clone project
  4. git clone https://github.com/PanJiaChen/vue-admin-template.git 
  5. # Install dependencies
  6. npm install 
  7. # Serve with hot reload at localhost:9528
  8. npm run dev 
  9. # Build for production with minification
  10. npm run build 
  11. # Build for production and view the bundle analyzer report
  12. npm run build --report
  14. #VIEW UI
  15. #1、按需加载
  16. npm install babel-plugin-import --save-dev
  18. // .babelrc
  19. {
  20.   "plugins": [["import", {
  21.     "libraryName": "view-design",
  22.     "libraryDirectory": "src/components"
  23.   }]]
  24. }
  25. 然后这样按需引入组件，就可以减小体积了：
  27. import { Button, Table } from 'view-design';
  28. Vue.component('Button', Button);
  29. Vue.component('Table', Table);

3、设计风格
两者api 总体比较 ，iview 要比element 简洁许多。 饿了么更侧重于在template里直接去渲染模板

  • 思想上 个人觉得iview偏向react, element 更vue
  • 表单校验 两者都使用同一款插件 async-validator 校验方式一样

Ant Design 在 标准、视觉 上更胜一筹,示例少，成熟度不够

element国内最早，生态好

view ui 由公司维护，精致，偏向react设计思想，付费

4、兼容性
view ui to B 只能兼容到IE9

5、单元测试

断言

你不必为了可测性在组件中做任何特殊的操作，导出原始设置就可以了：

  1. <template>
  2.   <span>{{ message }}</span>
  3. </template>
  4. <script>
  5.   export default {
  6.     data () {
  7.       return {
  8.         message: 'hello!'
  9.       }
  10.     },
  11.     created () {
  12.       this.message = 'bye!'
  13.     }
  14.   }
  15. </script>

然后随着 Vue Test Utils 导入组件，你可以使用许多常见的断言 (这里我们使用的是 Jest 风格的 expect 断言作为示例)：

  1. // 导入 Vue Test Utils 内的 `shallowMount` 和待测试的组件
  2. import { shallowMount } from '@vue/test-utils'
  3. import MyComponent from './MyComponent.vue'
  4. // 挂载这个组件
  5. const wrapper = shallowMount(MyComponent)
  6. // 这里是一些 Jest 的测试，你也可以使用你喜欢的任何断言库或测试
  7. describe('MyComponent', () => {
  8.   // 检查原始组件选项
  9.   it('has a created hook', () => {
  10.     expect(typeof MyComponent.created).toBe('function')
  11.   })
  12.   // 评估原始组件选项中的函数的结果
  13.   it('sets the correct default data', () => {
  14.     expect(typeof MyComponent.data).toBe('function')
  15.     const defaultData = MyComponent.data()
  16.     expect(defaultData.message).toBe('hello!')
  17.   })
  18.   // 检查 mount 中的组件实例
  19.   it('correctly sets the message when created', () => {
  20.     expect(wrapper.vm.$data.message).toBe('bye!')
  21.   })
  22.   // 创建一个实例并检查渲染输出
  23.   it('renders the correct message', () => {
  24.     expect(wrapper.text()).toBe('bye!')
  25.   })
  26. })

编写可被测试的组件

很多组件的渲染输出由它的 props 决定。事实上，如果一个组件的渲染输出完全取决于它的 props，那么它会让测试变得简单，就好像断言不同参数的纯函数的返回值。看下面这个例子：

  1. <template>
  2.   <p>{{ msg }}</p>
  3. </template>
  4. <script>
  5.   export default {
  6.     props: ['msg']
  7.   }
  8. </script>

你可以使用 Vue Test Utils 来在输入不同 prop 时为渲染输出下断言：

  1. import { shallowMount } from '@vue/test-utils'
  2. import MyComponent from './MyComponent.vue'
  3. // 挂载元素并返回已渲染的组件的工具函数
  4. function getMountedComponent(Component, propsData) {
  5.   return shallowMount(Component, {
  6.     propsData
  7.   })
  8. }
  9. describe('MyComponent', () => {
  10.   it('renders correctly with different props', () => {
  11.     expect(
  12.       getMountedComponent(MyComponent, {
  13.         msg: 'Hello'
  14.       }).text()
  15.     ).toBe('Hello')
  16.     expect(
  17.       getMountedComponent(MyComponent, {
  18.         msg: 'Bye'
  19.       }).text()
  20.     ).toBe('Bye')
  21.   })
  22. })

断言异步更新

由于 Vue 进行异步更新 DOM 的情况，一些依赖 DOM 更新结果的断言必须在 vm.$nextTick() resolve 之后进行：

  1. // 在状态更新后检查生成的 HTML
  2. it('updates the rendered message when wrapper.message updates', async () => {
  3.   const wrapper = shallowMount(MyComponent)
  4.   wrapper.setData({ message: 'foo' })
  5.   // 在状态改变后和断言 DOM 更新前等待一刻
  6.   await wrapper.vm.$nextTick()
  7.   expect(wrapper.text()).toBe('foo')
  8. })