vue中的ui框架，图形组件

npm组件库

Bootstrap分两种使用：

1. vuestrap组件库，封装好的vue组件，可以直接当作子组件用
2. css+js 可以在vue中直接用，更好的用法是根据提供的模板实例封装成自定义组件
3. 第三种是对第二种的进一步封装，像boostrap-table等

vue工程搭建完成的基础上

1. 安装vue-strap插件库 $ npm install vue-strap
   

   • 这个组件库不适用于vue2.0，兼容性会报错
   • [email protected] 官网
   • import '../node_modules/vue-strap/dist/vue-strap.min.js'
     
     
     1.1 使用bootstrap-vue库替换这个老版本
     $ npm install vue bootstrap-vue bootstrap
     [email protected] 官网

2. 安装bootstrap依赖 $ npm install bootstrap
   

   • 安装的时候需要将启动的项目停掉，操作工程中的文件不成功会导致安装失败
   • bootsrap-vue的插件库，需要依赖bootstrap的css及js
     
     [email protected] 官网
   • bootstrap.min.js依赖安装$ npm install --save popper.js
        [email protected]
     

   在main.js中引入

   import ‘…/node_modules/bootstrap/dist/css/bootstrap.min.css’

   import ‘…/node_modules/bootstrap/dist/js/bootstrap.min.js’

3. 安装jquery库 $ npm install jquery --save-dev
   • Bootstrap 需要依赖jquery
   • [email protected] 官网

	 // build/webpack.base.conf.js文件增加
    const webpack = require("webpack");

    plugins: [
    new webpack.ProvidePlugin({
      jQuery: 'jquery',
      $: 'jquery'
    })
  ]
  //main.js文件引入文件
	import $ from 'jquery

4. 至此基础组件安装安装完成，可以使用

Bootstrap其他组件

这些不是vue的组件，可以自己需要进行二次封装操作比较简单

1. bootstrap-select：$ npm install bootstrap-select

   • [email protected] 官网
     import ‘…/node_modules/bootstrap-select/dist/js/bootstrap-select.min’
     import ‘…/node_modules/bootstrap-select/dist/css/bootstrap-select.min.css’

2. Bootstrap-table: $ npm install bootstrap-table

   • [email protected] 官网

图标库

Google图标
fontawesome图标

UI框架

element UI 框架 官网

iview UI 框架 官网

Bootstrap、element UI与iview UI 对比

1. bootstap提供自己的css/js组合的样式插件，主题；还有针对自己样式库的进一步封装；针对vue提供对应的组件库
2. element ui 只是提供对应的vue组件，想要使用他的样式，可以通过F12进行提取；想要自己封装组件比较麻烦
3. iview ui 分为两种，免费版/专业版 免费版与element ui 一样，只是提供基础组件；专业版有更加详细的设计说明，涵盖的内容更加全面

同时三种ui框架针对vue支持提供单独组件的引用

图形组件

1、使用**vis.js** 组件，可以提供各种类似关系图，有向图等各种实例，并且实例关系可编辑
源码在github上，examples/ 目录是提供的很多示例，可以直接改造使用，如果在vue中使用需要进行简单封装

2、Apache ECharts 组件，提供个各种统计视图，关系图，3D图形等

问题

1. idea路径提示
   
      Module is not installed less… (Ctrl+F1) Inspection info: Checks whether the module in the "requir
   
      Idea中配置管理，不影响运行
   
2. 对于vue中请求url中自动添加的/#/，可以启用history模式去掉
   • src/router/route.js 增加mode
   • Vue路由默认模式为hash：使用url的hash来模拟一个完整的url，所以url中会多个#/，改变url页面不会重新加载
   • History模式：通过页面跳转完成而无需重新加载页面