babel

babel.config.js

@@ -2,6 +2,14 @@ module.exports = {
   presets: [
     '@vue/cli-plugin-babel/preset',
   ],
-  plugins: [
+  "plugins": [
-  ],
+    [
+      "import",
+      {
+        "libraryName": "view-ui-plus",
+        "libraryDirectory": "src/components"
+      },
+      "view-ui-plus"
+    ]
+  ]
 };

src/main.js

@@ -1,5 +1,5 @@
 import { createApp } from 'vue'
-import ViewUIPlus from 'view-ui-plus'
+// import ViewUIPlus from 'view-ui-plus'
 import App from './App.vue'
 import router from './router'
 import axios from 'axios'
@@ -7,6 +7,9 @@ import VueAxios from 'vue-axios'
 import i18n from './i18n/'
 import NoteConstant from "@/libs/constants"
 
+import {Layout,Header,Row,Col,Modal,Button,ButtonGroup,Card,Content,Input,Form,WordCount,Footer,Skeleton,SkeletonItem,Badge,Icon,Tag} from 'view-ui-plus';
+//import 'view-ui-plus/dist/styles/viewuiplus.css';
+
 axios.defaults.baseURL = NoteConstant.servicePath;
 const debugFlag = process.env.NODE_ENV !== 'production';
 
@@ -16,14 +19,28 @@ app.config.debug = debugFlag;
 app.config.devtools = debugFlag;
 app.config.productionTip = debugFlag;
 
+app.component('Layout', Layout);
+app.component('Header', Header);
+app.component('Row', Row);
+app.component('Col', Col);
+app.component('Modal', Modal);
+app.component('Button', Button);
+app.component('ButtonGroup', ButtonGroup);
+app.component('Card', Card);
+app.component('Content', Content);
+app.component('Input', Input);
+app.component('Form', Form);
+app.component('WordCount', WordCount);
+app.component('Footer', Footer);
+app.component('Skeleton', Skeleton);
+app.component('SkeletonItem', SkeletonItem);
+app.component('Badge', Badge);
+app.component('Icon', Icon);
+app.component('Tag', Tag);
+
+
 app.use(router)
   .use(i18n)
   .use(VueAxios, axios)
-  .use(ViewUIPlus, {
-    i18n: i18n,
-    transfer: true,
-    size: 'large',
-    capture: false,
-  })
   .mount('#app')
 

vue.config.js

@@ -13,7 +13,7 @@ const assetsCDN = {
     "crypto-js": "CryptoJS",
     'pako': 'pako',
     "html2canvas": "html2canvas",
-    'view-ui-plus':'ViewUIPlus',
+  //  'view-ui-plus':'ViewUIPlus',
   },
 
   // 通过cdn方式使用
@@ -22,7 +22,7 @@ const assetsCDN = {
     'https://cdn.jsdelivr.net/npm/vue-router@4.1.6/dist/vue-router.global.min.js',
     'https://cdn.jsdelivr.net/npm/crypto-js@4.1.1/crypto-js.min.js',
     'https://cdn.jsdelivr.net/npm/pako@2.1.0/dist/pako.min.js',
-    'https://cdn.jsdelivr.net/npm/view-ui-plus@1.3.10/dist/viewuiplus.min.js',
+//    'https://cdn.jsdelivr.net/npm/view-ui-plus@1.3.10/dist/viewuiplus.min.js',
     
     'https://cdn.jsdelivr.net/npm/wasm-flate@1.0.2-browser/wasm_flate.min.js',
     'https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js',