如何将 Typescript Vue 项目导入 Javascript Vue

Question

我想在我的 Javascript Vue 3 项目中使用 this 日历组件。为此，我在项目中创建了一个名为 ProCalendar.vue 的组件，并复制粘贴示例中显示的 App.vue 代码。我在 main.js 文件中添加了依赖项。

完成此设置后，当我尝试执行以下操作时，它会出现以下错误：

npm run dev

我用谷歌搜索了一下，发现一个可能的问题可能是我没有在我的项目中安装打字稿，所以我运行了

INFO  Starting development server...


 ERROR  Failed to compile with 3 errors                                                                                  19:54:20

[eslint]
C:\Users\chuan\Documents\GitHub\PraePlan\services\frontend\src\main_components\home_components\ProCalendar.vue
  3:19  error  Parsing error: Unexpected token, expected "," (3:19)

✖ 1 problem (1 error, 0 warnings)


You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.
 error  in ./src/main_components/home_components/ProCalendar.vue?vue&type=script&setup=true&lang=ts

Module parse failed: Unexpected token (3:19)
File was processed with these loaders:
 * ./node_modules/vue-loader/dist/index.js
You may need an additional loader to handle the result of these loaders.
| import { defineComponent as _defineComponent } from 'vue'
| import "vue-pro-calendar/style";
> import { ref, type Ref } from "vue";
| import type { Configs, Appointment } from "vue-pro-calendar";
|

 error  in ./src/main_components/home_components/ProCalendar.vue?vue&type=template&id=d18ce454&ts=true        

Module parse failed: Unexpected token (3:27)
File was processed with these loaders:
 * ./node_modules/vue-loader/dist/templateLoader.js
 * ./node_modules/vue-loader/dist/index.js
