无法在 Vue.js 应用程序的 main.ts 中导入打字稿模块

Question

I am building a simple vue.js app using typescript,I am trying to do some routing and bring the route file to main.ts but when I run the app I get the following error:

These relative modules were not found:

* ./plugins/vuetify in ./src/main.ts
* ./router/routerIndex in ./src/main.ts
* ./store/index in ./src/main.ts

---

main.ts is in src/main.ts

indexRouter.ts is in src/router/indexRoute.ts

main.ts

import Vue from 'vue';
import vuetify from "./plugins/vuetify";
import App from "./App.vue"
import store from "./store/index";
import VueRouter from 'vue-router'
import router from "./router/routerIndex"


Vue.config.productionTip = false

Vue.use(VueRouter);

new Vue({
  store,
  vuetify,
  render: h => h(App),
  router
}).$mount("#app");

routerIndex.ts

import Vue from "vue";
import Router from　"vue-router";
import Home from "../components/pages/Home.vue";


Vue.use(Router);

const routes = [
    {
        name: "home",
        path: "/",
        component: Home
    }
]

const router = new Router({ mode: "history", routes });

export default router;

tsconfig.json

{
  "compilerOptions": {
  "target": "ES2019",                          
  "module": "commonjs",
  "outDir": "./dist",
  "strict": true,
  "esModuleInterop": true,
  "sourceMap": true,
  "experimentalDecorators": true,
  "forceConsistentCasingInFileNames": true
 },
"include": [
      "src/**/*",
      "src/**/*.ts",
      "src/**/*.tsx",
      "src/**/*.vue",
      "tests/**/*.ts",
      "tests/**/*.tsx"
    ],

}

This project was not installed with Vue@Cli, it was installed with npm by the person who created the project.

I am new to both Vue and Typescript so I might be screwing up something.

Thanks in advance.

Answer 1

You can install @vue/cli, then open the vue ui , import the your project in the vue ui and then using the ui again download typescript plugin. Tell me if anything is unclear:)