Question

我有一个带有剃刀视图的ASP.Net Core MVC，当它需要更复杂时使用VueJs2。

我希望每个视图都有一个js文件。

我的文件夹结构是这样的：

├ Controllers\HomeController.cs (with actions Index & Details)
├ Scripts\Home\index.ts
├ Scripts\Home\details.ts
├ Views\Home\Index.cshtml
├ Views\Home\Details.csthml
├ wwwroot\lib\vue
├ wwwroot\js\Home\index.js (generated with typescript)
├ wwwroot\js\Home\details.js (generated with typescript)
├ tsconfig.json

这是我的tsconfig.json

{
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5",
    "outDir": "wwwroot/js",
    "rootDir": "Scripts",
    "allowSyntheticDefaultImports": true,
    "lib": [
      "dom",
      "es5",
      "es2015.promise"
    ]
  },
  "include": [
    "wwwroot/lib/vue/typings",
    "Scripts"
  ],
  "compileOnSave": true
}

我的index.ts文件

import Vue from 'vue'

var app = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!'
    }
})

生成的文件：

"use strict";
var vue_1 = require("vue");
var app = new vue_1.default({
    el: '#app',
    data: {
        message: 'Hello Vue!'
    }
});
//# sourceMappingURL=index.js.map

在我的Index.cshtml中，我加载了js文件，但是我需要这个需要在浏览器中不起作用的指令。

如何在浏览器中使用此js文件？

Answer 1

请注意，在 tsconfig.json 中，由于您未指定video设置，因此默认为"module"，请指定此值或其他值（请参阅下文）明确。

这里的问题是浏览器还没有广泛支持模块。那些确实有不完整的初步支持。要在浏览器中使用模块，您需要一个加载器或打包器。

Solid选项包括SystemJS（可选择使用jspm），RequireJS，Webpack或Browserify。

一些注意事项：

在 tsconfig.json 的"commonjs"

中

如果您使用SystemJS，请设置"compilerOptions"。

如果您使用RequireJS，请设置"module": "system"并删除"module": "amd"。

如果你使用Webpack，请设置"allowSyntheticDefaultImports"。

如果您使用Browserify，请设置"module": "commonjs"并删除"module": "commonjs"。

如何在几个html页面中使用vuejs 2与typescript＆amp; ASP.Net核心

1 个答案: