@ViewData[\"Title\"]

{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"64bmg"},{"data":{"image":{"id":"5ad1a31961049348b6c06577"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"2unl0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"}],"text":"Vue.js - это JavaScript-фреймворк используемый для создания пользовательского интерфейса. Одним из основных преимуществ данного фреймворка заключается в его легковесности, относительной простоте использования и высокой производительности. Как и другие популярные JavaScript-фреймворки, такие как Angular и React, Vue.js придерживается концепции разделения содержимого страницы на отдельные компоненты, содержащие в себе весь необходимый для себя HTML, CSS и JS код.","type":"unstyled","key":"ac842"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Создание и настройка проекта Visual Studio","type":"header-three","key":"b40o1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для начала создадим стандартный MVC .NET Core проект.","type":"unstyled","key":"avi8m"},{"data":{"image":{"id":"5ad1a27ff03173b2ad92199b"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"fhsgn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"После этого выбираете приложение ASP.NET MVC Core 2.0 и нажимаем кнопку ОК.","type":"unstyled","key":"2v7re"},{"data":{"image":{"id":"5ad1a27fdd2484cb62706d15"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"8m30o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":55,"style":"BOLD"}],"text":"Теперь переходим к донастройке проекта. Заходим в файл Startup.cs и добавляем следующие строки:","type":"unstyled","key":"4c5d0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"using Microsoft.AspNetCore.SpaServices.Webpack;","type":"blockquote","key":"3jbcc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"затем","type":"unstyled","key":"676kb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions\n {\n HotModuleReplacement = true\n });","type":"blockquote","key":"acui"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"и наконец","type":"unstyled","key":"em96s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"routes.MapSpaFallbackRoute(\n name: \"spa-fallback\",\n defaults: new { controller = \"Home\", action = \"Index\" });","type":"blockquote","key":"f9n7v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Эти команды позволяют автоматически обновлять файлы после редактирования исходного кода, а также переадресовывать на страницу по умолчанию, если введен некорретный адрес.","type":"unstyled","key":"a0obi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"using Microsoft.AspNetCore.Builder;\nusing Microsoft.AspNetCore.Hosting;\nusing Microsoft.Extensions.Configuration;\nusing Microsoft.Extensions.DependencyInjection;\nusing Microsoft.AspNetCore.SpaServices.Webpack;\n\nnamespace TestVuejs\n{\n public class Startup\n {\n public Startup(IConfiguration configuration)\n {\n Configuration = configuration;\n }\n\n public IConfiguration Configuration { get; }\n\n // This method gets called by the runtime. Use this method to add services to the container.\n public void ConfigureServices(IServiceCollection services)\n {\n services.AddMvc();\n }\n\n // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.\n public void Configure(IApplicationBuilder app, IHostingEnvironment env)\n {\n if (env.IsDevelopment())\n {\n app.UseBrowserLink();\n app.UseDeveloperExceptionPage();\n app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions\n {\n HotModuleReplacement = true\n });\n }\n else\n {\n app.UseExceptionHandler(\"/Home/Error\");\n }\n\n app.UseStaticFiles();\n\n app.UseMvc(routes =>\n {\n routes.MapRoute(\n name: \"default\",\n template: \"{controller=Home}/{action=Index}/{id?}\");\n\n routes.MapSpaFallbackRoute(\n name: \"spa-fallback\",\n defaults: new { controller = \"Home\", action = \"Index\" });\n });\n }\n }\n}","type":"blockquote","key":"da6cc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":22,"style":"BOLD"}],"text":"Теперь создадите файл webpack.config.js в корне проекта со следующим содержимым. Этот файл отвечает за настройку того, как webpack скомпилирует javascript, vue, scss, css и другие файлы проектов.","type":"unstyled","key":"fos0s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"var path = require('path')\nvar webpack = require('webpack')\nconst bundleOutputDir = './wwwroot/dist';\n\nmodule.exports = {\n context: __dirname,\n entry: { main: './App/index.js' },\n module: {\n rules: [\n {\n test: /\\.css$/,\n use: [\n 'vue-style-loader',\n 'css-loader'\n ],\n },\n {\n test: /\\.vue$/,\n loader: 'vue-loader',\n options: {\n loaders: {\n 'scss': [\n 'vue-style-loader',\n 'css-loader',\n 'sass-loader'\n ],\n 'sass': [\n 'vue-style-loader',\n 'css-loader',\n 'sass-loader?indentedSyntax'\n ]\n }\n }\n },\n {\n test: /\\.js$/,\n loader: 'babel-loader',\n exclude: /node_modules/\n },\n {\n test: /\\.(png|jpg|gif|svg)$/,\n loader: 'file-loader',\n options: {\n name: '[name].[ext]?[hash]'\n }\n }\n ]\n },\n resolve: {\n alias: {\n 'vue$': 'vue/dist/vue.esm.js'\n },\n extensions: ['*', '.js', '.vue', '.json']\n },\n devServer: {\n historyApiFallback: true,\n noInfo: true,\n overlay: true\n },\n performance: {\n hints: false\n },output: {\n path: path.join(__dirname, bundleOutputDir),\n filename: '[name].js',\n publicPath: 'dist/'\n},\n devtool: '#eval-source-map'\n}\n\nif (process.env.NODE_ENV === 'production') {\n module.exports.devtool = '#source-map'\n module.exports.plugins = (module.exports.plugins || []).concat([\n new webpack.DefinePlugin({\n 'process.env': {\n NODE_ENV: '\"production\"'\n }\n }),\n new webpack.optimize.UglifyJsPlugin({\n sourceMap: true,\n compress: {\n warnings: false\n }\n }),\n new webpack.LoaderOptionsPlugin({\n minimize: true\n })\n ])\n}","type":"blockquote","key":"89vf7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":21,"style":"BOLD"}],"text":"Теперь создайте файл .babelrc в корне проекта, чтобы настроить конфигурацию сборщика пакетов babel.","type":"unstyled","key":"4gap"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"{\n \"presets\": [\n [\"env\", { \"modules\": false }],\n \"stage-3\"\n ]\n}","type":"blockquote","key":"8lqtp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":13,"style":"BOLD"}],"text":"Создаем файл package.json также в корне проекта, чтобы настроить какие пакеты нужно получать с помощью npm.","type":"unstyled","key":"dmdl3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"{\n \"name\": \"TestVuejs\",\n \"private\": true,\n \"version\": \"0.0.0\",\n \"author\": \"Vadim Shvanov \",\n \"devDependencies\": {\n \"@types/webpack-env\": \"^1.13.5\",\n \"aspnet-webpack\": \"^2.0.3\",\n \"babel-plugin-transform-object-rest-spread\": \"^6.26.0\",\n \"css-loader\": \"^0.25.0\",\n \"event-source-polyfill\": \"^0.0.7\",\n \"extract-text-webpack-plugin\": \"^2.1.2\",\n \"file-loader\": \"^0.9.0\",\n \"isomorphic-fetch\": \"^2.2.1\",\n \"jquery\": \"^3.3.1\",\n \"node-sass\": \"^4.5.3\",\n \"sass-loader\": \"^6.0.6\",\n \"style-loader\": \"^0.13.1\",\n \"url-loader\": \"^0.5.7\",\n \"webpack\": \"^2.7.0\",\n \"webpack-hot-middleware\": \"^2.21.0\"\n },\n \"dependencies\": {\n \"babel-core\": \"^6.26.0\",\n \"babel-loader\": \"^7.1.2\",\n \"babel-polyfill\": \"^6.26.0\",\n \"babel-preset-env\": \"^1.6.1\",\n \"babel-preset-stage-3\": \"^6.24.1\",\n \"vue\": \"^2.5.13\",\n \"vue-loader\": \"^14.0.3\",\n \"vue-router\": \"^3.0.1\",\n \"vue-template-compiler\": \"^2.5.13\"\n },\n \"browserslist\": [\n \"> 1%\",\n \"last 2 versions\",\n \"not ie <= 8\"\n ]\n}","type":"blockquote","key":"76k1g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь открываем терминал менеджера пакетов и выполняем команды для получения всех необходимых пакетов. Если у вас данное окно не открыто, то его можно отобразить если зайти в меню Вид -> Другие окна -> Консоль диспетчера пакетов.","type":"unstyled","key":"4db7q"},{"data":{"image":{"id":"5ad1a27f3dceb74b285da950"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"eqq9a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для начала выполняем команду","type":"unstyled","key":"fs2up"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"dotnet restore","type":"blockquote","key":"cq88k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"После этого","type":"unstyled","key":"19r56"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"npm install","type":"blockquote","key":"f4t1o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":102,"style":"BOLD"}],"text":"Теперь переходим к редактированию представлений. Для начала изменим файл макета страницы Views/Shared/_Layout.cshtml.","type":"unstyled","key":"3g93i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n\n\n \n \n @ViewData[\"Title\"] - TestVuejs\n \n\n\n @RenderBody()\n\n\n \n @RenderSection(\"scripts\", required: false)\n\n","type":"blockquote","key":"2tctk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":51,"style":"BOLD"}],"text":"И наконец изменим файл главной страницы Views/Home/Index.cshtml следующим удалив все лишнее. Лишние файлы About и Contact можно удалить.","type":"unstyled","key":"fo6m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n@{\n ViewData[\"Title\"] = \"Главная\";\n}\n\n

Загрузка...

\n\n@section scripts {\n \n}","type":"blockquote","key":"4udld"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Создадим папку App в корне проекта. И добавим туда два файла.","type":"unstyled","key":"872h0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"BOLD"}],"text":"index.js","type":"unstyled","key":"an7ta"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import Vue from 'vue'\nimport VueRouter from 'vue-router'\nimport App from './App.vue'\n\nVue.config.productionTip = false\nVue.use(VueRouter)\n\nconst routes = [\n { \n path: '/', \n component: App\n }\n]\n\nconst router = new VueRouter({\n routes,\n mode: 'history'\n})\n\nnew Vue({\n el: '#app',\n template: \"

\",\n router\n})","type":"blockquote","key":"2pbp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":0,"style":"BOLD"}],"text":"App.vue","type":"unstyled","key":"9755j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n\n\n\n","type":"blockquote","key":"7hkbf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"После этого запускаем приложение, и проверяем результат. Не забудьте перевести режим запуска на приложение, вместо IIS.","type":"unstyled","key":"b8vrs"},{"data":{"image":{"id":"5ad1a27f0422b4c791a59387"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"ekice"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В результате получаем вывод приветствия на экран","type":"unstyled","key":"74bfe"},{"data":{"image":{"id":"5ad1a27f2394dfd9feff819e"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"4562j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В некоторых случаях может возникать следующая ошибка.","type":"unstyled","key":"d8fk4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Module build failed: Error: Missing binding \nC:\\Users\\vadim.shvanov\\Source\\Repos\\TestVuejs\\TestVuejs\\node_modules\\node-sass\\vendor\\win32-x64-57\\binding.node \nNode Sass could not find a binding for your current environment: Windows 64-bit with Node.js 8.x \nFound bindings for the following environments: - Windows 64-bit with Node.js 5.x","type":"unstyled","key":"41bkn"},{"data":{"image":{"id":"5ad1a27fd7bf21f72935991e"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"5v4gu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чтобы ее исправить зайдите в папку проекта из командной строки с правами администратора и выполните команду. Это должно исправить эту ошибку.","type":"unstyled","key":"8sott"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"npm rebuild node-sass","type":"blockquote","key":"fv43g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"На этом создание первого приложения завершено, в дальнейших выпусках мы продолжим разработку данного примера до полноценного приложения. Подписывайтесь, чтобы не пропустить новые выпуски.","type":"unstyled","key":"1c81a"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":47,"offset":19}],"inlineStyleRanges":[{"length":46,"offset":19,"style":"BOLD"}],"text":"Следующая статья: Создание Core.NET 2.0 веб-приложения на Vue.js ","type":"unstyled","key":"2gqvr"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":9,"offset":10}],"inlineStyleRanges":[],"text":"Источник: CODE BLOG","type":"header-two","key":"d2k0l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"hZ4M0uABQErRDKek0uot"}],"entityMap":{"0":{"data":{"url":"https://zen.yandex.ru/media/id/5a290483168a91eacced425b/znakomstvo-s-scss-pri-rabote-s-vuejs-5ad4343f00b3dd0ec800febd"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"url":"https://shwanoff.ru/core-vuejs-1/"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}

Hello World!