iview與view-design庫的使用以及.babelrc文件問題

全篇文章總結

1- 使用VUE-CLI4腳手架搭建的項目中沒有.babelrc 文件,解決方法將相關配置添加在babel.config.js文件中.

2- 按需引用仍然需要導入樣式，即在 main.js 或根組件執行 import 'view-design/dist/styles/iview.css';

3- 全局導入和局部導入不能同時使用,否則會發生沖突,無法執行。

4- VUE單頁面應用,使用全局與局部引入其實質影響不大,全局公用一個vue實例.推薦使用全局引入的方式引入view-design庫。

5- 具體細節可以查看下列文章。

iview與view-design UI庫的使用

View UI 即為原先的 iView，從 2019 年 10 月起正式更名為 View UI，並使用全新的 Logo。iView 作者將在新倉庫https://github.com/view-design/ViewUI繼續開發 iView 4.0 和后續版本，以及維護工作。

簡單說就是：

iview庫正式更名為view-design庫,iview庫不再維護,建議使用安裝view-design庫.

導入view-design

全局引入

import ViewUI from 'view-design';
import 'view-design/dist/styles/iview.css';

Vue.use(ViewUI);

局部引入

需要安裝插件babel-plugin-import

使用NPM安裝

npm install babel-plugin-import --save-dev

使用YARN安裝

yarn add babel-plugin-import --dev

配置babel.config.js 和 .babelrc文件文件

注意:官方文檔中需要在文件 .babelrc 中配置,而使用VUE-CLI4腳手架搭建的項目中沒有.babelrc 文件,不要驚慌.
解決方法:在babel.config.js文件中將官方配置添加.

具體可以查詢官方文檔Babel 可以通過 babel.config.js 進行配置。

{
  "plugins": [["import", {
    "libraryName": "view-design",
    "libraryDirectory": "src/components"
  }]]
}

組件內引入需要的組件

import 'view-design/dist/styles/iview.css';
import { Button, Table, Icon } from 'view-design';

Vue.component('Button', Button);
Vue.component('Table', Table);