!3 cdn version

Merge pull request !3 from 工作专用/master
zhangmrit · Jun 18, 2019 · eead7ea · eead7ea
1 parent b7e1132
commit eead7ea
Show file tree

Hide file tree

Showing 21 changed files with 177 additions and 36 deletions.
diff --git a/babel.config.js b/babel.config.js
@@ -9,11 +9,11 @@ module.exports = {
     ]
   ], // if your use import on Demand, Use this code
 
-  plugins: [
-    [ 'import', {
-      'libraryName': 'ant-design-vue',
-      'libraryDirectory': 'es',
-      'style': true // `style: true` 会加载 less 文件
-    } ]
-  ]
+  // plugins: [
+  //   [ 'import', {
+  //     'libraryName': 'ant-design-vue',
+  //     'libraryDirectory': 'es',
+  //     'style': true // `style: true` 会加载 less 文件
+  //   } ]
+  // ]
 }
diff --git a/public/index.html b/public/index.html
@@ -6,6 +6,11 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>logo.png">
     <title>RUOYI ANT</title>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/moment.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/locale/zh-cn.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/antd.min.css"/>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/antd.min.js"></script>
     <style>#loading-mask{position:fixed;left:0;top:0;height:100%;width:100%;background:#fff;user-select:none;z-index:9999;overflow:hidden}.loading-wrapper{position:absolute;top:50%;left:50%;transform:translate(-50%,-100%)}.loading-dot{animation:antRotate 1.2s infinite linear;transform:rotate(45deg);position:relative;display:inline-block;font-size:64px;width:64px;height:64px;box-sizing:border-box}.loading-dot i{width:22px;height:22px;position:absolute;display:block;background-color:#1890ff;border-radius:100%;transform:scale(.75);transform-origin:50% 50%;opacity:.3;animation:antSpinMove 1s infinite linear alternate}.loading-dot i:nth-child(1){top:0;left:0}.loading-dot i:nth-child(2){top:0;right:0;-webkit-animation-delay:.4s;animation-delay:.4s}.loading-dot i:nth-child(3){right:0;bottom:0;-webkit-animation-delay:.8s;animation-delay:.8s}.loading-dot i:nth-child(4){bottom:0;left:0;-webkit-animation-delay:1.2s;animation-delay:1.2s}@keyframes antRotate{to{-webkit-transform:rotate(405deg);transform:rotate(405deg)}}@-webkit-keyframes antRotate{to{-webkit-transform:rotate(405deg);transform:rotate(405deg)}}@keyframes antSpinMove{to{opacity:1}}@-webkit-keyframes antSpinMove{to{opacity:1}}</style>
   </head>
   <body>

diff --git a/src/App.vue b/src/App.vue
@@ -7,9 +7,12 @@
 </template>
 
 <script>
-import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'
+// import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'
+import { locales } from 'ant-design-vue'
 import { AppDeviceEnquire } from '@/utils/mixin'
 
