web-dev-qa-db-fra.com

VueJS 2 + ASP.NET MVC 5

Je suis très nouveau avec VueJS. Je dois créer une application d'une seule page dans un ASP.NET MVC5.

Je suis ce tutoriel et fonctionne très bien -> TUTORIAL

Mais quand je crée une page .vue pour tester les routes VueJS2, le navigateur ne comprend pas "Importer", j'ai lu que je dois utiliser un transpilateur comme Babel, quelqu'un sait comment le résoudre?

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>

Merci beaucoup!!

asp.netasp.net-mvcvue.jsvuejs2router
10
Johnson

Bienvenue dans le développement de Vue.js! Oui, vous avez raison, vous avez besoin de quelque chose pour traduire les instructions d'importation en JavaScript que les navigateurs peuvent gérer. Les outils les plus populaires sont webpack et browserify.

Vous utilisez également un . Fichier vue , qui doit être converti (avec vue-loader ) avant que le navigateur puisse le récupérer. Je vais vous expliquer comment procéder et configurer Webpack, ce qui implique quelques étapes. Tout d'abord, le code HTML avec lequel nous travaillons ressemble à ceci:

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

Notre objectif est d'utiliser webpack pour regrouper/compiler App.vue et app.js dans dist.js. Voici un fichier webpack.config.js qui peut nous aider à le faire:

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

Cette configuration dit, "commencez dans app.js, remplacez les instructions import au fur et à mesure que nous les rencontrons, et regroupez-les dans un fichier dist.js. Lorsque webpack voit un fichier .vue, utilisez le module vue-loader pour ajoutez-le à dist.js. "

Maintenant, nous devons installer les outils/bibliothèques qui peuvent y arriver. Je recommande d'utiliser npm, fourni avec Node.js . Une fois npm installé, vous pouvez placer ce fichier package.json dans votre répertoire:

{
  "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"
  }
}

Et procédez comme suit:

  1. Courir npm install pour obtenir tous les packages.
  2. Courir npm run-script build pour générer votre fichier dist.js via webpack.

Remarque dans l'exemple de cette question, le routeur n'est pas défini dans app.js, mais voici un fichier corrigé:

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'
    }
});

Ça devrait être ça! Faites moi savoir si vous avez des questions.

17
exclsr