iview与view-design库的使用以及.babelrc文件问题

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库,安装时需要安装推荐安装view-design库

导入view-design

• 全局引入

  import ViewUI from 'view-design';
  import 'view-design/dist/styles/iview.css';
  
  Vue.use(ViewUI);

• 局部引入

1. 需要安装插件babel-plugin-import

使用NPM安装

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

使用YARN安装

yarn add babel-plugin-import --dev

2. 配置babel.config.js文件

注意:官方文档中需要在文件 .babelrc 中配置,而使用VUE-CLI4脚手架搭建的项目中没有.babelrc 文件,不要惊慌.

解决方法:在babel.config.js文件中将官方配置添加.

具体可以查询官方文档Babel 可以通过 babel.config.js 进行配置。

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

3. 组件内引入需要的组件

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

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

特别提醒

按需引用仍然需要导入样式，即在 main.js 或根组件执行 import ‘view-design/dist/styles/iview.css‘;

全局导入和局部导入不能同时使用,否则会发生冲突,无法执行.

VUE单页面应用,使用全局与局部引入其实质影响不大,全局公用一个vue实例.推荐使用全局引入的方式引入view-design库

iview与view-design库的使用以及.babelrc文件问题

原文：https://www.cnblogs.com/Scooby/p/12144586.html