web-dev-qa-db-fra.com

Meilleure approche lors du remplacement de jQuery par VueJS 2 dans une application MVC .NET multi-pages existante

Je suis très nouveau dans VueJS

J'ai une application ASP.NET MVC multi-pages où je veux utiliser VueJS (composants, liaison bidirectionnelle, validation, opérations CRUD)

Utilise actuellement jQuery pour la manipulation DOM, les requêtes Ajax, etc.

Comment dois-je aborder cela? Je reçois beaucoup trop de variations de pensées de différents messages (en ligne)

Quelqu'un pourrait-il me guider et me donner quelques conseils pour commencer?

Un doc étape par étape sera génial qui montre comment le faire avec une page mondiale Bonjour (MVC View) avec le composant de fichier unique vuejs et le regroupement

Le regroupement semble un processus compliqué. Mais j'aimerais utiliser MOINS dans mon code

Merci d'avoir lu

asp.net-mvcvuejs2vue-componentvue.js
26
kheya

Extrêmement basique

La façon la plus simple de commencer que je connaisse avec Vue dans ASP.NET est simplement d'inclure le script Vue dans votre projet. Vous pouvez utiliser la vue .js Nuget package, qui ajoutera les scripts Vue à votre répertoire Scripts et inclura simplement le développement ou la version réduite dans votre vue MVC.

<script src="~/Scripts/vue.min.js"></script>

Ensuite, dans votre vue cshtml, ajoutez simplement un bloc de script.

<script>
    new Vue({
        el: "#app",
        data: {
            message: "Hello from Vue"
        }
    })
</script>

où #app fait référence à un élément de votre vue. Si vous souhaitez utiliser un composant, ajoutez-le simplement à votre bloc de script.

<script>
    Vue.component("child", {
        template:"<h1>I'm a child component!</h1>"
    })

    new Vue({
        el: "#app",
        data: {
            message: "Hello from Vue"
        }
    })
</script>

et modifiez votre modèle Vue.

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

Si vous vous trouvez à construire de nombreux composants (ce que vous allez probablement faire), extrayez-les dans un fichier vue.components.js ou quelque chose de similaire, définissez tous vos composants là-bas et incluez-le dans vos vues en plus du vue script.

Utilisation de composants à fichier unique

Pour utiliser des composants à fichier unique, vous devez intégrer le processus de génération node.js pour les composants à fichier unique dans votre processus de génération ASP.NET MVC.

Installez node.js . Une fois node.js installé, installez globalement le webpack.

npm install webpack -g

Ajoutez un package.json à votre projet. Voici ce que j'utilise.

{
  "version": "1.0.0",
  "name": "vue-example",
  "private": true,
  "devDependencies": {
    "babel-core": "^6.23.1",
    "babel-loader": "^6.3.2",
    "babel-preset-env": "^1.1.8",
    "css-loader": "^0.26.1",
    "style-loader": "^0.13.1",
    "vue-loader": "^11.1.0",
    "vue-template-compiler": "^2.1.10",
    "webpack": "^2.2.0"
  },
  "dependencies": {
    "vue": "^2.2.1"
  }
}

Je crée généralement un dossier dans mon projet pour contenir mes scripts Vue et .vue appelés Vue. Ajoutez un fichier pour servir de point d'entrée pour votre Vue Nous pouvons appeler ce fichier index.js (ou tout ce que vous voulez).

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

new Vue({
    el: '#app',
    render: h => h(App)
})

Créez App.vue.

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

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

Ajoutez un webpack.config.js à votre projet. Voici ce que j'utilise.

module.exports = {
    entry: "./Vue/index.js",
    output: {
        path: __dirname,
        filename: "./Vue/bundle.js",
    },
    module: {
        loaders: [
            { test: /\.vue$/, loader: 'vue-loader' },
        ],
    }
}

Cette configuration spécifie index.js comme point d'entrée pour webpack pour déterminer ce qu'il faut inclure dans un fichier bundle.js, qui sera compilé et placé dans le dossier Vue.

Afin de compiler le fichier bundle.js chaque fois que le projet se construit, je modifie le fichier de projet pour inclure les éléments suivants.

<Target Name="RunWebpack">
  <Exec Command="npm install" />
  <Exec Command="webpack" />
</Target>
<Target Name="BeforeBuild" DependsOnTargets="RunWebpack"></Target>

Cela installera les packages npm nécessaires, puis exécutera webpack pour créer le bundle.js. Cela est nécessaire si vous générez votre projet sur un serveur de génération.

Il ne vous reste plus qu'à inclure le fichier bundle.js dans une vue contenant un élément avec #app dessus. Vous avez pas devez inclure vue.js ou vue.min.js. Ce sera dans le paquet.

Compilation des composants individuels d'un seul fichier

Nous avons constaté que nous voulions parfois utiliser un seul composant de fichier, mais nous ne voulions pas tout regrouper dans un seul script. Pour ce faire, il vous suffit principalement de modifier le webpack.config.js.

const fs = require("fs");
const path = require("path");

