VueJS 2 + ASP.NET MVC 5

Ich bin sehr neu mit VueJS.
Ich habe zum erstellen eine einzelne Seite innerhalb einer Anwendung ASP.NET MVC5.

Ich Folge diesem tutorial und funktioniert sehr gut -> TUTORIAL

Aber wenn ich ein .vue-Seite, um zu testen VueJS2 Routen, die der browser versteht nicht, "Import", habe ich gelesen, dass ich eine transpiler wie Babel, jemand weiß, wie ich es lösen?

App.VUE

    <template>
    <div id="app">
        {{msg}}
    </div>
</template>

<script>
    export default {
      name: 'app',
      data () {
        return {
          msg: 'Welcome to Your Vue.js App'
        }
      }
    }
</script>

App.JS

    import Vue from 'vue'
import App from './App.vue'


new Vue({
    el: '#app',
    router,
    render: h => h(App),
    data: {
        message: 'Hello Vue! in About Page'
    }
});

_Layout.cshtml

<div class="container-fluid">
        @RenderBody()

        <div id="app">
            { { message } }
        </div>
    </div>


    <script src="~/Scripts/essential/jquery-3.1.1.min.js"></script>
    <script src="~/Scripts/essential/bootstrap.min.js"></script>
    <script src="~/Scripts/essential/inspinia.js"></script>
    <script src="~/Scripts/essential/vue.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/2.0.1/vue-router.js"></script>

    <script src="~/Scripts/app.js"></script>
    <script src="~/Scripts/plugin/metisMenu/jquery.metisMenu.js"></script>
    <script src="~/Scripts/plugin/pace/pace.min.js"></script>
    <script src="~/Scripts/plugin/slimscroll/jquery.slimscroll.min.js"></script>

Vielen Dank!!

Möglich, Duplikat der Beste Ansatz beim Austausch von jQuery mit VueJS 2 in der multi-Seite vorhandene .NET MVC-Anwendung
Yeah! Ich sah, dass @Bert, ich habe das "Extrem " Basic" tutorial. Aber als ich versuchte, die zweite. Aber ich wollte nicht verstehen, der Letzte Teil, wenn er die Gespräche über diesen Teil: "<Target Name="RunWebpack"> <Exec Command="npm install" /> <Exec Command="webpack" /> </Target> <Target Name="BeforeBuild" DependsOnTargets="RunWebpack"></Ziel - >" ich weiß nicht, wo ich habe, es zu setzen.
Sie haben zu Bearbeiten .csproj-Datei für Ihr Projekt, und fügen Sie die Zeilen.

InformationsquelleAutor Johnson | 2017-09-04

  1. 16

    Willkommen Vue.js Entwicklung! Ja, Sie sind richtig, Sie müssen etwas zur übersetzung der import-Anweisungen in JavaScript, die der Browser verarbeiten kann. Die beliebtesten tools sind webpack und browserify.

    Sie auch mit einem .vue-Datei, die umgewandelt werden müssen (mit vue-loader), bevor der browser es abholen kann. Ich werde darlegen, wie Sie dies tun, und einrichten webpack, die beinhaltet ein paar Schritte. Erstens, die HTML, mit der wir arbeiten wie folgt aussieht:

    <html>
   <head>
   </head>
   <body>
      <div class="container-fluid">
        <div id="app">
            { { message } }
        </div>
      </div>
      <script src="./dist.js"></script>
   </body>
</html>

    Unser Ziel ist es, mit webpack zu bündeln /App kompilieren.vue und app.js in dist.js. Hier ist ein webpack.config.js Datei, die uns helfen können, tun:

    module.exports = {
   entry: './app.js',
   output: {
      filename: 'dist.js'
   },
   module: {
     rules: [
       {
         test: /\.vue$/,
         loader: 'vue-loader'
       }
     ]
   }
}

    Diese Konfiguration sagt, "start in app.js ersetzen Sie import Aussagen begegnen wir Ihnen, und bündeln Sie es in einer dist.js Datei. Wenn webpack sieht .vue-Datei, verwenden Sie die vue-loader-Modul, um es in dist.js."

    Nun müssen wir zum installieren der tools /Bibliotheken, die dies möglich machen. Ich empfehle die Verwendung von npm, die mit Node.js. Sobald Sie über npm installiert haben, können Sie dieses Paket.json-Datei in Ihrem Verzeichnis:

    {
  "name": "getting-started",
  "version": "1.0.0",
  "scripts": {
    "build": "webpack"
  },
  "dependencies": {
    "css-loader": "^0.28.7",
    "vue": "^2.4.2",
    "vue-loader": "^13.0.4",
    "vue-resource": "^1.3.3",
    "vue-router": "^2.7.0",
    "vue-template-compiler": "^2.4.2",
    "webpack": "^3.5.5"
  }
}

    Die folgenden Schritte aus:

    1. Laufen npm install alle Pakete.
    2. Laufen npm run-script build zu generieren dist.js Datei per webpack.

    Beachten Sie in dem Beispiel für diese Frage, der router ist nicht definiert, in app.js, aber hier ist ein Fix-up-Datei:

    import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'

var router = new VueRouter();

new Vue({
    el: '#app',
    router,
    render: h => h(App),
    data: {
        message: 'Hello Vue! in About Page'
    }
});

    Dass sollte es sein! Lassen Sie mich wissen, wenn Sie irgendwelche Fragen haben.

    Vielen Dank für die Antwort, ich Tue alles, was Sie sah, das dist.js Datei wurde erfolgreich erstellt. Also habe ich versucht, den Aufbau meiner _Layout.cshtml auf visual studio 2015, und es gibt eine Menge von Fehlern über "Fehlende JSDoc-Parameter für die '...' " Wie kann ich die kompilieren? Danke!
    Ok Super. Denken Sie, diese Fehler werden verursacht durch eine linter, z.B. ESLint oder etwas ähnliches (wie das Visual Studio TypeScript-compiler)? Daran, es zu bauen, könnte davon abhängen, Ihre spezifischen setup ... Sie haben könnten zu sagen, Visual Studio zu ignorieren, den node_modules-Ordner?
    ich weiß nicht, warum diese Fehler auftreten, die zu mir, ich habe versucht, "Include in Project" der Knoten Module Ordner, aber hat nicht funktioniert... =( muss ich herunterladen einige visual-studio-Erweiterung? Ich habe ein Typoskript extention, werde ich deinstallieren und nochmals versuchen.
    Ja, versuchen Sie, schalten Sie die Visual Studio-TypeScript-compiler, wenn Sie können. Es sollte ohne spezielle Erweiterungen ... Schließlich, möchten Sie vielleicht, um die NPM-Task-Runner und WebPack Task-Runner-Erweiterungen, um Ihren webpack automatisch erstellen, wenn Sie Dateien speichern.
    Ja, für das kompilieren (nachdem in der Vergangenheit dieser postcss.d....ts-Sache), ich schlage vor, auf der Suche in WebPack Task Runner von Visual Studio-Erweiterung.

    InformationsquelleAutor exclsr

Schreibe einen Kommentar