feat: add cli example

examples/.browserslistrc

+> 1%
+last 2 versions
+not ie <= 10

examples/.env.analyz

+NODE_ENV=production
+IS_ANALYZ=true

examples/.eslintrc.js

+module.exports = {
+  root: true,
+  env: {
+    node: true
+  },
+  'extends': [
+    'plugin:vue/strongly-recommended',
+    '@vue/standard'
+  ],
+  rules: {
+    // 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    // 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    'no-console': 'off',
+    'no-debugger': 'off',
+    'generator-star-spacing': 'off',
+    'no-mixed-operators': 0,
+    'vue/max-attributes-per-line': [
+      2,
+      {
+        'singleline': 5,
+        'multiline': {
+          'max': 1,
+          'allowFirstLine': false
+        }
+      }
+    ],
+    'vue/attribute-hyphenation': 0,
+    'vue/html-self-closing': 0,
+    'vue/component-name-in-template-casing': 0,
+    'vue/html-closing-bracket-spacing': 0,
+    'vue/singleline-html-element-content-newline': 0,
+    'vue/no-unused-components': 0,
+    'vue/multiline-html-element-content-newline': 0,
+    'vue/no-use-v-if-with-v-for': 0,
+    'vue/html-closing-bracket-newline': 0,
+    'vue/no-parsing-error': 0,
+    'no-tabs': 0,
+    'quotes': [
+      2,
+      'single',
+      {
+        'avoidEscape': true,
+        'allowTemplateLiterals': true
+      }
+    ],
+    'semi': [
+      2,
+      'never',
+      {
+        'beforeStatementContinuationChars': 'never'
+      }
+    ],
+    'no-delete-var': 2,
+    'prefer-const': [
+      2,
+      {
+        'ignoreReadBeforeAssign': false
+      }
+    ]
+  },
+  parserOptions: {
+    parser: 'babel-eslint'
+  },
+  overrides: [
+    {
+      files: [
+        '**/__tests__/*.{j,t}s?(x)',
+        '**/tests/unit/**/*.spec.{j,t}s?(x)'
+      ],
+      env: {
+        jest: true
+      }
+    }
+  ]
+}

examples/babel.config.js

+const plugins = []
+
+// lazy load ant-design-vue
+// if your use import on Demand, Use this code
+plugins.push(['import', {
+  'libraryName': 'ant-design-vue',
+  'libraryDirectory': 'es',
+  'style': true // `style: true` 会加载 less 文件
+}])
+
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset',
+    [
+      '@babel/preset-env',
+      {
+        'useBuiltIns': 'entry',
+        'corejs': 3
+      }
+    ]
+  ],
+  plugins
+}

examples/jest.config.js

+module.exports = {
+  preset: '@vue/cli-plugin-unit-jest'
+}

examples/package.json

+{
+  "name": "ant-design-pro-example",
+  "version": "0.1.1",
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "test:unit": "vue-cli-service test:unit",
+    "lint": "vue-cli-service lint",
+    "analyz": "vue-cli-service build --mode analyz"
+  },
+  "main": "./src/index.js",
+  "author": "vueComponent",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/vueComponent/pro-layout"
+  },
+  "license":"MIT",
+  "dependencies": {
+    "ant-design-vue": "^1.4.4",
+    "core-js": "^3.1.2",
+    "umi-request": "^1.2.8",
+    "vue": "^2.6.10",
+    "vue-container-query": "^0.1.0",
+    "vue-i18n": "^8.15.0",
+    "vue-ls": "^3.2.1",
+    "vue-router": "^3.0.6",
+    "vue-svg-component-runtime": "^1.0.1",
+    "vuex": "^3.0.1"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "^4.0.0",
+    "@vue/cli-plugin-eslint": "^4.0.0",
+    "@vue/cli-plugin-router": "^4.0.0",
+    "@vue/cli-plugin-unit-jest": "^4.0.0",
+    "@vue/cli-plugin-vuex": "^4.0.0",
+    "@vue/cli-service": "^4.0.0",
+    "@vue/eslint-config-standard": "^4.0.0",
+    "@vue/test-utils": "1.0.0-beta.29",
+    "babel-eslint": "^10.0.1",
+    "babel-plugin-import": "^1.12.2",
+    "eslint": "^5.16.0",
+    "eslint-plugin-html": "^6.0.0",
+    "eslint-plugin-vue": "^5.0.0",
+    "less": "^3.0.4",
+    "less-loader": "^5.0.0",
+    "vue-svg-icon-loader": "^2.1.1",
+    "vue-template-compiler": "^2.6.10",
+    "webpack-bundle-analyzer": "^3.6.0",
+    "webpack-theme-color-replacer": "^1.3.2"
+  }
+}

examples/postcss.config.js

+module.exports = {
+  plugins: {
+    autoprefixer: {}
+  }
+}

examples/src/components/SelectLang/index.jsx

 import { Icon, Menu, Dropdown } from 'ant-design-vue'
 import './index.less'
