APB+VUE Cannot find module './app.vue' or its corresponding type declarations.

1. 从ABP官网获取标准的项目,ABP获取模板的官网:https://aspnetboilerplate.com/Templates

2.这里使用.NetCore的项目,前端选择VUE.js

3.输入项目名称和验证码,点击创建按钮就可以下载模板。

4.将下载后的文件解压,里面有两个目录分别对应ABP框架的前端和后端项目,默认前后端的关联是配置好的,不需要自己再去设置。然后用IDE打开这两个项目。


5. 首先运行后端服务,我这里使用Visual Studio IDE,配置好.net core 的运行环境以及SQLServer数据等。同步数据库使用的是EF的迁移命令,这块可以在网上查询用法,这里不做介绍。

6.同步完成之后,直接运行项目,你会看到ABP自己提供的API已经通过内置的swaggerUI组件在页面上展示出来。

7.现在我们打开前端的项目,我这里使用的是Vs Code,项目的目录结构如下:

8. 然后在VS的终端运行yarn install 安装各类组件的包,安装完成后你可以在前端项目的目录结构下看到一个node_modules文件夹,说明包已经下载完成。

9. 打开main.ts 你会发现有很多错误,此时项目是不能运行的,不要慌我们一个一个解决。

10 首先定位到tsconfig.json这个文件,会提示Cannot find type definition file for 'webpack-env'.  找不到‘webpack-环境’的类型定义文件。

这个问题你可以刷新你的项目或者关闭vscode重新打开项目,你就会发现这个问题消失了,我想应该是我们运行yarn install后不能及时的去获取安装的包信息才导致的。

11 定义到main.ts文件,会提示 Cannot find module './app.vue' or its corresponding type declarations.  找不到模块“./app.vue”或其对应的类型声明。

这个问题我也查了很多前辈总结的解决方法,才找到适合的方法,解决方法不唯一仅供参考,大致步骤如下:

①在src目录下新建文件shims-vue.d.ts ,在文件中输入代码

declare module '*.vue' {

    import Vue from 'vue';

    export default Vue;

  }

此时会报错,先不用管。

②找到shims.d.ts这个文件,重命名为shims-tsx.d.ts ,修改里面的内容。

③你会发现之前报错的文件都不报错了,说明已经修改成功了,接下来就可以运行项目。

12 终端输入yarn serve,启动项目。

13 浏览器访问http://localhost:8080/ , 输入账号admin,密码123qwe登录

成功打开页面。

以上方法和经验仅供初学者参考,大神就略过略过,错误之处请指正,谢谢!

你可能感兴趣的:(APB+VUE Cannot find module './app.vue' or its corresponding type declarations.)