cool-squad#1 optimize build size && logo,font-size responsive

jingyue0828 · Apr 21, 2020 · 7dbefe7 · 7dbefe7
1 parent c61b93d
commit 7dbefe7
Show file tree

Hide file tree

Showing 11 changed files with 73 additions and 65 deletions.
diff --git a/babel.config.js b/babel.config.js
@@ -1,5 +1,12 @@
 module.exports = {
-  presets: [
-    '@vue/cli-plugin-babel/preset',
+  presets: ['@vue/cli-plugin-babel/preset'],
+  plugins: [
+    [
+      'component',
+      {
+        libraryName: 'element-ui',
+        styleLibraryName: 'theme-chalk',
+      },
+    ],
   ],
 };
diff --git a/package.json b/package.json
@@ -30,6 +30,7 @@
     "@vue/eslint-config-airbnb": "^5.0.2",
     "@vue/test-utils": "1.0.0-beta.31",
     "babel-eslint": "^10.0.3",
+    "babel-plugin-component": "^1.1.1",
     "chai": "^4.1.2",
     "eslint": "^6.7.2",
     "eslint-plugin-import": "^2.20.1",

diff --git a/public/index.html b/public/index.html
@@ -1,15 +1,20 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
+    <script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
     <title><%= htmlWebpackPlugin.options.title %></title>
   </head>
   <body>
     <noscript>
-      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+      <strong
+        >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
+        properly without JavaScript enabled. Please enable it to
+        continue.</strong
+      >
     </noscript>
     <div id="app"></div>
     <!-- built files will be auto injected -->

diff --git a/src/assets/styles/views/dashboard.scss b/src/assets/styles/views/dashboard.scss
@@ -218,6 +218,26 @@
   }
 }
 
+@media only screen and (max-width: 1024px) {
+  .top-title {
+    font-size: 30px;
+  }
+
+  .sub-top-title,
+  .arch-title,
+  .storage-desc,
+  .query-desc,
+  .storage-desc,
+  .query-container,
+  .footer {
+    font-size: 16px;
+  }
+
+  .logo {
+    @include set-size(130px);
+  }
+}
+
 @media only screen and (max-width: 768px) {
   .title,
   .example-title,
@@ -250,7 +270,7 @@
   }
 
   .logo {
-    @include set-size(1rem, 0.8rem);
+    @include set-size(2rem, 1.6rem);
   }
 
   .top-container {
@@ -268,7 +288,7 @@
     }
 
     .arch-title {
-      padding: 0.6rem 0.5rem !important;
+      padding: 0.6rem 0.5rem;
     }
   }
 

diff --git a/src/libs/api.js b/src/libs/api.js
diff --git a/src/libs/config.js b/src/libs/config.js
diff --git a/src/main.js b/src/main.js
@@ -1,19 +1,15 @@
 import Vue from 'vue';
-import ElementUI from 'element-ui';
 import App from './App.vue';
 import router from './router';
-import store from './store';
-import axios from './libs/api';
+import element from './plugins/elementImport';
 import 'amfe-flexible';
 import './assets/icons';
 import '@/assets/styles/vendors-extensions/_element.scss';
 
 Vue.config.productionTip = false;
-Vue.use(ElementUI);
-Vue.prototype.$axios = axios;
+Vue.use(element);
 
 new Vue({
   router,
-  store,
   render: (h) => h(App),
 }).$mount('#app');
diff --git a/src/plugins/elementImport.js b/src/plugins/elementImport.js
@@ -0,0 +1,8 @@
+import { Row, Col, Container } from 'element-ui';
+import 'element-ui/lib/theme-chalk/index.css';
+
+export default (Vue) => {
+  Vue.component(Row.name, Row);
+  Vue.component(Col.name, Col);
+  Vue.component(Container.name, Container);
+};
diff --git a/src/store/index.js b/src/store/index.js
diff --git a/src/views/dashBoard.vue b/src/views/dashBoard.vue
@@ -24,30 +24,30 @@
     <el-container class="box">
       <el-row class="title">Architecture</el-row>
       <el-container class="arch-container">
-        <el-row :gutter="20" class="arch-wrapper">
+        <el-row :gutter="20"
+                class="arch-wrapper">
           <el-col :xs="24"
                   :sm="12"
                   class="arch-img">
             <svg-icon icon-class="p2"
                       class="p2" />
           </el-col>
           <el-col :xs="24"
-                  :sm="12">
-            <el-col class="arch-title">
-              Similar to conventional databases, Cool organizes data records
-              in tables. Each table is maintained by a user-defined schema,
-              consisting of multiple columns called fields or dimensions. A
-              dimension file recording the hierarchy of several dimensions is
-              also given by the users in order to support cube queries. Each
-              dimension of the table is bound to a field type describing the
-              format of the values. The primitive types include varied-length
-              integer, float, string, boolean, time and event. The first four are
-              similar to underlying database types while the remaining types
-              are specifically defined by Cool. Time deals with the timestamps
-              of the records and event is a particular string representing user
-              actions or behaviors. A dimension tree is constructed in system
-              setup guided by the dimension file and persisted in storage.
-            </el-col>
+                  :sm="12"
+                  class="arch-title">
+            Similar to conventional databases, Cool organizes data records
+            in tables. Each table is maintained by a user-defined schema,
+            consisting of multiple columns called fields or dimensions. A
+            dimension file recording the hierarchy of several dimensions is
+            also given by the users in order to support cube queries. Each
+            dimension of the table is bound to a field type describing the
+            format of the values. The primitive types include varied-length
+            integer, float, string, boolean, time and event. The first four are
+            similar to underlying database types while the remaining types
+            are specifically defined by Cool. Time deals with the timestamps
+            of the records and event is a particular string representing user
+            actions or behaviors. A dimension tree is constructed in system
+            setup guided by the dimension file and persisted in storage.
           </el-col>
         </el-row>
       </el-container>

diff --git a/vue.config.js b/vue.config.js
@@ -8,6 +8,7 @@ module.exports = {
   // publicPath: './',
   publicPath: process.env.NODE_ENV === 'production' ? './' : './',
   outputDir: process.env.NODE_ENV === 'production' ? 'doc' : 'dist',
+
   // outputDir: 'dist',
   devServer: {
     open: true, // Automatically pop up the browser page
@@ -25,6 +26,9 @@ module.exports = {
   },
 
   configureWebpack: {
+    externals: {
+      vue: 'Vue',
+    },
     resolve: {
       alias: {
         '@': resolve('src'),