Создание 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

Исходный код доступен в репозитории github https://github.com/shwanoff/TestVuejs.

Следующая статья Знакомство с SCSS при работе с Vue.js

P.S. Присоединяйся в любой удобной для тебя социальной сети. Для меня очень важно оставаться с тобой на связи, ведь у меня есть еще много полезной информации о программировании для тебя, которой я хочу с тобой поделиться.
[DISPLAY_ULTIMATE_PLUS]

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

Похожее

Похожие записи

Индексаторы C#

Функциональный API библиотеки Keras

Как хакеры с помощью вашего IP, взламывают компьютер? Как избежать сканирование портов?