如何在沒有 Vue CLI 的情況下在純 Typescript 文件中導入 CDN Vue？

Question

我有一個大項目，其中大部分已經開發完畢，我只需要為應用程序中的一些小部分實現 Vue.js。 為此，我在 HTML 中導入帶有 CDN 版本和<script> </script>標記的HTML

使用 JS 並使用導入的 Vue.js 沒有問題，但是為了提高代碼質量，並使應用程序可擴展，我需要使用 Typescript 而不是 JavaScript，這就是問題出現的時候。

注意：我不能使用 Vue CLI，因為我只需要在我的應用程序的一小部分中使用 vue。

我嘗試了一切，但我無法讓它工作。 為了簡單起見，我將把我的問題減少到最低限度的表達。 這是我擁有的所有文件：

我的文件結構是：

 -index.html
 -vue.js
 -ts/
   -generated/
   -/node_modules/
   -index_javascript.js
   -index_typescript.ts
   -package.json
   -tsconfig.json
   -webpack.config.production.js

我在 Vue 中使用index_javascript.js沒有問題，一切正常，問題是當我想在文件index_typescript.ts中使用 typescript 復制相同的功能時

index_javascript.js 是：

const myApp = new Vue({
  data() {
    return {
      msg: "Hello",
    };
  },
  methods: {
    // need annotation due to `this` in return type
    greet() {
      return this.msg + " world";
    },
  },
});

myApp.$mount("#app");

index_typescript.ts 是：

import { Vue } from "../vue";

const myApp = new Vue({
    data() {
        return {
            msg: "Hello",
        };
    },
    methods: {
        // need annotation due to `this` in return type
        greet() {
            return this.msg + " world";
        },
    },
});

myApp.$mount("#app");

index.html 是：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./vue.js" defer></script>
    <script src="./ts/index.js" defer></script>
  </head>
  <body>
    <div class="" id="app">
      <p class="">My number is: {{ greet() }}</p>
    </div>
  </body>
</html>

package.json 是：

{
  "name": "testnpm",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --config webpack.config.dev.js --hot",
    "prod": "webpack --config webpack.config.production.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/core": "^7.15.5",
    "@babel/preset-env": "^7.15.6",
    "babel-loader": "^8.2.2",
    "css-loader": "^6.3.0",
    "sass-loader": "^12.1.0",
    "style-loader": "^3.3.0",
    "terser-webpack-plugin": "^5.2.4",
    "vue-loader": "^15.9.8",
    "vue-template-compiler": "^2.6.14",
    "webpack": "^5.55.1",
    "webpack-cli": "^4.8.0",
    "webpack-dev-server": "^4.3.0"
  },
  "devDependencies": {
    "ts-loader": "^9.2.6",
    "typescript": "^4.4.3"
  }
}

tsconfig.json 是：

{
  "exclude": ["node_modules"],
  "compilerOptions": {
    /* Modules */
    "target": "ES5" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
    "moduleResolution": "node" /* Specify how TypeScript looks up a file from a given module specifier. */,

    /* JavaScript Support */
    "allowJs": true /* Allow JavaScript files to be a part of your program. Use the `checkJS` option to get errors from these files. */,
    "checkJs": true /* Enable error reporting in type-checked JavaScript files. */,
    "sourceMap": true /* Create source map files for emitted JavaScript files. */,
    "outDir": "./generated" /* Specify an output folder for all emitted files. */,
    "downlevelIteration": true,
    "noEmitOnError": true /* Emit more compliant, but verbose and less performant JavaScript for iteration. */,
    "esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables `allowSyntheticDefaultImports` for type compatibility. */,
    "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,

    /* Type Checking */
    "strict": true /* Enable all strict type-checking options. */,
    // We compulsory need to set up the type of the variable
    "noImplicitAny": true /* Enable error reporting for expressions and declarations with an implied `any` type.. */,
    "strictFunctionTypes": true /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */,
    "strictPropertyInitialization": true /* Check for class properties that are declared but not set in the constructor. */,
    "noImplicitThis": true /* Enable error reporting when `this` is given the type `any`. */,
    "alwaysStrict": true /* Ensure 'use strict' is always emitted. */,
    "noUnusedLocals": true /* Enable error reporting when a local variables aren't read. */,
    "noUnusedParameters": true /* Raise an error when a function parameter isn't read */,
    "noImplicitReturns": true /* Enable error reporting for codepaths that do not explicitly return in a function. */,
    "noFallthroughCasesInSwitch": true /* Enable error reporting for fallthrough cases in switch statements. */,
    "noImplicitOverride": true /* Ensure overriding members in derived classes are marked with an override modifier. */,

    /* Completeness */
    "skipLibCheck": true /* Skip type checking all .d.ts files. */,
    "experimentalDecorators": true,
    // Make axios work
    "types": ["node"],
    "typeRoots": ["../node_modules/@types"]
  }
}

webpack.config.production.js 是：

// Package that resolves out absolute path
const path = require("path");

module.exports = {
  entry: "./index.ts",
  output: {
    filename: "logic.js",
    path: path.resolve(__dirname, "./generated"),
  },
  resolve: {
    extensions: [".ts", ".tsx", ".js"],
    alias: {
      vue$: "vue/dist/vue.esm.js",
    },
  },
  mode: "production",
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/env"],
          },
        },
      },
      {
        test: /\.ts$/,
        loader: "ts-loader",
        exclude: /node_modules/,
        options: {
          appendTsSuffixTo: [/\.vue$/],
        },
      },
      {
        test: /\.vue$/,
        loader: "vue-loader",
        options: {
          esModule: true,
        },
      },
    ],
  },
};

我用npm run prod編譯我的代碼。 不幸的是，我可以使用打字稿，但不能在 ts 文件上導入和使用 Vue。 如何在我的 typescript 文件中的項目中使用 Vue.js 而無需創建 Vue CLI 項目？ 如何使 index_typescript.ts 工作？

Answer 1

解決方案是使用 npm 安裝 Vue，而不是 CDN 或腳本導入

Answer 2

我有同樣的問題。 你能告訴我你做了什么嗎？ 您是否剛剛安裝了 npm install vue 以及您安裝的其他軟件包是什么。 我沒有使用過 webpack。

我假設您從 index.html 中生成的文件夾下的打字稿中引用了生成的 js。 請提供任何幫助或示例代碼。 謝謝。

如何在沒有 Vue CLI 的情況下在純 Typescript 文件中導入 CDN Vue？

問題描述

1 個解決方案

解決方案1
0 2022-01-19 15:03:36

解決方案2
-1 2021-12-19 17:18:42

如何在沒有 Vue CLI 的情況下在純 Typescript 文件中導入 CDN Vue？

問題描述

1 個解決方案

解決方案1 0 2022-01-19 15:03:36

解決方案2 -1 2021-12-19 17:18:42

解決方案1
0 2022-01-19 15:03:36

解決方案2
-1 2021-12-19 17:18:42