+const zhCN = locales.zh_CN
+
 export default {
   mixins: [AppDeviceEnquire],
   data () {

diff --git a/src/components/AvatarList/Item.vue b/src/components/AvatarList/Item.vue
@@ -7,8 +7,7 @@
 </template>
 
 <script>
-import Avatar from 'ant-design-vue/es/avatar'
-import Tooltip from 'ant-design-vue/es/tooltip'
+import { Avatar, Tooltip } from 'ant-design-vue'
 
 export default {
   name: 'AvatarItem',

diff --git a/src/components/AvatarList/List.vue b/src/components/AvatarList/List.vue
@@ -16,7 +16,7 @@
 -->
 
 <script>
-import Avatar from 'ant-design-vue/es/avatar'
+import { Avatar } from 'ant-design-vue'
 import AvatarItem from './Item'
 import { filterEmpty } from '@/components/_util/util'
 

diff --git a/src/components/DescriptionList/DescriptionList.vue b/src/components/DescriptionList/DescriptionList.vue
@@ -8,7 +8,7 @@
 </template>
 
 <script>
-import { Col } from 'ant-design-vue/es/grid/'
+import { Col } from 'ant-design-vue'
 
 const Item = {
   name: 'DetailListItem',

diff --git a/src/components/Ellipsis/Ellipsis.vue b/src/components/Ellipsis/Ellipsis.vue
@@ -1,5 +1,5 @@
 <script>
-import Tooltip from 'ant-design-vue/es/tooltip'
+import { Tooltip } from 'ant-design-vue'
 import { cutStrByFullLength, getStrFullLength } from '@/components/_util/util'
 /*
     const isSupportLineClamp = document.body.style.webkitLineClamp !== undefined;

diff --git a/src/components/Menu/menu.js b/src/components/Menu/menu.js
@@ -1,5 +1,4 @@
-import Menu from 'ant-design-vue/es/menu'
-import Icon from 'ant-design-vue/es/icon'
+import { Menu, Icon } from 'ant-design-vue'
 
 const { Item, SubMenu } = Menu
 

diff --git a/src/components/Menu/menu.render.js b/src/components/Menu/menu.render.js
@@ -1,5 +1,5 @@
-import Menu from 'ant-design-vue/es/menu'
-import Icon from 'ant-design-vue/es/icon'
+import { Menu } from 'ant-design-vue'
+import { Icon } from 'ant-design-vue'
 
 const { Item, SubMenu } = Menu
 

diff --git a/src/components/NumberInfo/NumberInfo.vue b/src/components/NumberInfo/NumberInfo.vue
@@ -14,7 +14,7 @@
 </template>
 
 <script>
-import Icon from 'ant-design-vue/es/icon'
+import { Icon } from 'ant-design-vue'
 
 export default {
   name: 'NumberInfo',

diff --git a/src/components/SettingDrawer/settingConfig.js b/src/components/SettingDrawer/settingConfig.js
@@ -1,4 +1,4 @@
-import { message } from 'ant-design-vue/es'
+import { Message as message } from 'ant-design-vue'
 // import defaultSettings from '../defaultSettings';
 import themeColor from './themeColor.js'
 

diff --git a/src/components/Table/index.js b/src/components/Table/index.js
@@ -1,4 +1,4 @@
-import T from 'ant-design-vue/es/table/Table'
+import { Table as T } from 'ant-design-vue'
 import get from 'lodash.get'
 
 export default {

diff --git a/src/permission.js b/src/permission.js
@@ -4,7 +4,7 @@ import store from './store'
 
 import NProgress from 'nprogress' // progress bar
 import 'nprogress/nprogress.css' // progress bar style
-import notification from 'ant-design-vue/es/notification'
+import { Notification as notification } from 'ant-design-vue'
 import { ACCESS_TOKEN } from '@/store/mutation-types'
 
 NProgress.configure({ showSpinner: false }) // NProgress Configuration

diff --git a/src/utils/filter.js b/src/utils/filter.js
@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import moment from 'moment'
-import 'moment/locale/zh-cn'
+// 已从cdn加载
+// import 'moment/locale/zh-cn'
 moment.locale('zh-cn')
 
 Vue.filter('NumberFormat', function (value) {

diff --git a/src/utils/request.js b/src/utils/request.js
@@ -4,7 +4,7 @@ import store from '@/store'
 import {
   VueAxios
 } from './axios'
-import notification from 'ant-design-vue/es/notification'
+import { Notification as notification } from 'ant-design-vue'
 import {
   ACCESS_TOKEN
 } from '@/store/mutation-types'

diff --git a/src/views/account/settings/Custom.vue b/src/views/account/settings/Custom.vue
@@ -37,9 +37,7 @@
 
 <script>
 import { updateTheme, colorList } from '@/components/SettingDrawer/settingConfig'
-import ASwitch from 'ant-design-vue/es/switch'
-import AList from 'ant-design-vue/es/list'
-import AListItem from 'ant-design-vue/es/list/Item'
+import { Switch as ASwitch, List as AList, ListItem as AListItem } from 'ant-design-vue'
 import { mixin } from '@/utils/mixin'
 
 const Meta = AListItem.Meta

diff --git a/src/views/list/QueryList.vue b/src/views/list/QueryList.vue
@@ -6,8 +6,8 @@
 
 <script>
 
-import ATextarea from 'ant-design-vue/es/input/TextArea'
-import AInput from 'ant-design-vue/es/input/Input'
+import { Textarea as ATextarea } from 'ant-design-vue'
+import { Input as AInput } from 'ant-design-vue'
 // 动态切换组件
 import List from '@/views/list/table/List'
 import Edit from '@/views/list/table/Edit'

diff --git a/src/views/system/DeptList.vue b/src/views/system/DeptList.vue
@@ -59,7 +59,7 @@
 </template>
 
 <script>
-import T from 'ant-design-vue/es/table/Table'
+import { Table as T } from 'ant-design-vue'
 import { getDeptList, delDept } from '@/api/system'
 import DeptModal from './modules/DeptModal.vue'
 import { treeData } from '@/utils/treeutil'

diff --git a/src/views/system/PermissionList.vue b/src/views/system/PermissionList.vue
@@ -59,7 +59,7 @@
 </template>
 
 <script>
-import T from 'ant-design-vue/es/table/Table'
+import { Table as T } from 'ant-design-vue'
 import { getPermissions, delPerm } from '@/api/system'
 import PermissionModal from './modules/PermissionModal.vue'
 import { treeData } from '@/utils/treeutil'

diff --git a/src/zmr.vue.config.js b/src/zmr.vue.config.js
@@ -0,0 +1,130 @@
+const path = require('path')
+const webpack = require('webpack')
+const ThemeColorReplacer = require('webpack-theme-color-replacer')
+const generate = require('@ant-design/colors/lib/generate').default
+
+function resolve (dir) {
+  return path.join(__dirname, dir)
+}
+
+// vue.config.js
+module.exports = {
+  configureWebpack: {
+    externals: {
+      'axios': 'axios',
+      'vue-router': 'VueRouter',
+      'vuex': 'Vuex',
+      'vue': 'Vue',
+      'moment': 'moment',
+      'ant-design-vue': 'antd'
+    },
+    plugins: [
+      // Ignore all locale files of moment.js
+      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
+      new webpack.IgnorePlugin(/moment\\/),
+      // 生成仅包含颜色的替换样式（主题色等）
+      // TODO 需要增加根据环境不开启主题需求
+      new ThemeColorReplacer({
+        fileName: 'css/theme-colors.css', // TODO 需要处理的暗坑
+        matchColors: getAntdSerials('#1890ff'), // 主色系列
+        // 改变样式选择器，解决样式覆盖问题
+        changeSelector (selector) {
+          switch (selector) {
+            case '.ant-calendar-today .ant-calendar-date':
+              return ':not(.ant-calendar-selected-date)' + selector
+            case '.ant-btn:focus,.ant-btn:hover':
+              return '.ant-btn:focus:not(.ant-btn-primary),.ant-btn:hover:not(.ant-btn-primary)'
+            case '.ant-btn.active,.ant-btn:active':
+              return '.ant-btn.active:not(.ant-btn-primary),.ant-btn:active:not(.ant-btn-primary)'
+            case '.ant-menu-horizontal>.ant-menu-item-active,.ant-menu-horizontal>.ant-menu-item-open,.ant-menu-horizontal>.ant-menu-item-selected,.ant-menu-horizontal>.ant-menu-item:hover,.ant-menu-horizontal>.ant-menu-submenu-active,.ant-menu-horizontal>.ant-menu-submenu-open,.ant-menu-horizontal>.ant-menu-submenu-selected,.ant-menu-horizontal>.ant-menu-submenu:hover':
+            case '.ant-menu-horizontal > .ant-menu-item-active,.ant-menu-horizontal > .ant-menu-item-open,.ant-menu-horizontal > .ant-menu-item-selected,.ant-menu-horizontal > .ant-menu-item:hover,.ant-menu-horizontal > .ant-menu-submenu-active,.ant-menu-horizontal > .ant-menu-submenu-open,.ant-menu-horizontal > .ant-menu-submenu-selected,.ant-menu-horizontal > .ant-menu-submenu:hover':
+              return '.ant-menu-horizontal > .ant-menu-item-active,.ant-menu-horizontal > .ant-menu-item-open,.ant-menu-horizontal > .ant-menu-item-selected,.ant-menu-horizontal > .ant-menu-item:hover,.ant-menu-horizontal > .ant-menu-submenu-active,.ant-menu-horizontal > .ant-menu-submenu-open,.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu-selected,.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu:hover'
+            default :
+              return selector
+          }
+        }
+      })
+    ]
+  },
+
+  chainWebpack: (config) => {
+    config.resolve.alias
+      .set('@$', resolve('src'))
+
+    const svgRule = config.module.rule('svg')
+    svgRule.uses.clear()
+    svgRule
+      .oneOf('inline')
+      .resourceQuery(/inline/)
+      .use('vue-svg-icon-loader')
+      .loader('vue-svg-icon-loader')
+      .end()
+      .end()
+      .oneOf('external')
+      .use('file-loader')
+      .loader('file-loader')
+      .options({
+        name: 'assets/[name].[hash:8].[ext]'
+      })
+    /* svgRule.oneOf('inline')
+      .resourceQuery(/inline/)
+      .use('vue-svg-loader')
+      .loader('vue-svg-loader')
+      .end()
+      .end()
+      .oneOf('external')
+      .use('file-loader')
+      .loader('file-loader')
+      .options({
+        name: 'assets/[name].[hash:8].[ext]'
+      })
+    */
+  },
+
+  css: {
+    loaderOptions: {
+      less: {
+        modifyVars: {
+          /* less 变量覆盖，用于自定义 ant design 主题 */
+
+          /*
+          'primary-color': '#F5222D',
+          'link-color': '#F5222D',
+          'border-radius-base': '4px',
+          */
+        },
+        javascriptEnabled: true
+      }
+    }
+  },
+
+  devServer: {
+    // development server port 8000
+    port: 8000,
+    proxy: {
+      '/api': {
+        // target: 'https://mock.ihx.me/mock/5baf3052f7da7e07e04a5116/antd-pro',
+        target: 'https://www.easy-mock.com/mock/5ce2743c2dda2d3b1365fb1b/ruoyi-cloud',
+        // target: 'http://myzuul.com:9527',
+        pathRewrite: { '^/api': '' },
+        ws: false,
+        changeOrigin: true
+      }
+    }
+  },
+
+  // disable source map in production
+  productionSourceMap: false,
+  lintOnSave: undefined,
+  // babel-loader no-ignore node_modules/*
+  transpileDependencies: []
+}
+
+function getAntdSerials (color) {
+  // 淡化（即less的tint）
+  const lightens = new Array(9).fill().map((t, i) => {
+    return ThemeColorReplacer.varyColor.lighten(color, i / 10)
+  })
+  const colorPalettes = generate(color)
+  return lightens.concat(colorPalettes)
+}
diff --git a/vue.config.js b/vue.config.js
@@ -10,16 +10,24 @@ function resolve (dir) {
 // vue.config.js
 module.exports = {
   configureWebpack: {
+    externals: {
+      // key表示包名(import foo from 'xx' 里的xx)
+      // value表示window下的全局变量名(库暴露出来的namespace,可查lib对应的webpack配置里的library字段)
+      'vue': 'Vue',
+      'moment': 'moment',
+      'ant-design-vue': 'antd'
+    },
     plugins: [
       // Ignore all locale files of moment.js
       new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
+      new webpack.IgnorePlugin(/moment\//),
       // 生成仅包含颜色的替换样式（主题色等）
       // TODO 需要增加根据环境不开启主题需求
       new ThemeColorReplacer({
         fileName: 'css/theme-colors.css', // TODO 需要处理的暗坑
         matchColors: getAntdSerials('#1890ff'), // 主色系列
         // 改变样式选择器，解决样式覆盖问题
-        changeSelector (selector) {
+        changeSelector(selector) {
           switch (selector) {
             case '.ant-calendar-today .ant-calendar-date':
               return ':not(.ant-calendar-selected-date)' + selector
@@ -30,17 +38,16 @@ module.exports = {
             case '.ant-menu-horizontal>.ant-menu-item-active,.ant-menu-horizontal>.ant-menu-item-open,.ant-menu-horizontal>.ant-menu-item-selected,.ant-menu-horizontal>.ant-menu-item:hover,.ant-menu-horizontal>.ant-menu-submenu-active,.ant-menu-horizontal>.ant-menu-submenu-open,.ant-menu-horizontal>.ant-menu-submenu-selected,.ant-menu-horizontal>.ant-menu-submenu:hover':
             case '.ant-menu-horizontal > .ant-menu-item-active,.ant-menu-horizontal > .ant-menu-item-open,.ant-menu-horizontal > .ant-menu-item-selected,.ant-menu-horizontal > .ant-menu-item:hover,.ant-menu-horizontal > .ant-menu-submenu-active,.ant-menu-horizontal > .ant-menu-submenu-open,.ant-menu-horizontal > .ant-menu-submenu-selected,.ant-menu-horizontal > .ant-menu-submenu:hover':
               return '.ant-menu-horizontal > .ant-menu-item-active,.ant-menu-horizontal > .ant-menu-item-open,.ant-menu-horizontal > .ant-menu-item-selected,.ant-menu-horizontal > .ant-menu-item:hover,.ant-menu-horizontal > .ant-menu-submenu-active,.ant-menu-horizontal > .ant-menu-submenu-open,.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu-selected,.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu:hover'
-            default :
+            default:
               return selector
           }
         }
       })
     ]
   },
 
-  chainWebpack: (config) => {
-    config.resolve.alias
-      .set('@$', resolve('src'))
+  chainWebpack: config => {
+    config.resolve.alias.set('@$', resolve('src'))
 
     const svgRule = config.module.rule('svg')
     svgRule.uses.clear()
@@ -77,7 +84,6 @@ module.exports = {
       less: {
         modifyVars: {
           /* less 变量覆盖，用于自定义 ant design 主题 */
-
           /*
           'primary-color': '#F5222D',
           'link-color': '#F5222D',