-import i18nMixin from '@example/store/i18n-mixin'
+import i18nMixin from '@/store/i18n-mixin'
 
 const locales = ['zh-CN', 'zh-TW', 'en-US', 'pt-BR']
 const languageLabels = {

examples/src/core/library.js

@@ -6,7 +6,7 @@ import Storage from 'vue-ls'
 // lazyload antd
 import './antd/lazyload'
 import { storageOptions } from '@config/defaultSettings'
-import { DocumentTitle } from '@/'
+import { DocumentTitle } from '@ant-design-vue/pro-layout'
 
 Vue.use(DocumentTitle)
 Vue.use(Storage, storageOptions)

examples/src/layouts/BasicLayout.jsx

@@ -2,9 +2,9 @@ import './BasicLayout.less'
 
 import { Avatar, Dropdown, Menu } from 'ant-design-vue'
 import { asyncRouterMap } from '../config/router.config.js'
-import { i18nRender } from '@example/locales'
-import ProLayout from '@/'
-import SelectLang from '@example/components/SelectLang'
+import { i18nRender } from '../locales'
+import ProLayout from '@ant-design-vue/pro-layout'
+import SelectLang from '../components/SelectLang'
 import LogoSvg from '../assets/logo.svg?inline'
 import defaultSettings from '@config/defaultSettings'
 

examples/src/locales/index.js

@@ -3,8 +3,6 @@ import VueI18n from 'vue-i18n'
 
 // default lang
 import enUS from './lang/en-US'
-// eslint-disable-next-line
-import { request } from '@/utils/request'
 
 Vue.use(VueI18n)
 

examples/src/views/TestPage.vue

@@ -18,7 +18,7 @@
 </template>
 
 <script>
-import { loadLanguageAsync } from '@example/locales'
+import { loadLanguageAsync } from '@/locales'
 
 export default {
   methods: {

examples/vue.config.js

+const path = require('path')
+const { IgnorePlugin } = require('webpack')
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
+const dynamicThemePlugin = require('./config/dynamicTheme.js')
+
+const isProd = process.env.NODE_ENV === 'production'
+const isAnalyz = process.env.IS_ANALYZ === 'true'
+
+function resolve (dir) {
+  return path.join(__dirname, dir)
+}
+
+const assetsCDN = {
+  externals: {
+    'vue': 'Vue',
+    'vue-router': 'VueRouter',
+    'vuex': 'Vuex',
+    'axios': 'axios'
+  },
+  assets: {
+    css: [],
+    // https://unpkg.com/browse/vue@2.6.10/
+    js: [
+      '//cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min.js',
+      '//cdn.jsdelivr.net/npm/vue-router@3.1.3/dist/vue-router.min.js',
+      '//cdn.jsdelivr.net/npm/vuex@3.1.1/dist/vuex.min.js',
+      '//cdn.jsdelivr.net/npm/axios@0.19.0/dist/axios.min.js'
+    ]
+  }
+}
+
+// vue.config
+const defaultConfig = {
+  configureWebpack: {
+    plugins: [
+      // Ignore all locale files of moment.js
+      new IgnorePlugin(/^\.\/locale$/, /moment$/)
+    ],
+    resolve: {
+      alias: {
+        '@ant-design/icons/lib/dist$': resolve('./src/core/antd/icons.js')
+      }
+    },
+    externals: isProd ? assetsCDN.externals : {}
+  },
+  chainWebpack: (config) => {
+    config.resolve.alias
+      .set('@', resolve('./src'))
+      .set('@config', resolve('./config'))
+      .set('@ant-design-vue/pro-layout', resolve('../es'))
+
+    // if `production` env require on cdn assets
+    isProd && config.plugin('html').tap(args => {
+      args[0].cdn = assetsCDN.assets
+      return args
+    })
+
+    // if `IS_ANALYZ` env is TRUE on report bundle info
+    isAnalyz && config.plugin('webpack-report').use(BundleAnalyzerPlugin, [
+      {
+        analyzerMode: 'static'
+      }
+    ])
+
+    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]'
+      })
+  },
+  css: {
+    loaderOptions: {
+      less: {
+        modifyVars: {
+          // less vars，customize ant design theme
+
+          // 'primary-color': '#F5222D',
+          // 'link-color': '#F5222D',
+          // 'border-radius-base': '4px'
+        },
+        // DO NOT REMOVE THIS LINE
+        javascriptEnabled: true
+      }
+    }
+  },
+  devServer: {
+    // development server port 8000
+    port: 8000
+    // If you want to turn on the proxy, please remove the mockjs /src/main.jsL11
+    // proxy: {
+    //   '/api': {
+    //     target: 'https://mock.ihx.me/mock/5baf3052f7da7e07e04a5116/antd-pro',
+    //     ws: false,
+    //     changeOrigin: true
+    //   }
+    // }
+  },
+
+  // disable source map in production
+  productionSourceMap: false,
+  lintOnSave: undefined,
+  // babel-loader no-ignore node_modules/*
+  transpileDependencies: []
+}
+
+if (!isProd) {
+  defaultConfig.configureWebpack.plugins.push(dynamicThemePlugin())
+}
+
+module.exports = defaultConfig

package.json

@@ -27,6 +27,9 @@
     ],
     "peerDependencies": {
         "vue": ">=2.5.0",
+        "ant-design-vue": "^1.4.6",
+        "umi-request": "^1.2.11",
+        "vue-container-query": "^0.1.0",
         "vue-template-compiler": ">=2.5.0"
     },
     "devDependencies": {