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 框架 官網

uni-app 框架官網

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模式：通過頁面跳轉完成而無需重新加載頁面