Add babel plugin (#22)

* complete download function

* chore: 🤖 Crop components to reduce size

Add plugin babel-plugin-component and import on demand

BREAKING CHANGE: 🧨 font-awesome and element-ui are now partial imported when in product
mode

✅ Closes: #20,#19,#18

* push unversioned files

.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [["es2015", { "modules": false }]],
+  "plugins": [
+    [
+      "component",
+      {
+        "libraryName": "element-ui",
+        "styleLibraryName": "theme-chalk"
+      }
+    ]
+  ]
+}

assets/css/global.scss

@@ -1,3 +1,20 @@
+// element ui style
+@import 'element-ui/lib/theme-chalk/pagination.css';
+@import 'element-ui/lib/theme-chalk/table.css';
+@import 'element-ui/lib/theme-chalk/table-column.css';
+@import 'element-ui/lib/theme-chalk/breadcrumb.css';
+//@import 'element-ui/lib/theme-chalk/breadcrumb-item.css'; // empty file
+@import 'element-ui/lib/theme-chalk/tag.css';
+@import 'element-ui/lib/theme-chalk/tree.css';
+@import 'element-ui/lib/theme-chalk/alert.css';
+@import 'element-ui/lib/theme-chalk/row.css';
+@import 'element-ui/lib/theme-chalk/col.css';
+@import 'element-ui/lib/theme-chalk/container.css';
+@import 'element-ui/lib/theme-chalk/main.css';
+@import 'element-ui/lib/theme-chalk/backtop.css';
+@import 'element-ui/lib/theme-chalk/tooltip.css';
+@import "element-ui/lib/theme-chalk/loading.css";
+
 html {
   font-family: "Noto Sans SC", monospace;
 }

assets/css/main.scss

@@ -518,8 +518,43 @@ img {
   }
 }
 
+// warp notice
+
 .site-notice {
   padding-top: 0.8vh;
+
+  // take place of element ui icon
+  .el-icon-success {
+    &:before {
+      font-family: "Font Awesome 5 Free";
+      content: '\f058';
+      font-style: normal; // required
+    }
+  }
+
+  .el-icon-info {
+    &:before {
+      font-family: "Font Awesome 5 Free";
+      content: '\f05a';
+      font-style: normal; // required
+    }
+  }
+
+  .el-icon-warning {
+    &:before {
+      font-family: "Font Awesome 5 Free";
+      content: '\f06a';
+      font-style: normal; // required
+    }
+  }
+
+  .el-icon-error {
+    &:before {
+      font-family: "Font Awesome 5 Free";
+      content: '\f057';
+      font-style: normal; // required
+    }
+  }
 }
 
 // float button
