*.vue文件,Visual Studio 2017和TypeScript

Question

是否可以在Visual Studio 2017中编辑vuejs的*.vue组件文件,并对HTML,TypeScript和SCSS提供突出显示和智能感知支持？

目前,我将不同的部分分成不同的文件:

<!-- my-component.vue opened in HTML editor -->
<template>
    <div> text </div>
</template>
<script src="./path/to/my-component.ts"></script>
<style src="./path/to/my-component.scss"></style>

Answer 1

过了一段时间,我实际上已经在Visual Studio 2017中设置了它.(除了scss之外的所有东西)

这是我做的:

1. 安装 vue-cli

2. 安装VuePack- https://marketplace.visualstudio.com/items?itemName=MadsKristensen.VuejsPack-18329

3. 在命令提示符下运行此行: dotnet new --install Microsoft.AspNetCore.SpaTemplates::*

4. 在命令提示符下,转到要创建应用程序的目录并运行以下命令:

   dotnet new vue

   npm install

   这将为您创建项目.您现在可以在Visual Studio 2017中打开项目/添加项目.

   但是编译器无法识别.vue文件.我不得不再添加一个手动步骤:

5. 在应用程序的根目录中有一个文件webpack.config.js,查找module => rules,您需要添加一个新规则:

   { test: /\.vue$/, include: /ClientApp/, loader: 'vue-loader', options: { loaders: { js: 'awesome-typescript-loader?silent=true' } } },

6. 在此之后,我遇到了一些TypeScript编译错误 - 应用程序只会被卡住Loading...- 修复此问题需要编辑tsconfig.json- 添加以下内容:

   "awesomeTypescriptLoaderOptions": { "useWebpackText": true, "useCache": true, "useTranspileModule": true }

在此之后,我没有问题地运行项目.

其他有趣的资源可以帮助您:

http://www.dotnetcurry.com/aspnet/1383/modern-web-dev-aspnet-core-webpack-vuejs

https://github.com/MarkPieszak/aspnetcore-Vue-starter

https://herringtondarkholme.github.io/2016/10/03/vue2-ts2/

Answer 2

目前答案是否定的。HTML 编辑器知道一些可以托管的语言，例如 CSS、JavaScript 和 Razor (ASP.NET)。在这些情况下，编辑器会做一些奇特的事情来将文本部分映射到每种语言服务。但是，目前 TypeScript 和 SCSS 不支持这一点，据我所知，这两个团队都不在积压工作中。

请使用 VS 反馈工具请求此功能。由于 vuejs 支持这一点，因此它具有一定的权重，并且可能会被考虑到未来的功能规划中。客户报告有时比我的报告更重要。

（完全披露：我在拥有 VS 中的 HTML 和 SCSS 编辑器的团队工作。我们不拥有 TypeScript，但我们与团队合作处理此类事情。）