Question

根据documentation，我应该在.vue个文件中编写vue组件。我喜欢在vscode中使用TypeScript，因为它具有出色的导航，自动完成，自动导入和智能感知功能。类型安全也是一个优点。

当我使用.vue文件时，我在外部出口中放弃了智能感知和tyoe安全性。

使用katashins vue-template-loader我得到了所有这些。

为什么我要在TypeScript中使用.vue个文件？

Here是一个回购，我使用了katashin的精彩装载机。

[编辑] 以下是使用vetur 0.11.0，vscode 1.21.0和vue cli快速显示HelloWorld.spec.ts文件的内容。

可以看到问题第11行。它可以使用any关键字来解决，但它会失去类型安全性。

Answer 1

在VSCode中，安装Vetur Extension/Plugin以编辑.vue个文件。

例如，git clone https://github.com/Microsoft/TypeScript-Vue-Starter项目并转到：

菜单文件 - ＆gt;打开文件夹...
.vue个文件完全具有<script lang="ts">个标签

如下面的屏幕截图所示：

作为项目所需的依赖项，再次检查https://github.com/Microsoft/TypeScript-Vue-Starter。作为参考，以下是它的依赖关系：

  "dependencies": {
    "vue": "^2.5.2",
    "vue-class-component": "^6.0.0",
    "vue-property-decorator": "^6.0.0",
    "vue-router": "^3.0.1"
  },
  "devDependencies": {
    "css-loader": "^0.28.1",
    "ts-loader": "^2.0.3",
    "typescript": "^2.3.2",
    "vue-loader": "^12.0.3",
    "vue-template-compiler": "^2.5.2",
    "webpack": "^2.5.0"
  }

webpack.config.js摘录（处理.vue个文件的位置）：

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            // Since sass-loader (weirdly) has SCSS as its default parse mode, we map
            // the "scss" and "sass" values for the lang attribute to the right configs here.
            // other preprocessors should work out of the box, no loader config like this necessary.
            'scss': 'vue-style-loader!css-loader!sass-loader',
            'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax',
          }
          // other vue-loader options go here
        }
      },

为什么＆＃34; .vue＆＃34;单个文件组件首选在TypeScript中分隔文件？

1 个答案: