Создание Core.NET 2.0 веб-приложения на Vue.js

 

Vue.js - это JavaScript-фреймворк используемый для создания пользовательского интерфейса. Одним из основных преимуществ данного фреймворка заключается в его легковесности, относительной простоте использования и высокой производительности. Как и другие популярные JavaScript-фреймворки, такие как Angular и React, Vue.js придерживается концепции разделения содержимого страницы на отдельные компоненты, содержащие в себе весь необходимый для себя HTML, CSS и JS код.

Создание и настройка проекта Visual Studio

Для начала создадим стандартный MVC .NET Core проект.

После этого выбираете приложение ASP.NET MVC Core 2.0 и нажимаем кнопку ОК.

Теперь переходим к донастройке проекта. Заходим в файл Startup.cs и добавляем следующие строки:

using Microsoft.AspNetCore.SpaServices.Webpack;

затем

app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions

 {

     HotModuleReplacement = true

 });

и наконец

routes.MapSpaFallbackRoute(

 name: "spa-fallback",

 defaults: new { controller = "Home", action = "Index" });

Эти команды позволяют автоматически обновлять файлы после редактирования исходного кода, а также переадресовывать на страницу по умолчанию, если введен некорретный адрес.

using Microsoft.AspNetCore.Builder;

using Microsoft.AspNetCore.Hosting;

using Microsoft.Extensions.Configuration;

using Microsoft.Extensions.DependencyInjection;

using Microsoft.AspNetCore.SpaServices.Webpack;



namespace TestVuejs

{

    public class Startup

    {

        public Startup(IConfiguration configuration)

        {

            Configuration = configuration;

        }



        public IConfiguration Configuration { get; }



        // This method gets called by the runtime. Use this method to add services to the container.

        public void ConfigureServices(IServiceCollection services)

        {

            services.AddMvc();

        }



        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.

        public void Configure(IApplicationBuilder app, IHostingEnvironment env)

        {

            if (env.IsDevelopment())

            {

                app.UseBrowserLink();

                app.UseDeveloperExceptionPage();

                app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions

                {

                    HotModuleReplacement = true

                });

            }

            else

            {

                app.UseExceptionHandler("/Home/Error");

            }



            app.UseStaticFiles();



            app.UseMvc(routes =>

            {

                routes.MapRoute(

                    name: "default",

                    template: "{controller=Home}/{action=Index}/{id?}");



                routes.MapSpaFallbackRoute(

                    name: "spa-fallback",

                    defaults: new { controller = "Home", action = "Index" });

            });

        }

    }

}

Теперь создадите файл webpack.config.js в корне проекта со следующим содержимым. Этот файл отвечает за настройку того, как webpack скомпилирует javascript, vue, scss, css и другие файлы проектов.

var path = require('path')

var webpack = require('webpack')

const bundleOutputDir = './wwwroot/dist';



module.exports = {

 context: __dirname,

  entry: { main: './App/index.js' },

  module: {

    rules: [

      {

        test: /\.css$/,

        use: [

          'vue-style-loader',

          'css-loader'

        ],

      },

      {

        test: /\.vue$/,

        loader: 'vue-loader',

        options: {

          loaders: {

            'scss': [

              'vue-style-loader',

              'css-loader',

              'sass-loader'

            ],

            'sass': [

              'vue-style-loader',

              'css-loader',

              'sass-loader?indentedSyntax'

            ]

          }

        }

      },

      {

        test: /\.js$/,

        loader: 'babel-loader',

        exclude: /node_modules/

      },

      {

        test: /\.(png|jpg|gif|svg)$/,

        loader: 'file-loader',

        options: {

          name: '[name].[ext]?[hash]'

        }

      }

    ]

  },

  resolve: {

    alias: {

      'vue$': 'vue/dist/vue.esm.js'

    },

    extensions: ['*', '.js', '.vue', '.json']

  },

  devServer: {

    historyApiFallback: true,

    noInfo: true,

    overlay: true

  },

  performance: {

    hints: false

  },output: {

    path: path.join(__dirname, bundleOutputDir),

    filename: '[name].js',

    publicPath: 'dist/'

},

  devtool: '#eval-source-map'

}



if (process.env.NODE_ENV === 'production') {

  module.exports.devtool = '#source-map'

  module.exports.plugins = (module.exports.plugins || []).concat([

    new webpack.DefinePlugin({

      'process.env': {

        NODE_ENV: '"production"'

      }

    }),

    new webpack.optimize.UglifyJsPlugin({

      sourceMap: true,

      compress: {

        warnings: false

      }

    }),

    new webpack.LoaderOptionsPlugin({

      minimize: true

    })

  ])

}