You may need an additional loader to handle the result of these loaders.
| import { createCommentVNode as _createCommentVNode, resolveComponent as _resolveComponent, createVNode as _createVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
|
> export function render(_ctx: any,_cache: any,$props: any,$setup: any,$data: any,$options: any) {
|   const _component_pro_calendar = _resolveComponent("pro-calendar", true)!
|

ERROR in ./src/main_components/home_components/ProCalendar.vue?vue&type=script&setup=true&lang=ts (./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/main_components/home_components/ProCalendar.vue?vue&type=script&setup=true&lang=ts) 3:19      
Module parse failed: Unexpected token (3:19)
File was processed with these loaders:
 * ./node_modules/vue-loader/dist/index.js
You may need an additional loader to handle the result of these loaders.
| import { defineComponent as _defineComponent } from 'vue'
| import "vue-pro-calendar/style";
> import { ref, type Ref } from "vue";
| import type { Configs, Appointment } from "vue-pro-calendar";
|
 @ ./src/main_components/home_components/ProCalendar.vue?vue&type=script&setup=true&lang=ts 1:0-147 1:0-147 1:148-284 1:148-284  
 @ ./src/main_components/home_components/ProCalendar.vue 2:0-73 3:0-68 3:0-68 6:49-55
 @ ./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/main_components/Home.vue?vue&type=script&lang=js 2:0-60 33:4-15
 @ ./src/main_components/Home.vue?vue&type=script&lang=js 1:0-196 1:0-196 1:197-382 1:197-382
 @ ./src/main_components/Home.vue 2:0-55 3:0-50 3:0-50 6:49-55
 @ ./src/router/index.js 2:0-42 27:13-17
 @ ./src/main.js 3:0-30 6:30-36

ERROR in ./src/main_components/home_components/ProCalendar.vue?vue&type=template&id=d18ce454&ts=true (./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/main_components/home_components/ProCalendar.vue?vue&type=template&id=d18ce454&ts=true) 3:27
Module parse failed: Unexpected token (3:27)
File was processed with these loaders:
 * ./node_modules/vue-loader/dist/templateLoader.js
 * ./node_modules/vue-loader/dist/index.js
You may need an additional loader to handle the result of these loaders.
| import { createCommentVNode as _createCommentVNode, resolveComponent as _resolveComponent, createVNode as _createVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
|
> export function render(_ctx: any,_cache: any,$props: any,$setup: any,$data: any,$options: any) {
|   const _component_pro_calendar = _resolveComponent("pro-calendar", true)!
|
 @ ./src/main_components/home_components/ProCalendar.vue?vue&type=template&id=d18ce454&ts=true 1:0-216 1:0-216
 @ ./src/main_components/home_components/ProCalendar.vue 1:0-80 6:68-74 16:79-18:3 17:29-35 16:2-18:4
 @ ./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/main_components/Home.vue?vue&type=script&lang=js 2:0-60 33:4-15
 @ ./src/main_components/Home.vue?vue&type=script&lang=js 1:0-196 1:0-196 1:197-382 1:197-382
 @ ./src/main_components/Home.vue 2:0-55 3:0-50 3:0-50 6:49-55
 @ ./src/router/index.js 2:0-42 27:13-17
 @ ./src/main.js 3:0-30 6:30-36

ERROR in [eslint]
C:\Users\chuan\Documents\GitHub\PraePlan\services\frontend\src\main_components\home_components\ProCalendar.vue
  3:19  error  Parsing error: Unexpected token, expected "," (3:19)

✖ 1 problem (1 error, 0 warnings)


webpack compiled with 3 errors

和

npm install typescript

并且没有做任何改变。这是package.json：

npm install ts-loader

我的 ProCalendar.vue 文件（从 github 项目复制粘贴）：

{
  "name": "praeplan",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "vue-cli-service serve",
    "start": "npm run dev",
    "serve": "serve -s dist -p 8080",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
    "test:e2e": "vue-cli-service test:e2e",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "axios": "^1.4.0",
    "core-js": "^3.8.3",
    "vue": "^3.2.13",
    "vue-calendar-3": "^2.2.6",
    "vue-pro-calendar": "^1.1.6",
    "vue-router": "^4.0.3",
    "vuex": "^4.0.0",
    "vuex-persistedstate": "^4.1.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-e2e-cypress": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-plugin-unit-jest": "~5.0.0",
    "@vue/cli-plugin-vuex": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "@vue/test-utils": "^2.0.0-0",
    "@vue/vue3-jest": "^27.0.0-alpha.1",
    "babel-jest": "^27.0.6",
    "cypress": "^9.7.0",
    "eslint": "^7.32.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-vue": "^8.0.3",
    "jest": "^27.0.5",
    "lint-staged": "^11.1.2",
    "prettier": "^2.4.1",
    "ts-loader": "^9.4.4",
    "typescript": "^5.1.6",
    "vue-tsc": "^1.8.8",
    "webpack-cli": "^5.1.4"
  },
  "gitHooks": {
    "pre-commit": "lint-staged"
  }
}

还有我的

<script setup lang="ts">
import "vue-pro-calendar/style";
import { ref, type Ref } from "vue";
import type { Configs, Appointment } from "vue-pro-calendar";

const cfg = ref<Configs>({
  viewEvent: undefined,
  reportEvent: {
    icon: true,
    text: "",
  },
  searchPlaceholder: "",
  eventName: "",
  closeText: "",
  nativeDatepicker: true,
});

const evts: Ref<Appointment[]> = ref([
  {
    date: "2022-11-19T14:00:00.000Z",
    comment: "",
    id: "cl32rbkjk1700101o53e3e3uhn",
    keywords: "Projet BAMBA",
    name: "MONTCHO Kévin",
  },
  //...
]);

</script>

<template>
<!-- all props are optional -->
<pro-calendar
  :events="evts"
  :loading="false"
  :config="cfg"
  view="month"
  date="2022-11-10T00:00:00.000Z"
  @calendarClosed="void 0"
  @fetchEvents="void 0"
/>
</template>

文件：

main.js

感谢您的帮助！ ：P

Answer 1

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import { ProCalendar } from "vue-pro-calendar" 

createApp(App).use(store).use(router).use(ProCalendar).mount("#app");

我在 

this StackBlitz

中测试并确认了该库作为 JS 库工作