vue文件引入ts文件

要在Vue文件中引入一个TypeScript文件，您需要按照以下步骤操作：

1. 安装TypeScript
在项目根目录中运行以下命令：

   npm install typescript --save-dev

2. 创建一个TypeScript文件
在项目中创建一个名为`example.ts`的文件，该文件包含您要导出的变量和函数。

   export const exampleVar = "Hello World";
   export function exampleFunc() {
     console.log("This is an example TypeScript function");
   }

3. 在Vue文件中引入TypeScript文件
在Vue文件中使用`import`语句来引入`example.ts`文件并使用其导出的变量和函数。

   <template>
     <div>
       {{ exampleVar }}
     </div>
   </template>

   <script lang="ts">
   import { exampleVar, exampleFunc } from './example.ts';
   export default {
     name: 'MyComponent',
     methods: {
       handleClick() {
         exampleFunc();
       }
     },
     computed: {
       exampleVar() {
         return exampleVar;
       }
     }
   }
   </script>

4. 在Vue项目中启用TypeScript
在`tsconfig.json`文件中设置`"allowJs": true`选项，以允许Vue文件和JavaScript文件与TypeScript文件一起编译。

   {
     "compilerOptions": {
       "allowJs": true,
       "target": "es5",
       "module": "esnext",
       "moduleResolution": "node",
       "esModuleInterop": true,
       "experimentalDecorators": true,
       "sourceMap": true
     },
     "include": ["src/**/*"],
     "exclude": ["node_modules"]
   }

重启您的项目以使更改生效。