Теперь создайте файл .babelrc в корне проекта, чтобы настроить конфигурацию сборщика пакетов babel.

{

    "presets": [

        ["env", { "modules": false }],

        "stage-3"

    ]

}

Создаем файл package.json также в корне проекта, чтобы настроить какие пакеты нужно получать с помощью npm.

{

  "name": "TestVuejs",

  "private": true,

  "version": "0.0.0",

  "author": "Vadim Shvanov <shwanoff.ru>",

  "devDependencies": {

    "@types/webpack-env": "^1.13.5",

    "aspnet-webpack": "^2.0.3",

    "babel-plugin-transform-object-rest-spread": "^6.26.0",

    "css-loader": "^0.25.0",

    "event-source-polyfill": "^0.0.7",

    "extract-text-webpack-plugin": "^2.1.2",

    "file-loader": "^0.9.0",

    "isomorphic-fetch": "^2.2.1",

    "jquery": "^3.3.1",

    "node-sass": "^4.5.3",

    "sass-loader": "^6.0.6",

    "style-loader": "^0.13.1",

    "url-loader": "^0.5.7",

    "webpack": "^2.7.0",

    "webpack-hot-middleware": "^2.21.0"

  },

  "dependencies": {

    "babel-core": "^6.26.0",

    "babel-loader": "^7.1.2",

    "babel-polyfill": "^6.26.0",

    "babel-preset-env": "^1.6.1",

    "babel-preset-stage-3": "^6.24.1",

    "vue": "^2.5.13",

    "vue-loader": "^14.0.3",

    "vue-router": "^3.0.1",

    "vue-template-compiler": "^2.5.13"

  },

  "browserslist": [

    "> 1%",

    "last 2 versions",

    "not ie <= 8"

  ]

}

Теперь открываем терминал менеджера пакетов и выполняем команды для получения всех необходимых пакетов. Если у вас данное окно не открыто, то его можно отобразить если зайти в меню Вид -> Другие окна -> Консоль диспетчера пакетов.

Для начала выполняем команду

dotnet restore

После этого

npm install

Теперь переходим к редактированию представлений. Для начала изменим файл макета страницы Views/Shared/_Layout.cshtml.

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>@ViewData["Title"] - TestVuejs</title>

    <base href="~/" />

</head>

<body>

    @RenderBody()





    <footer>

        <p>&copy; 2018 - <a href="https://shwanoff.ru">Шванов Вадим</a></p>

    </footer>

    @RenderSection("scripts", required: false)

</body>

</html>

И наконец изменим файл главной страницы Views/Home/Index.cshtml следующим удалив все лишнее. Лишние файлы About и Contact можно удалить.

<!DOCTYPE html>

@{

    ViewData["Title"] = "Главная";

}



<div id='app'>Загрузка...</div>



@section scripts {

    <script src="~/dist/main.js" asp-append-version="true"></script>

}

Создадим папку App в корне проекта. И добавим туда два файла.index.js

import Vue from 'vue'

import VueRouter from 'vue-router'

import App from './App.vue'



Vue.config.productionTip = false

Vue.use(VueRouter)



const routes = [

  { 

    path: '/', 

    component: App

  }

]



const router = new VueRouter({

  routes,

  mode: 'history'

})



new Vue({

  el: '#app',

  template: "<div><router-view></router-view></div>",

  router

})

App.vue

<template>

    <div id="home">

        <h1>Hello World!</h1>

    </div>

</template>



<script>

export default { }

</script>



<style lang="scss">

</style>

После этого запускаем приложение, и проверяем результат. Не забудьте перевести режим запуска на приложение, вместо IIS.

В результате получаем вывод приветствия на экран

В некоторых случаях может возникать следующая ошибка.

Module build failed: Error: Missing binding 

C:\Users\vadim.shvanov\Source\Repos\TestVuejs\TestVuejs\node_modules\node-sass\vendor\win32-x64-57\binding.node 

Node Sass could not find a binding for your current environment: Windows 64-bit with Node.js 8.x 

Found bindings for the following environments: - Windows 64-bit with Node.js 5.x

Чтобы ее исправить зайдите в папку проекта из командной строки с правами администратора и выполните команду. Это должно исправить эту ошибку.

npm rebuild node-sass

 На этом создание первого приложения завершено, в дальнейших выпусках мы продолжим разработку данного примера до полноценного приложения. Подписывайтесь, чтобы не пропустить новые выпуски.

Источник: CODE BLOG