我们如何将Vue JS与ASP.NET MVC和nuget包集成在一起

Question

How can we integrate Vue JS with MVC Project that is existing and using with Nuget Package.

Tried with below approach.

<h3>VueJS 2 in ASP.NET MVC 5</h3>
<div id="aboutPage">
    { { message }}
</div>
<script>
    var aboutPage = new Vue({
        el: '#aboutPage',
        data: {
            message: 'Hello Vue! in About Page'
        }
    });
</script>

Question:

1. Is there need for any additional package like - webpack or gulp, we already have bundle config of MVC?

2. How can we create separate files or design for each view like:

1. To separate the service call (to call web api from client side)

2. separate out the template file.

3. methods or logic to write in JS.

any example for MVC with VueJS like - controller, view,service, vue JS file is great..

Thanks a lot !

Answer 1

You can use vuejs buy adding it to your layout.

 @Scripts.Render("~/node_modules/vue/dist/vue.min.js")

You need to install Nodejs on your machine to use NPM and ES6 features. For integrate Vue.js in .NET MVC you need module bundler (webpack, gulp),can choose one of this options, the popular is webpack:

1:(Gulp, Browserify), which has some limitations such as supporting only require syntax handling assets. and the setup is kind of complicated.

2:(Webpack), which has a lot of cool things you can do with it, Hot Reload. check this repo by using webpack, you config it to handle just js files and it will handle js files for build too , upon build each entry will be copied inside Scripts/bundle, also you need some loaders such ass (vue, scss, css and js) for webpack. check this

Webpack uses webpack-dev-server for development which is basically a node.js based server which serves assets (javascript, css etc) that our browsers can interpret. Usually these assets include some development friendly features like Hot Reload. These assets are not minified and are quite different from the ones generated when building for production.

devServer: {
proxy: {
    '*': {
        target: 'http://localhost:5001',
        changeOrigin: true
    }
}

},

webpack-dev-server has a feature which can proxy requests from one url to another. In this case, every request from "webpack dev server " will be proxied to your "asp.mvc server". So, if we run our MVC app on http://localhost:5001 and run npm run dev , on port 8086 you should see the same output as from our MVC app.

Answers: 1: yes you have to setup Webpack or Gulp. 2. by using webpack you can all thing for file structuer that you want check this tree

-app
--libs
----utils
----components
---------commons
---------.......
-----pages
---------.....

check this articles
https://medium.com/corebuild-software/vue-js-and-net-mvc-b5cede228626
http://www.lambdatwist.com/dot-net-vuejs/

Answer 2

If you want to keep the .cshtml files and use MVC as a multipage application, you can take a look at this template as an example or starting point. https://github.com/danijelh/aspnetcore-vue-typescript-template

You can create modules of pages which you want to enhance with Vue and import that bundle.