IView4 is loaded using a CDN

Index.html (HREF/SRC addresses can be replaced with the corresponding CDN addresses)

<head>
  <link href="./lib/iview/styles/iview.css" rel="stylesheet" />
</head>

<body>
  <script src="./lib/iview/iview.min.js"></script>
</body>

vue.config.js

module.exports = {
  configureWebpack: {
    externals: {
      'view-design': 'iview',
      iview: 'ViewUI',
    }
  }
}

Using Custom Themes

Since the CDN is used to introduce IView, the following way of the official website can not be used.

@import '~view-design/src/styles/index.less';

// Here are the variables to cover, such as:
@primary-color: #8c0776;

We need to manually place the files in the styles folder of the iview project into our own project (go to the GitHub of iview4 to download).



After downloading, create a new iview_change.less file and change the code of the official website to (the specific address of the introduction is the address of the styles folder of iview under your project).

@import '~@/dil/iViewUI/styles/index.less';

// Here are the variables to cover, such as:
@primary-color: #8c0776;

Finally, I introduce IView

import Vue from 'vue'
import ViewUI from 'view-design'
import '@/css/iview_change.less'

Vue.use(ViewUI, {
  transfer: true
})

After doing the above, IView4 should be able to use the custom theme normally after loading using the CDN. Your project package files no longer need to be loaded with IView to make them bigger.