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);