前端开发——运行vue-ant-design例子

最新推荐文章于 2025-07-11 17:34:59 发布

原创最新推荐文章于 2025-07-11 17:34:59 发布 · 5.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue

前端开发专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何在Vue CLI环境中运行vue-ant-design项目，包括从官网获取项目文件、在CMD中进入项目目录、安装依赖，以及解决因Vue版本不匹配导致的编译错误。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue-ant-design官网

https://vue.ant.design/docs/vue/getting-started-cn/

在vue-cil中运行该项目

step1

下载项目文件

step2

打开cmd，cd到该项目的根目录，输入

npm install

step3

在本地安装好项目依赖，然后打开vue ui

运行vue-ant-design例子的时候，出现如下错误

Total task duration: 366.62s    
$ webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
 91% additional chunk assets processing ERROR  Failed to compile with 1 errors09:20:18  


 error  in ./src/App.vue

Module build failed: Error: 

Vue packages version mismatch:

- vue@2.5.17 (D:\BaiduYunDownload\blockchain\vue-antd-template\node_modules\vue\dist\vue.runtime.common.js)
- vue-template-compiler@2.6.10 (D:\BaiduYunDownload\blockchain\vue-antd-template\node_modules\vue-template-compiler\package.json)

This may cause things to work incorrectly. Make sure to use the same version for both.
If you are using vue-loader@>=10.0, simply update vue-template-compiler.
If you are using vue-loader@<10.0 or vueify, re-installing vue-loader/vueify should bump vue-template-compiler to the latest.

    at Object.<anonymous> (D:\BaiduYunDownload\blockchain\vue-antd-template\node_modules\vue-template-compiler\index.js:10:9)
    at Module._compile (internal/modules/cjs/loader.js:701:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
    at Module.load (internal/modules/cjs/loader.js:600:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
    at Function.Module._load (internal/modules/cjs/loader.js:531:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at Object.<anonymous> (D:\BaiduYunDownload\blockchain\vue-antd-template\node_modules\vue-loader\lib\parser.js:1:80)
    at Module._compile (internal/modules/cjs/loader.js:701:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
    at Module.load (internal/modules/cjs/loader.js:600:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
    at Function.Module._load (internal/modules/cjs/loader.js:531:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)

意思是我的vue是2.5.17，但是这个项目的编译器的版本是2.6.10

step4

解决办法

先删除文件夹node_modules文件夹下的vue-template-compiler文件

>npm install vue-template-compiler@2.5.17 --save-dev

再次在vue-cil中点击运行或者运行 npm run start  即可

step5

再次报错

✘  http://eslint.org/docs/rules/quotes                Strings must use singlequote    
  src\App.vue:13:20
  import moment from "moment";
                      ^

  ✘  http://eslint.org/docs/rules/object-curly-spacing  A space is required after '{'   
  src\App.vue:14:8
  import {version} from "ant-design-vue";
          ^

  ✘  http://eslint.org/docs/rules/object-curly-spacing  A space is required before '}'  
  src\App.vue:14:16
  import {version} from "ant-design-vue";
                  ^

  ✘  http://eslint.org/docs/rules/quotes                Strings must use singlequote    
  src\App.vue:14:23
  import {version} from "ant-design-vue";
                         ^

  ✘  http://eslint.org/docs/rules/quotes                Strings must use singlequote    
  src\App.vue:17:9
    name: "App",
           ^

  ✘  http://eslint.org/docs/rules/comma-dangle          Missing trailing comma          
  src\App.vue:21:14
        version
                ^

  ✘  http://eslint.org/docs/rules/comma-dangle          Missing trailing comma          
  src\App.vue:23:4
    }
      ^


✘ 7 problems (7 errors, 0 warnings)

根据提示修改错误，再次运行

运行成功后