// build an object that looks like 
// {
//      "filename": "./filename.vue"
// }
// to list the entry points for webpack to compile.
function buildEntry() {
    const reducer = (entry, file) => { entry[file.split(".").shift()] = `./Vue/${file}`; return entry; };

    return fs.readdirSync(path.join(__dirname, "Vue"))
        .filter(file => file.endsWith(".vue"))
        .reduce(reducer, {});
}

module.exports = {
    entry: buildEntry(),
    output: {
        path: path.join(__dirname, "Vue"),
        filename: "[name].js",
        library: "[name]"
    },
    module: {
        loaders: [
            { test: /\.vue$/, loader: 'vue-loader' },
        ],
    }
}

Cette configuration de webpack créera un fichier de script pour chaque composant de fichier individuel. Ensuite, vous pouvez simplement inclure ce script sur une page où vous utilisez la technique "Extrêmement basique" ci-dessus et utiliser le composant dans votre Vue en l'exposant globalement ou dans le cadre de la Vue. Pour Par exemple, si j'ai un Modal.vue, j'inclurais Modal.js dans la vue ASP.NET MVC, puis l'exposerais à Vue by

Vue.component("Modal", Modal);

ou

new Vue({
    ...
    components:{
        "Modal": Modal
    }
})

Webpack est très configurable, vous voudrez peut-être adopter une approche différente et créer un seul paquet pour chaque page.

Enfin, vous pouvez ouvrir une ligne de commande pendant que vous développez et exécutez

webpack --watch

directement dans votre projet et votre ou vos bundles ou composants individuels seront créés à chaque sauvegarde.

68
Bert

J'essayais de configurer Vue avec ASP.NET MVC 5 (.NET 4.5, pas Core!) En suivant un article publié ci-dessus par @Bert, mais j'ai rencontré de nombreux problèmes, j'ai donc trouvé autrement:

(AVERTISSEMENT: si vous voulez utiliser vue.js avec vos propres composants, vous devez installer node.js - pour npm, webpack - pour construire des bundles et vue-loader - pour analyser les fichiers * .vue)

  1. Installez node.js
  2. Exécutez Invite de commandes Node.js et accédez à votre dossier de projet Visual Studio (où est placé le fichier *. Csproj )
  3. Type: npm init -y et appuyez sur Entrée - il devrait générer packages.json fichier avec les dépendances et les paramètres de base
  4. Ajoutez les chargeurs nécessaires pour Vue (sans ceux-ci, *. Vue les fichiers ne peuvent pas être analysés en javascript en bundle) : npm install --save-dev vue-loader vue-template-compiler

  5. Ajoutez le webpack (globalement) et enregistrez-le dans notre fichier package.json :

    une) npm install -g webpack

    b) npm install –-save-dev webpack

  6. Enfin, ajoutez Vue.js au projet: npm install --save vue

Pour l'instant, mon package.json ressemble à:

{
  "name": "VueExample",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "vue-loader": "^14.2.1",
    "vue-template-compiler": "^2.5.16",
    "webpack": "^4.2.0"
  },
  "dependencies": {
    "vue": "^2.5.16"
  }
}
  1. L'étape suivante consiste à configurer webpack - revenir à Visual Studio et ajouter au projet webpack.config.js , et collez-y le code suivant:
module.exports = {
    entry: './Vue/index.js',
    output: {
        path: __dirname,
        filename: './Vue/dist/bundle.js'
    },
    devtool: 'source-map',
    module: {
        rules: [
            {
                test: /\.vue$/,
                exclude: /node_modules/,
                loader: 'vue-loader'
            }
        ]
    }
};
  1. Ajoutez le dossier Vue à votre projet et placez-y deux fichiers - index.js et App.vue:

index.js:

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

new Vue({
    el: '#app',
    render: h => h(App)
});

App.vue:

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

<script>
    export default {
      name: 'app',
      data () {
        return {
          msg: 'Welcome to Your Vue.js App'
        }
      }
    }
</script>
  1. Exemple de fichier index.cshtml:
@{
    ViewBag.Title = "Home Page";
}

<div id="app">

</div>

@section scripts{
    <script src="~/Vue/dist/bundle.js"></script>
}
  1. Retournez à Invite de commandes Node.js ouverte dans 2) et exécutez webpack en tapant: webpack, appuyez sur Entrée et attendez de construire votre bundle.js que vous peut trouver dans ~/Vue/dist/bundle.js
  2. Générez votre projet dans Visual Studio et exécutez-le.
5
1_bug

J'ai utilisé une grande partie de la réponse fournie par @ 1_bug pour configurer Vue Bundle de composants de fichier unique avec webpack dans mon projet ASP.NET MVC 4.5.

Cependant, lors de la tentative de génération du bundle, à l'aide de la commande webpack, j'ai reçu l'erreur suivante:

"vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config."

En examinant cela, j'ai constaté que la dernière mise à jour de vue-loader (v15), nécessite une légère modification du fichier webpack.config.js.

Depuis le site Web de vue-loader ( https://vue-loader.vuejs.org/migrating.html ), vous devez référencer le plugin vue-loader dans le fichier webpack.config.js, comme au dessous de:

// webpack.config.js
const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
  // ...
  plugins: [
    new VueLoaderPlugin()
  ]
}
2
Marek