*.vue文件,Visual Studio 2017和TypeScript

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

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

Simcha Khabi.. 8

过了一段时间,我实际上已经在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中打开项目/添加项目.

但是编译器无法识别.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

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

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

过了一段时间,我实际上已经在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中打开项目/添加项目.

但是编译器无法识别.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

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

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