初始化仓库

babel.config.js

@@ -1,5 +1,14 @@
 module.exports = {
   presets: [
     '@vue/cli-plugin-babel/preset'
+  ],
+  "plugins": [
+    [
+      "component",
+      {
+        "libraryName": "element-ui",
+        "styleLibraryName": "theme-chalk"
+      }
+    ]
   ]
 }

npminstall-debug.log

@@ -0,0 +1,210 @@
+{
+  root: 'F:\\Project\\VUE_project\\demo02',
+  registry: 'https://registry.npmmirror.com',
+  pkgs: [
+    {
+      name: 'sass-loader',
+      version: '7',
+      type: 'range',
+      alias: undefined,
+      arg: [Result]
+    },
+    {
+      name: 'node-sass',
+      version: '4',
+      type: 'range',
+      alias: undefined,
+      arg: [Result]
+    }
+  ],
+  production: false,
+  cacheStrict: false,
+  cacheDir: 'C:\\Users\\李龙龙\\.npminstall_tarball',
+  env: {
+    npm_config_registry: 'https://registry.npmmirror.com',
+    npm_config_argv: '{"remain":[],"cooked":["--fix-bug-versions","--china","--userconfig=C:\\\\Users\\\\李龙龙\\\\.cnpmrc","--disturl=https://cdn.npmmirror.com/binaries/node","--registry=https://registry.npmmirror.com","sass-loader@7","node-sass@4","-D"],"original":["--fix-bug-versions","--china","--userconfig=C:\\\\Users\\\\李龙龙\\\\.cnpmrc","--disturl=https://cdn.npmmirror.com/binaries/node","--registry=https://registry.npmmirror.com","sass-loader@7","node-sass@4","-D"]}',
+    npm_config_user_agent: 'npminstall/7.12.0 npm/? node/v20.9.0 win32 x64',
+    npm_config_cache: 'C:\\Users\\李龙龙\\.npminstall_tarball',
+    NODE: 'F:\\Environment\\node-v20.9.0-win-x64\\node.exe',
+    npm_node_execpath: 'F:\\Environment\\node-v20.9.0-win-x64\\node.exe',
+    npm_execpath: 'F:\\Environment\\node-v20.9.0-win-x64\\node_modules\\cnpm\\node_modules\\npminstall\\bin\\install.js',
+    npm_config_userconfig: 'C:\\Users\\李龙龙\\.cnpmrc',
+    npm_config_disturl: 'https://cdn.npmmirror.com/binaries/node',
+    npm_config_r: 'https://registry.npmmirror.com',
+    COREPACK_NPM_REGISTRY: 'https://registry.npmmirror.com',
+    NODEJS_ORG_MIRROR: 'https://cdn.npmmirror.com/binaries/node',
+    NVM_NODEJS_ORG_MIRROR: 'https://cdn.npmmirror.com/binaries/node',
+    PHANTOMJS_CDNURL: 'https://cdn.npmmirror.com/binaries/phantomjs',
+    CHROMEDRIVER_CDNURL: 'https://cdn.npmmirror.com/binaries/chromedriver',
+    OPERADRIVER_CDNURL: 'https://cdn.npmmirror.com/binaries/operadriver',
+    CYPRESS_DOWNLOAD_PATH_TEMPLATE: 'https://cdn.npmmirror.com/binaries/cypress/${version}/${platform}-${arch}/cypress.zip',
+    ELECTRON_MIRROR: 'https://cdn.npmmirror.com/binaries/electron/',
+    ELECTRON_BUILDER_BINARIES_MIRROR: 'https://cdn.npmmirror.com/binaries/electron-builder-binaries/',
+    SASS_BINARY_SITE: 'https://cdn.npmmirror.com/binaries/node-sass',
+    SWC_BINARY_SITE: 'https://cdn.npmmirror.com/binaries/node-swc',
+    NWJS_URLBASE: 'https://cdn.npmmirror.com/binaries/nwjs/v',
+    PUPPETEER_DOWNLOAD_HOST: 'https://cdn.npmmirror.com/binaries/chrome-for-testing',
+    PUPPETEER_DOWNLOAD_BASE_URL: 'https://cdn.npmmirror.com/binaries/chrome-for-testing',
+    PLAYWRIGHT_DOWNLOAD_HOST: 'https://cdn.npmmirror.com/binaries/playwright',
+    SENTRYCLI_CDNURL: 'https://cdn.npmmirror.com/binaries/sentry-cli',
+    SAUCECTL_INSTALL_BINARY_MIRROR: 'https://cdn.npmmirror.com/binaries/saucectl',
+    RE2_DOWNLOAD_MIRROR: 'https://cdn.npmmirror.com/binaries/node-re2',
+    RE2_DOWNLOAD_SKIP_PATH: 'true',
+    PRISMA_ENGINES_MIRROR: 'https://cdn.npmmirror.com/binaries/prisma',
+    npm_config_better_sqlite3_binary_host: 'https://cdn.npmmirror.com/binaries/better-sqlite3',
+    npm_config_keytar_binary_host: 'https://cdn.npmmirror.com/binaries/keytar',
+    npm_config_sharp_binary_host: 'https://cdn.npmmirror.com/binaries/sharp',
+    npm_config_sharp_libvips_binary_host: 'https://cdn.npmmirror.com/binaries/sharp-libvips',
+    npm_config_robotjs_binary_host: 'https://cdn.npmmirror.com/binaries/robotjs',
+    npm_rootpath: 'F:\\Project\\VUE_project\\demo02',
+    INIT_CWD: 'F:\\Project\\VUE_project\\demo02'
+  },
+  binaryMirrors: {
+    ENVS: {
+      COREPACK_NPM_REGISTRY: 'https://registry.npmmirror.com',
+      NODEJS_ORG_MIRROR: 'https://cdn.npmmirror.com/binaries/node',
+      NVM_NODEJS_ORG_MIRROR: 'https://cdn.npmmirror.com/binaries/node',
+      PHANTOMJS_CDNURL: 'https://cdn.npmmirror.com/binaries/phantomjs',
+      CHROMEDRIVER_CDNURL: 'https://cdn.npmmirror.com/binaries/chromedriver',
+      OPERADRIVER_CDNURL: 'https://cdn.npmmirror.com/binaries/operadriver',
+      CYPRESS_DOWNLOAD_PATH_TEMPLATE: 'https://cdn.npmmirror.com/binaries/cypress/${version}/${platform}-${arch}/cypress.zip',
+      ELECTRON_MIRROR: 'https://cdn.npmmirror.com/binaries/electron/',
+      ELECTRON_BUILDER_BINARIES_MIRROR: 'https://cdn.npmmirror.com/binaries/electron-builder-binaries/',
+      SASS_BINARY_SITE: 'https://cdn.npmmirror.com/binaries/node-sass',
+      SWC_BINARY_SITE: 'https://cdn.npmmirror.com/binaries/node-swc',
+      NWJS_URLBASE: 'https://cdn.npmmirror.com/binaries/nwjs/v',
+      PUPPETEER_DOWNLOAD_HOST: 'https://cdn.npmmirror.com/binaries/chrome-for-testing',
+      PUPPETEER_DOWNLOAD_BASE_URL: 'https://cdn.npmmirror.com/binaries/chrome-for-testing',
+      PLAYWRIGHT_DOWNLOAD_HOST: 'https://cdn.npmmirror.com/binaries/playwright',
+      SENTRYCLI_CDNURL: 'https://cdn.npmmirror.com/binaries/sentry-cli',
+      SAUCECTL_INSTALL_BINARY_MIRROR: 'https://cdn.npmmirror.com/binaries/saucectl',
+      RE2_DOWNLOAD_MIRROR: 'https://cdn.npmmirror.com/binaries/node-re2',
+      RE2_DOWNLOAD_SKIP_PATH: 'true',
+      PRISMA_ENGINES_MIRROR: 'https://cdn.npmmirror.com/binaries/prisma',
+      npm_config_better_sqlite3_binary_host: 'https://cdn.npmmirror.com/binaries/better-sqlite3',
+      npm_config_keytar_binary_host: 'https://cdn.npmmirror.com/binaries/keytar',
+      npm_config_sharp_binary_host: 'https://cdn.npmmirror.com/binaries/sharp',
+      npm_config_sharp_libvips_binary_host: 'https://cdn.npmmirror.com/binaries/sharp-libvips',
+      npm_config_robotjs_binary_host: 'https://cdn.npmmirror.com/binaries/robotjs'
+    },
+    '@ali/s2': { host: 'https://cdn.npmmirror.com/binaries/looksgood-s2' },
+    sharp: { replaceHostFiles: [Array], replaceHostMap: [Object] },
+    '@tensorflow/tfjs-node': {
+      replaceHostFiles: [Array],
+      replaceHostRegExpMap: [Object],
+      replaceHostMap: [Object]
+    },
+    cypress: {
+      host: 'https://cdn.npmmirror.com/binaries/cypress',
+      newPlatforms: [Object]
+    },
+    'utf-8-validate': {
+      host: 'https://cdn.npmmirror.com/binaries/utf-8-validate/v{version}'
+    },
+    xprofiler: {
+      remote_path: './xprofiler/v{version}/',
+      host: 'https://cdn.npmmirror.com/binaries'
+    },
+    leveldown: { host: 'https://cdn.npmmirror.com/binaries/leveldown/v{version}' },
+    couchbase: { host: 'https://cdn.npmmirror.com/binaries/couchbase/v{version}' },
+    gl: { host: 'https://cdn.npmmirror.com/binaries/gl/v{version}' },
+    sqlite3: {
+      host: 'https://cdn.npmmirror.com/binaries/sqlite3',
+      remote_path: 'v{version}'
+    },
+    '@journeyapps/sqlcipher': { host: 'https://cdn.npmmirror.com/binaries' },
+    grpc: {
+      host: 'https://cdn.npmmirror.com/binaries',
+      remote_path: '{name}/v{version}'
+    },
+    'grpc-tools': { host: 'https://cdn.npmmirror.com/binaries' },
+    wrtc: {
+      host: 'https://cdn.npmmirror.com/binaries',
+      remote_path: '{name}/v{version}'
+    },
+    fsevents: { host: 'https://cdn.npmmirror.com/binaries/fsevents' },
+    nodejieba: { host: 'https://cdn.npmmirror.com/binaries/nodejieba' },
+    canvas: { host: 'https://cdn.npmmirror.com/binaries/canvas' },
+    'skia-canvas': { host: 'https://cdn.npmmirror.com/binaries/skia-canvas' },
+    'flow-bin': {
+      replaceHost: 'https://github.com/facebook/flow/releases/download/v',
+      host: 'https://cdn.npmmirror.com/binaries/flow/v'
+    },
+    'jpegtran-bin': {
+      replaceHost: [Array],
+      host: 'https://cdn.npmmirror.com/binaries/jpegtran-bin'
+    },
+    'cwebp-bin': {
+      replaceHost: [Array],
+      host: 'https://cdn.npmmirror.com/binaries/cwebp-bin'
+    },
+    'zopflipng-bin': {
+      replaceHost: [Array],
+      host: 'https://cdn.npmmirror.com/binaries/zopflipng-bin'
+    },
+    'optipng-bin': {
+      replaceHost: [Array],
+      host: 'https://cdn.npmmirror.com/binaries/optipng-bin'
+    },
+    mozjpeg: {
+      replaceHost: [Array],
+      host: 'https://cdn.npmmirror.com/binaries/mozjpeg-bin'
+    },
+    gifsicle: {
+      replaceHost: [Array],
+      host: 'https://cdn.npmmirror.com/binaries/gifsicle-bin'
+    },
+    'pngquant-bin': {
+      replaceHost: [Array],
+      host: 'https://cdn.npmmirror.com/binaries/pngquant-bin',
+      replaceHostMap: [Object]
+    },
+    'pngcrush-bin': {
+      replaceHost: [Array],
+      host: 'https://cdn.npmmirror.com/binaries/pngcrush-bin'
+    },
+    'jpeg-recompress-bin': {
+      replaceHost: [Array],
+      host: 'https://cdn.npmmirror.com/binaries/jpeg-recompress-bin'
+    },
+    'advpng-bin': {
+      replaceHost: [Array],
+      host: 'https://cdn.npmmirror.com/binaries/advpng-bin'
+    },
+    'pngout-bin': {
+      replaceHost: [Array],
+      host: 'https://cdn.npmmirror.com/binaries/pngout-bin'
+    },
+    'jpegoptim-bin': {
+      replaceHost: [Array],
+      host: 'https://cdn.npmmirror.com/binaries/jpegoptim-bin'
+    },
+    argon2: { host: 'https://cdn.npmmirror.com/binaries/argon2' },
+    'ali-zeromq': { host: 'https://cdn.npmmirror.com/binaries/ali-zeromq' },
+    'ali-usb_ctl': { host: 'https://cdn.npmmirror.com/binaries/ali-usb_ctl' },
+    'gdal-async': { host: 'https://cdn.npmmirror.com/binaries/node-gdal-async' },
+    'libpg-query': { host: 'https://cdn.npmmirror.com/binaries' }
+  },
+  forbiddenLicenses: null,
+  flatten: false,
+  proxy: undefined,
+  prune: false,
+  disableFallbackStore: false,
+  workspacesMap: Map(0) {},
+  enableWorkspace: false,
+  workspaceRoot: 'F:\\Project\\VUE_project\\demo02',
+  isWorkspaceRoot: true,
+  isWorkspacePackage: false,
+  offline: false,
+  strictSSL: true,
+  ignoreScripts: false,
+  foregroundScripts: false,
+  ignoreOptionalDependencies: false,
+  detail: false,
+  forceLinkLatest: false,
+  trace: false,
+  engineStrict: false,
+  registryOnly: false,
+  client: false,
+  autoFixVersion: [Function: autoFixVersion]
+}

