vue+js转vue+ts

将Vue项目从JavaScript转换为TypeScript，你需要做以下几步：

1. 安装TypeScript依赖：

npm install --save-dev typescript tslint tslint-config-standard tslint-language-service tslint-config-prettier

2. 安装TypeScript支持的Vue加载器：

npm install --save-dev vue-tsc

3. 在项目根目录创建一个tsconfig.json文件，并配置如下：

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    }
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

4. 修改vue-cli生成的文件扩展名，将.js文件改为.ts文件。
5. 添加类型声明到你的Vue组件：

<script lang="ts">
import Vue from 'vue';
 
export default Vue.extend({
  // 类型声明
});
</script>

6. 将数据和方法转换为声明的类型：

<script lang="ts">
import Vue from 'vue';
 
export default Vue.extend({
  data() {
    return {
      message: 'Hello, Vue!' as string
    };
  },
  methods: {
    greet() {
      return 'Hello, TypeScript!';
    }
  }
});
</script>

7. 如果你使用的是单文件组件（.vue文件），确保<script>标签中的lang属性设置为ts。
8. 运行vue-tsc --noEmit来检查类型错误。
9. 如果需要，更新项目中的其他配置，比如Webpack配置，以支持.ts文件。
10. 最后，确保你的编辑器或IDE支持TypeScript，并正确配置以获得语法高亮和自动补全等功能。