vuejs 2를 몇 개의 html 페이지에서 사용하는 방법 (typescript 및 ASP)넷코어

vuejs 2를 몇 개의 html 페이지에서 사용하는 방법 (typescript 및 ASP)넷코어

ASP가 있어요.더 복잡해야 할 때 VueJs2를 사용하는 면도기 뷰를 갖춘 Net Core MVC.

뷰당 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 파일을 작동시키는 방법은 무엇입니까?

tsconfig.json에서는, 다음의 명령어를 지정하지 않았기 때문에,"module"설정, 디폴트 설정"commonjs"이 값 또는 다른 값(아래 참조)을 명시적으로 지정합니다.

여기서의 문제는 브라우저가 아직 모듈을 광범위하게 지원하지 않는다는 것입니다.사전 지원이 불충분합니다.위해 브라우저의 모듈을 사용하기에 너는 로더 또는 포장 업체가 필요하다.

고체 옵션 시스템을 포함한다JS(선택적으로와jspm), RequireJS, Webpack, 또는 Browserify.

몇몇 팁:

당신의 tsconfig에서.json의"compilerOptions"

세트"module": "system"System을 사용하는 경우JS.

세트"module": "amd"제거하다"allowSyntheticDefaultImports"Require를 선택한 경우JS.

세트"module": "commonjs"웹팩을 사용한다면요.

세트"module": "commonjs"제거하다"allowSyntheticDefaultImports"[ Browserify ]를 선택합니다.

언급URL:https://stackoverflow.com/questions/43388768/how-to-use-vuejs-2-in-few-html-pages-with-typescript-asp-net-core