package.json

@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "core-js": "^3.6.5",
+    "element-ui": "^2.15.8",
     "vue": "^2.6.11"
   },
   "devDependencies": {
@@ -16,6 +17,7 @@
     "@vue/cli-plugin-eslint": "~4.5.15",
     "@vue/cli-service": "~4.5.15",
     "babel-eslint": "^10.1.0",
+    "babel-plugin-component": "^1.1.1",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",
     "vue-template-compiler": "^2.6.11"

plugins/element.js

@@ -0,0 +1,4 @@
+import Vue from 'vue'
+import { Button, Tag } from 'element-ui'
+Vue.use(Button)
+Vue.use(Tag)

src/App.vue

@@ -1,28 +1,24 @@
 <template>
   <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
+    <router-view></router-view>
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
   </div>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
+//import HelloWorld from './components/Home.vue'
 
 export default {
-  name: 'App',
+
-  components: {
-    HelloWorld
-  }
 }
 </script>
 
-<style>
+<style lang="scss">
+@import "./assets/css/reset.css";
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
-  margin-top: 60px;
 }
 </style>

src/assets/css/reset.css

@@ -0,0 +1,54 @@
+
+html{height:100%;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;-webkit-font-smoothing:antialiased;}
+
+body{margin:0;padding:0;background-color:#fff;min-height:100%;height:auto !important;height:100%;text-align:center;color:#404040;font:12px/1.5 Helvetica,arial;}
+
+h1,h2,h3,h4,h5,h6,p,figure,form{margin:0;}
+
+table{border-collapse:collapse; border-spacing:0;}
+
+img{border:0;vertical-align:middle;-ms-interpolation-mode: bicubic;}
+
+a{text-decoration:none;color:#29B4F0;}
+
+a:focus {outline: thin dotted;}
+
+a:hover{color:#017CB9;text-decoration:underline;}
+
+/* hn */
+
+h1{font-size:16px;line-height:36px;}
+
+h2{font-size:14px;line-height:30px;}
+
+h3{line-height:24px;}
+
+h3,h4,h5,h6{font-size:12px;}
+
+/* ul ol dl */
+
+ul,li,ol{margin: 0;padding:0;list-style: none outside none;}
+
+ul.has-style li,ol li{margin-left:25px;}
+
+ul.has-style li{list-style:disc;}
+
+ol li{list-style:decimal;}
+
+ul.inline-style li{float:left;display:inline;}
+
+dl{margin-bottom: 18px;}
+
+dt{font-weight: bold;}
+
+dd{margin:0 0 0 9px;padding:0;}
+
+svg:not(:root) { overflow: hidden;}
+
+/* clearfix */
+
+.clearfix:before, .clearfix:after {content:""; display:table;}
+
+.clearfix:after{clear:both;overflow:hidden;}
+
+.clearfix{zoom:1;}

src/components/HelloWorld.vue

@@ -1,58 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

src/components/Home.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="hello">
+    <h1>Hello</h1>
+    <el-row>
+      <el-button>默认按钮</el-button>
+      <el-button type="primary">主要按钮</el-button>
+      <el-button type="success">成功按钮</el-button>
+      <el-button type="info">信息按钮</el-button>
+      <el-button type="warning">警告按钮</el-button>
+      <el-button type="danger">危险按钮</el-button>
+    </el-row>
+
+    <el-row>
+      <el-button plain>朴素按钮</el-button>
+      <el-button type="primary" plain>主要按钮</el-button>
+      <el-button type="success" plain>成功按钮</el-button>
+      <el-button type="info" plain>信息按钮</el-button>
+      <el-button type="warning" plain>警告按钮</el-button>
+      <el-button type="danger" plain>危险按钮</el-button>
+    </el-row>
+
+    <el-row>
+      <el-button round>圆角按钮</el-button>
+      <el-button type="primary" round>主要按钮</el-button>
+      <el-button type="success" round>成功按钮</el-button>
+      <el-button type="info" round>信息按钮</el-button>
+      <el-button type="warning" round>警告按钮</el-button>
+      <el-button type="danger" round>危险按钮</el-button>
+    </el-row>
+
+    <el-row>
+      <el-button icon="el-icon-search" circle></el-button>
+      <el-button type="primary" icon="el-icon-edit" circle></el-button>
+      <el-button type="success" icon="el-icon-check" circle></el-button>
+      <el-button type="info" icon="el-icon-message" circle></el-button>
+      <el-button type="warning" icon="el-icon-star-off" circle></el-button>
+      <el-button type="danger" icon="el-icon-delete" circle></el-button>
+    </el-row>
+
+    <el-tag> 哈哈哈</el-tag>
+    <i class="fa fa-users"></i>
+    <i class="fa fa-user"></i>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HelloWorld',
+  props: {
+
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="less">
+  .hello {
+    background: yellow;
+    .el-button {
+      color: aqua;
+    }
+  }
+
+</style>

src/components/Login.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="login">
+    <el-card class="box-card">
+      <div slot="header" class="clearfix">
+        <span>后台管理系统</span>
+      </div>
+      <el-form label-width="80px" :model="form" ref="form">
+        <el-form-item label="用户名" prop="username"
+        :rules="[
+              {required: true, message:'请输入用户名', trigger: 'blur'},
+              {min: 4, max: 10, message: '长度在4-10位数之间', trigger: 'blur'}
+              ]">
+          <el-input v-model="form.username"></el-input>
+        </el-form-item>
+        <el-form-item label="密码" prop="password"
+         :rules="[
+              {required: true, message:'请输入密码', trigger: 'blur'},
+              {min: 6, max: 12, message: '密码长度在6-12位数之间', trigger: 'blur'}
+              ]">
+          <el-input type='password' v-model="form.password" ></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="login('form')">登录</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+  </div>
+
+
+</template>
+<script>
+export default {
+  data() {
+    return {
+      form: {
+        username: '',
+        password: ''
+      }
+    };
+  },
+  methods: {
+    login(form) {
+      this.$refs[form].validate((valid) => {
+        if(valid) {
+          console.log(this.form)
+        } else {
+          console.error(this.form)
+        }
+      })
+    }
+  }
+}
+
+</script>
+<style lang="scss">
+.login {
+  width: 100%;
+  height: 100%;
+  position: absolute;;
+  background: #017CB9;
+  .box-card {
+    width: 450px;
+    margin: 200px auto;
+    .el-card__header {
+      font-size: 34px;
+    }
+    .el-button {
+      width: 100%;
+    }
+
+  }
+
+}
+
+
+</style>

src/main.js

@@ -1,8 +1,24 @@
 import Vue from 'vue'
 import App from './App.vue'
+import axios from 'axios'
+import router from './router'
+import 'font-awesome/css/font-awesome.min.css'
 
+/*//模块化按需引入
+import '../plugins/element.js'*/
+
+//全局引入
+
+import ElementUI from 'element-ui'
+import 'element-ui/lib/theme-chalk/index.css'
+
+Vue.use(ElementUI)
+
+
+Vue.prototype.axios = axios //  挂载到原型，可以在全局使用
 Vue.config.productionTip = false
 
 new Vue({
+  router,
   render: h => h(App),
 }).$mount('#app')

src/router/index.js

@@ -0,0 +1,26 @@
+import Vue from 'vue'
+import Router from 'vue-router'
+// import Home from '../components/Home.vue'
+
+Vue.use(Router)
+export default new Router({
+    routes: [
+        {
+            path: '/',
+            redirect: '/login',
+            component: () => import('@/components/Login')
+        },
+        {
+            path: '/login',
+            name: 'Login',
+            component: () => import('@/components/Login')  // 异步引入
+        },
+        {
+            path: '/home',
+            //component: Home
+            //component: () => import('@/components/Home')    //ES 中的 import引入
+            component: resolve => require(['@/components/Home'], resolve)  // 异步引入
+        }
+    ],
+    mode: 'history'
+})

vue.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+    devServer: {
+        open: true
+    }
+
+}