*.vue 文件，Visual Studio 2017 & TypeScript
*.vue files, Visual Studio 2017 & TypeScript
是否可以在 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>
目前答案是否定的。 HTML 编辑器知道一些可以托管的语言，例如 CSS、JavaScript 和 Razor (ASP.NET)。在这些情况下，编辑器会做一些奇特的事情来将文本部分映射到每种语言服务。但是，TypeScript 和 SCSS 目前不支持它，据我所知，它不在任何一个团队的积压工作中。
请使用 VS 反馈工具提出请求。由于 vuejs 支持这一点，因此它具有一定的重量，并且可能会在未来的功能规划中得到考虑。客户报告有时比我的更有分量。
（完全披露：我在拥有 VS 中的 HTML 和 SCSS 编辑器的团队工作。我们不拥有 TypeScript，但我们与团队合作做这样的事情.)
我使用 django 模板扩展在 vs code 中打开它。它似乎有效，我知道它是一种不同的语言，但它适用于 linting 和自动格式化
我遇到了同样的困难，我最终使用 Visual Studio 代码编辑器 Vue 文件并安装了这个插件，名为 Vetur: https://github.com/vuejs/vetur
您可以通过在 Visual Studio 代码的侧边菜单中搜索扩展来安装它。
Visual Studio 有一个名为 VuePack 的 Vue 插件，它将为位于此处的单页 vue 文件“*.vue”提供更好的开发体验：https://marketplace.visualstudio.com/items?itemName=MadsKristensen.VuejsPack-18329
一段时间后，我实际上在 Visual Studio 2017 年就完成了所有设置。（除 scss 之外的所有内容）
这是我所做的：
安装vue-cli
安装VuePack - https://marketplace.visualstudio.com/items?itemName=MadsKristensen.VuejsPack-18329
运行 命令提示符中的这一行：
dotnet new --install Microsoft.AspNetCore.SpaTemplates::*
在命令提示符下，转到您要创建应用程序的目录，然后运行这样：
dotnet new vue
npm install
这将为您创建项目。您现在可以在 Visual studio 2017 中打开 project/add 项目。
但是编译器无法识别 .vue 个文件。我不得不再添加一个手动步骤：
在应用程序的根目录下有一个文件webpack.config.js，查找module => rules，你需要添加一个新规则：
{
test: /\.vue$/,
include: /ClientApp/,
loader: 'vue-loader',
options: {
loaders: {
js: 'awesome-typescript-loader?silent=true'
}
}
},
在此之后我 运行 遇到了一些 TypeScript 编译错误 - 应用程序会卡在 Loading... - 要解决这个问题你需要编辑 tsconfig.json -添加以下内容：
"awesomeTypescriptLoaderOptions": {
"useWebpackText": true,
"useCache": true,
"useTranspileModule": true
}
在此之后我 运行 项目没有问题。
其他可以帮助您的有趣资源：
http://www.dotnetcurry.com/aspnet/1383/modern-web-dev-aspnet-core-webpack-vuejs
Microsoft 现在声称 .vue 文件中的 Typescript 受 Visual Studio 2017 支持：https://developercommunity.visualstudio.com/idea/351510/support-vue-file-intellisense-in-visual-studio.html
我确实试过了，（在重新加载一些文件后）html 代码和 Typescript 的语法突出显示以及智能感知工作正常。仍在尝试弄清楚如何说服编译器生成 .js 文件...
是否可以在 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>
目前答案是否定的。 HTML 编辑器知道一些可以托管的语言，例如 CSS、JavaScript 和 Razor (ASP.NET)。在这些情况下，编辑器会做一些奇特的事情来将文本部分映射到每种语言服务。但是，TypeScript 和 SCSS 目前不支持它，据我所知，它不在任何一个团队的积压工作中。
请使用 VS 反馈工具提出请求。由于 vuejs 支持这一点，因此它具有一定的重量，并且可能会在未来的功能规划中得到考虑。客户报告有时比我的更有分量。
（完全披露：我在拥有 VS 中的 HTML 和 SCSS 编辑器的团队工作。我们不拥有 TypeScript，但我们与团队合作做这样的事情.)
我使用 django 模板扩展在 vs code 中打开它。它似乎有效，我知道它是一种不同的语言，但它适用于 linting 和自动格式化
我遇到了同样的困难，我最终使用 Visual Studio 代码编辑器 Vue 文件并安装了这个插件，名为 Vetur: https://github.com/vuejs/vetur
您可以通过在 Visual Studio 代码的侧边菜单中搜索扩展来安装它。
Visual Studio 有一个名为 VuePack 的 Vue 插件，它将为位于此处的单页 vue 文件“*.vue”提供更好的开发体验：https://marketplace.visualstudio.com/items?itemName=MadsKristensen.VuejsPack-18329
一段时间后，我实际上在 Visual Studio 2017 年就完成了所有设置。（除 scss 之外的所有内容）
这是我所做的：
安装
vue-cli安装
VuePack- https://marketplace.visualstudio.com/items?itemName=MadsKristensen.VuejsPack-18329运行 命令提示符中的这一行：
dotnet new --install Microsoft.AspNetCore.SpaTemplates::*在命令提示符下，转到您要创建应用程序的目录，然后运行这样：
dotnet new vuenpm install这将为您创建项目。您现在可以在 Visual studio 2017 中打开 project/add 项目。
但是编译器无法识别
.vue个文件。我不得不再添加一个手动步骤：在应用程序的根目录下有一个文件
webpack.config.js，查找module => rules，你需要添加一个新规则：{ test: /\.vue$/, include: /ClientApp/, loader: 'vue-loader', options: { loaders: { js: 'awesome-typescript-loader?silent=true' } } },在此之后我 运行 遇到了一些 TypeScript 编译错误 - 应用程序会卡在
Loading...- 要解决这个问题你需要编辑tsconfig.json-添加以下内容："awesomeTypescriptLoaderOptions": { "useWebpackText": true, "useCache": true, "useTranspileModule": true }
在此之后我 运行 项目没有问题。
其他可以帮助您的有趣资源：
http://www.dotnetcurry.com/aspnet/1383/modern-web-dev-aspnet-core-webpack-vuejs
Microsoft 现在声称 .vue 文件中的 Typescript 受 Visual Studio 2017 支持：https://developercommunity.visualstudio.com/idea/351510/support-vue-file-intellisense-in-visual-studio.html
我确实试过了，（在重新加载一些文件后）html 代码和 Typescript 的语法突出显示以及智能感知工作正常。仍在尝试弄清楚如何说服编译器生成 .js 文件...