.NET MVC, Webpack and Vue.js — Part 2 — Project Structure

This is the second part of this serie, it shows the basic directory sctructure

• Part 1 — Tools;
• Part 2 — Project structure;
• Part 3 — NPM Packages;
• Part 4 — Webpack Configuration;
• Part 5 — Vue.js;
• Part 6 — Vuex;

Now, we’re going to create our app. Open your Visual Studio, File > New Project:

File > New Project

Application name, location and framework version

Select the MVC template

We have the basic mvc application structure. Now, remove the following NuGet packages:

• Antlr;
• bootstrap;
• jQuery;
• jQuery.Validation;
• Microsoft.AspNet.Web.Optimization;
• Microsoft.jQuery.Unobtrusive.Validation;
• Modernizr;
• WebGrease;

Update all remaining packages (you can use Update-Package, in the Package Manager Console, to update all packages at once):

Remaining packages in our application

We can exclude:
~/App_Start/BundleConfig.cs;
~/Content/*;

Project Structure

Remove the references in the Global.asax:

Removing refences to the BundleConfig code;

And remove the reference to Web.Optimization in the web.config inner Views directory:

Remove this references to not cause an exception in runtime

Now, create the following directories inner the project:

• public/src/scss;
• public/src/js;

Now create the following files:

• public/src/scss/index.scss;
• public/src/js/index.js;

Next part, we’ll start to work with npm.

See ya.