@@ -541,6 +576,11 @@ img {
     &:hover {
       background-color: #e5eee4;
     }
+
+    &:before {
+      font-family: "Font Awesome 5 Free";
+      content: '\f062';
+    }
   }
 
   .float-tools-item {

components/ClipboardBtn.vue

@@ -7,7 +7,7 @@
 
 <script>
 
-import '@/assets/css/main.scss'
+// import '@/assets/css/main.scss'
 import IconClipboardCheck from "@/components/btnComponent/IconClipboardCheck.vue";
 import IconClipboardCopy from "@/components/btnComponent/IconClipboardCopy.vue";
 

components/SideBarNewsPreview.vue

@@ -18,7 +18,7 @@
 </template>
 
 <script>
-import '@/assets/css/main.scss'
+// import '@/assets/css/main.scss'
 
 export default {
   name: "SideBarNewsPreview",

components/Statuslist.vue

@@ -25,7 +25,7 @@
 
 <script>
 import Api_mirror from "@/components/Api/Api_mirror";
-import "@/assets/css/main.scss"
+// import "@/assets/css/main.scss"
 
 export default {
   name: "Statuslist",

layouts/default.vue

@@ -13,7 +13,7 @@
 </template>
 
 <script>
-import '@/assets/css/main.scss'
+// import '@/assets/css/main.scss'
 
 export default {
   name: "default",

layouts/empty.vue

@@ -12,7 +12,7 @@
   </div>
 </template>
 <script>
-import '@/assets/css/main.scss'
+// import '@/assets/css/main.scss'
 
 export default {
   name: "empty",

nuxt.config.js

@@ -61,10 +61,11 @@ export default {
   css: [
     '@fortawesome/fontawesome-svg-core/styles.css',
     '@/assets/css/lib/fontawesome.min.css',
-    'element-ui/lib/theme-chalk/index.css',
+    // 'element-ui/lib/theme-chalk/index.css',
     '@/assets/css/lib/fontawesome.min.css',
     '@/assets/css/fonts.css',
-    '@/assets/css/global.scss'
+    '@/assets/css/global.scss',
+    '@/assets/css/main.scss'
   ],
 
   // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
@@ -199,6 +200,8 @@ export default {
   // Build Configuration: https://go.nuxtjs.dev/config-build
   build: {
     transpile: [/^element-ui/],
+    // enable babelrc
+    babelrc: true,
     extend(config, { isDev, isClient }) {
       if (isDev && isClient) {
         // 在开发模式下运行自定义代码

package.json

@@ -41,6 +41,7 @@
   },
   "devDependencies": {
     "@nuxt/types": "~2.15.0",
-    "@nuxtjs/pwa": "^3.3.5"
+    "@nuxtjs/pwa": "^3.3.5",
+    "babel-plugin-component": "^1.1.1"
   }
 }

pages/index.vue

@@ -9,7 +9,7 @@
 </template>
 
 <script>
-import '@/assets/css/main.scss'
+// import '@/assets/css/main.scss'
 export default {
   name: 'IndexPage'
 }

pages/news/index.vue

@@ -40,7 +40,7 @@
 </template>
 
 <script>
-import '@/assets/css/main.scss'
+// import '@/assets/css/main.scss'
 
 export default {
   name: "news",

pages/wiki/index/_.vue

@@ -33,7 +33,7 @@
 </template>
 
 <script>
-import '@/assets/css/main.scss'
+// import '@/assets/css/main.scss'
 import Vue from "vue"
 import ClipboardBtn from "@/components/ClipboardBtn.vue"
 

plugins/element-ui.js

@@ -1,5 +1,42 @@
 import Vue from 'vue'
-import Element from 'element-ui'
-import locale from 'element-ui/lib/locale/lang/en'
+import locale from 'element-ui/lib/locale/lang/zh-CN'
 
-Vue.use(Element, { locale })
+// dev options(use this to use full function of element ui)
+// Vue.use(Element, { locale })
+// import Element from 'element-ui'
+
+
+// production options
+import {
+  Pagination,
+  Table,
+  TableColumn,
+  Breadcrumb,
+  BreadcrumbItem,
+  Tag,
+  Tree,
+  Alert,
+  Row,
+  Col,
+  Container,
+  Main,
+  Backtop,
+  Tooltip,
+  Loading
+} from "element-ui";
+
+Vue.use(Pagination,{ locale })
+Vue.use(Table,{ locale })
+Vue.use(TableColumn,{ locale })
+Vue.use(Breadcrumb,{ locale })
+Vue.use(BreadcrumbItem,{ locale })
+Vue.use(Tag,{ locale })
+Vue.use(Tree,{ locale })
+Vue.use(Alert,{ locale })
+Vue.use(Row,{ locale })
+Vue.use(Col,{ locale })
+Vue.use(Container,{ locale })
+Vue.use(Main,{ locale })
+Vue.use(Backtop,{ locale })
+Vue.use(Tooltip,{ locale })
+Vue.use(Loading, { locale })

plugins/font-awesome.js

@@ -2,37 +2,46 @@ import Vue from 'vue'
 import { library,config } from '@fortawesome/fontawesome-svg-core'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 
+// import all icons
+
 // icon need tobe import before use in vue components
 // font awesome icon version: 5.15.4
 // cheatsheet: https://fontawesome.com/v5/search?o=r&m=free
-import { fas } from '@fortawesome/free-solid-svg-icons'
-import { far } from '@fortawesome/free-regular-svg-icons'
-import { fab } from "@fortawesome/free-brands-svg-icons";
+// import { fas } from '@fortawesome/free-solid-svg-icons'
+// import { far } from '@fortawesome/free-regular-svg-icons'
+// import { fab } from "@fortawesome/free-brands-svg-icons";
+/* add icons to the library */
+// library.add(fas)
+// library.add(far)
+// library.add(fab)
 
+// import part of the icons
+import {
+  faNewspaper,
+  faPaperclip,
+  faInbox,
+  faEnvelope,
+  faLayerGroup,
+  faTerminal
+} from '@fortawesome/free-solid-svg-icons'
+import {
+  faFileArchive,
+  faPaperPlane
+} from '@fortawesome/free-regular-svg-icons'
+import {
+  faGithub
+} from "@fortawesome/free-brands-svg-icons"
 
-/* add icons to the library */
-library.add(fas)
-library.add(far)
-library.add(fab)
+library.add(faNewspaper)
+library.add(faPaperclip)
+library.add(faInbox)
+library.add(faEnvelope)
+library.add(faLayerGroup)
+library.add(faTerminal)
+library.add(faFileArchive)
+library.add(faPaperPlane)
+library.add(faGithub)
 
-// prevent icon resize to large:
-// https://github.com/FortAwesome/vue-fontawesome/issues/14#issuecomment-426723245
-// config interfaces/options:
-// export interface Config {
-//   familyPrefix: string;
-//   cssPrefix: string;
-//   styleDefault: IconPrefix | CssStyleClass | IconStyle;
-//   familyDefault: IconFamily;
-//   replacementClass: string;
-//   autoReplaceSvg: boolean | 'nest';
-//   autoAddCss: boolean;
-//   autoA11y: boolean;
-//   searchPseudoElements: boolean;
-//   observeMutations: boolean;
-//   keepOriginalSource: boolean;
-//   measurePerformance: boolean;
-//   showMissingIcons: boolean;
-// }
 config.autoAddCss = false
 config.showMissingIcons = true
 

yarn.lock

@@ -146,6 +146,14 @@
   dependencies:
     "@babel/types" "^7.20.7"
 
+"@babel/[email protected]":
+  version "7.0.0-beta.35"
+  resolved "https://registry.npmmirror.com/@babel/helper-module-imports/-/helper-module-imports-7.0.0-beta.35.tgz#308e350e731752cdb4d0f058df1d704925c64e0a"
+  integrity sha512-vaC1KyIZSuyWb3Lj277fX0pxivyHwuDU4xZsofqgYAbkDxNieMg2vuhzP5AgMweMY7fCQUMTi+BgPqTLjkxXFg==
+  dependencies:
+    "@babel/types" "7.0.0-beta.35"
+    lodash "^4.2.0"
+
 "@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.18.6":
   version "7.18.6"
   resolved "https://registry.npmmirror.com/@babel/helper-module-imports/-/helper-module-imports-7.18.6.tgz#1e3ebdbbd08aad1437b428c50204db13c5a3ca6e"
@@ -932,6 +940,15 @@
     debug "^4.1.0"
     globals "^11.1.0"
 
+"@babel/[email protected]":
+  version "7.0.0-beta.35"
+  resolved "https://registry.npmmirror.com/@babel/types/-/types-7.0.0-beta.35.tgz#cf933a9a9a38484ca724b335b88d83726d5ab960"
+  integrity sha512-y9XT11CozHDgjWcTdxmhSj13rJVXpa5ZXwjjOiTedjaM0ba5ItqdS02t31EhPl7HtOWxsZkYCCUNrSfrOisA6w==
+  dependencies:
+    esutils "^2.0.2"
+    lodash "^4.2.0"
+    to-fast-properties "^2.0.0"
+
 "@babel/types@^7.0.0", "@babel/types@^7.18.6", "@babel/types@^7.18.9", "@babel/types@^7.19.0", "@babel/types@^7.20.0", "@babel/types@^7.20.2", "@babel/types@^7.20.5", "@babel/types@^7.20.7", "@babel/types@^7.3.0", "@babel/types@^7.4.4":
   version "7.20.7"
   resolved "https://registry.npmmirror.com/@babel/types/-/types-7.20.7.tgz#54ec75e252318423fc07fb644dc6a58a64c09b7f"
@@ -2927,6 +2944,13 @@ babel-loader@^8.3.0:
     make-dir "^3.1.0"
     schema-utils "^2.6.5"
 
+babel-plugin-component@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.npmmirror.com/babel-plugin-component/-/babel-plugin-component-1.1.1.tgz#9b023a23ff5c9aae0fd56c5a18b9cab8c4d45eea"
+  integrity sha512-WUw887kJf2GH80Ng/ZMctKZ511iamHNqPhd9uKo14yzisvV7Wt1EckIrb8oq/uCz3B3PpAW7Xfl7AkTLDYT6ag==
+  dependencies:
+    "@babel/helper-module-imports" "7.0.0-beta.35"
+
 babel-plugin-polyfill-corejs2@^0.3.3:
   version "0.3.3"
   resolved "https://registry.npmmirror.com/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.3.3.tgz#5d1bd3836d0a19e1b84bbf2d9640ccb6f951c122"
@@ -6143,7 +6167,7 @@ lodash.uniq@^4.5.0:
   resolved "https://registry.npmmirror.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
   integrity sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==
 
-lodash@^4.15.0, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.3, lodash@^4.17.5:
+lodash@^4.15.0, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.3, lodash@^4.17.5, lodash@^4.2.0:
   version "4.17.21"
   resolved "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==