ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • asp.net mvc 5에서 vue.js 설정 및 사용하기
      공부/C# 2019. 7. 30. 00:11

      asp.net core의 경우에는 프레임워크 내에 SpaServices와 같은 라이브러리가 포함되어 있어 webpack 설정이 다소 용이해졌고 인터넷 조금 찾아보면 아래와 같이 템플릿으로 작성되어 있는 것들이 많이 있다.

       

      ※ SpaServices : https://github.com/aspnet/AspNetCore/tree/master/src/Middleware/SpaServices
      ※ SpaServices를 사용한 템플릿 : https://github.com/TrilonIO/aspnetcore-Vue-starter

      하지만 회사에서는 항상 원하는 버전을 선택할 수 없는 제약이 있어 asp.net core가 아닌 기존의 asp.net mvc5로 어플리케이션을 작성해야만 했다. asp.net mvc5의 경우에는 좀 시간이 지난 버전이다 보니 vue cli 3.0에 맞게 설정되어 있는 샘플을 찾기가 어려워 직접 vue cli 사이트와 webpack 사이트를 찾아보며 설정을 해야만 했다. 메인 프로그래밍 언어가 c#이다 보니 node.js및 webpack은 생소한 부분이 있었으나 긴 헤딩끝에 원하는 결과를 얻을 수 있었다. 

       

      1. Vue Cli 3.0 설정 파일의 사용

      처음에는 webpack 공부도 할겸 無에서 설정을 시작하여 어느 정도 완성되어 가던 중 현재 진행 중인 프로젝트에서 사용 하는 element-ui와의 버전 호환 문제로 현재 능력으로는 해결 불가능해 보이는 여러 가지 에러가 발생하여 다른 방법을 생각해 보게 되었다. 그래서 꼼수라면 꼼수지만 vue cli에서 제공하는 편리한 ui 및 간편한 설치 방법을 활용하게 되었다.

       

      ① https://cli.vuejs.org/guide/installation.html 에 설명되어 있는 대로 vue cli를 설치한다.

      1
      2
      3
      4
      npm install -g @vue/cli
       
      vue --version
      3.9.3
      		 cs

       

      ② https://cli.vuejs.org/guide/creating-a-project.html#vue-create에 따라서 신규 프로젝트를 작성한다.

      1
      2
      3
      4
      5
      6
      7
      8
      vue create aspnetmvc5-vuejs
       
      �🎉  Successfully created project aspnetmvc5-vuejs.
      �👉  Get started with the following commands:
       
       $ cd aspnetmvc5-vuejs
       $ npm run serve
       
      		 cs

       

      ③ 작성된 프로젝트 디렉토리로 이동한다. 디렉토리 내 파일 중 아래의 필요한 파일만을 그대로 가져다 사용할 것이다. 

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      |   babel.config.js
      |   package-lock.json
      |   package.json
      +---public
      |       favicon.ico
      |       index.html
      |
      \---src
          |   App.vue
          |   main.js
          |
          +---assets
          |       logo.png
          |
          \---components
                  HelloWorld.vue
      		 cs

       

       

       

      2. asp.net mvc5 프로젝트 작성하기

      ① visual studio를 기동하여, .net framework를 사용하는 asp.net mvc 프로젝트를 작성한다.

      Visual Studio 2019
      Visual Studio 2019

      ② asp.net mvc 프로젝트가 작성된 폴더에 vue cli가 만들어준 파일을 복사하고 npm install 로 패키지를 설치한다.

      1
      2
      3
      4
      5
      6
      > npm install
      npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\fsevents):
      npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
       
      audited 24187 packages in 7.476s
      found 0 vulnerabilities
      		 cs

       

       

      3. vue.js 멀티페이지 어플리케이션 설정하기

      ① vue cli 의 설정을 위해 루트 경로에 vue.config.js 파일을 추가한다. 멀티페이지 어플리케이션을 설정은 https://cli.vuejs.org/config/#pages 에 따라 진행한다.

       

      ② vue 프로젝트에서 가져온 파일들을 사용하여 HelloWorld 페이지를 만들어 보자.

       

      ③ 편의상 mvc 프로젝트의 Views 디렉토리와 유사한 형태로 구성하기 위해 src디렉토리를 아래와 같이 구성한다.

      src 디렉토리에 home 디렉토리를 만들고 그 안에 helloworld 디렉토리를 만들고 그 안에 vue 프로젝트에서 가져온 helloworld vue 컴포넌트 관련 파일들을 이동시킨다.

      Views 디렉토리 구조 src 디렉토리 구조
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      \---Views
          |   Web.config
          |   _ViewStart.cshtml
          |
          +---Home
          |       About.cshtml
          |       Contact.cshtml
          |       HelloWorld.cshtml
          |       Index.cshtml
          |
          \---Shared
                  Error.cshtml
                  _Layout.cshtml
      		 cs

       
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      +---src
      |   +---home [컨트롤러명]
      |   |   \---helloworld [액션명]
      |   |       |   App.vue
      |   |       |   main.js
      |   |       |
      |   |       +---assets
      |   |       |       logo.png
      |   |       |
      |   |       \---components
      |   |               HelloWorld.vue
      |   |
      |   \---templates
      |           basicView.ejs
      		 cs

       

       

      ④ 위의 구조에 맞게 vue.config.js 의 멀티페이지 설정을 한다. 각 페이지명은 [컨트롤러명]_[액션메소드명] 으로 설정한다. 

      ※ vue cli 내부적으로 html-webpack-plugin을 사용하도록 설정되어 있다. 플러그인의 상세 설정은 아래 url을 참고한다. 
      ☞ https://github.com/jantimon/html-webpack-plugin#options

      위 옵션 중에 본 설정에서 사용한 것들은 아래와 같다.

      Name Type Description

      title

      {String}

      생성 된 HTML 문서에 사용할 제목

      filename

      {String}

      HTML을 작성할 파일로써 Views 폴더 내의 .cshtml 작성 시 사용한다.

      template

      {String}

      템플릿의 webpack 상대 경로 또는 절대 경로를 지정

      inject

      {Boolean|String}

      모든 asset을 지정된 위치에 넣는다. false로 하여 수동으로 설정

      hash

      {Boolean}

      true이면 포함된 모든 스크립트 및 css 파일에 고유한 webpack 컴파일 해시를 추가. 캐시 무효화에 유용.

      cache

      {Boolean}

      변경된 파일만 내보냄.

      chunks

      {?}

      지정한 청크만 추가

       

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      module.exports = {
          filenameHashing: true, 
          publicPath: 'dist/',     
          pages: {
              home_helloworld: {
                  entry: 'src/home/helloworld/main.js',
                  template: 'src/templates/basicView.ejs',
                  filename: '../Views/Home/HelloWorld.cshtml',
                  hash: true,
                  inject: false,
                  cache: true,
                  title: 'Hello World',
                  chunks: ['chunk-vendors', 'chunk-common', 'home_helloworld']
              }
          }
      }
      		 cs

       

      ⑤ src/templates디렉토리 내에 .cshtml파일 생성에 사용할 basicView.ejs 템플릿을 작성한다.

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      @{
          ViewBag.Title = "<%= htmlWebpackPlugin.options.title %>";
          ViewBag.IsVueComponent = true;
      }
       
      @section styles {
          <% htmlWebpackPlugin.files.css.forEach(function(v, i){ %>
          <link href="<%= htmlWebpackPlugin.files.css[i] %>" rel="stylesheet" />
          <% }); %>
      }
       
      <div id="app">
       
      </div>
       
      @section scripts {
          <% htmlWebpackPlugin.files.js.forEach(function(v, i){ %>
          <script src="<%= htmlWebpackPlugin.files.js[i] %>"></script>
          <% }); %>
      }    
      		 cs

       

      ⑥ 빌드 완료시에 생성되는 css 파일을 참조를 추가하기 위해

      Views/Shared/_Layout.cshtml 파일의 <head>에 styles section을 추가한다.

      1
      2
      3
      4
      5
      6
      7
      8
      9
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
          <meta charset="utf-8" />
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>@ViewBag.Title - 내 ASP.NET 응용 프로그램</title>
          @Styles.Render("~/Content/css")
          @Scripts.Render("~/bundles/modernizr")
          @RenderSection("styles", false)
      </head>
      		 cs

       

      ⑦ Controllers/HomeController.cs에 HelloWorld 액션 메소드를 추가한다.

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      using System;
      using System.Collections.Generic;
      using System.Linq;
      using System.Web;
      using System.Web.Mvc;
       
      namespace AspNetMvc5_VueJs.Web.Controllers
      {
          public class HomeController : Controller
          {
              [HttpGet]
              public ActionResult HelloWorld() => View();
          }
      }
      		 cs

       

      ⑧ npm run build 명령어를 입력하여 vue 컴포넌트를 빌드한다.

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      > npm run build
       
      > new-app@0.1.0 build C:\workspace\vuejs\asp.net\AspNetMvc5-VueJs\AspNetMvc5-VueJs.Web
      > vue-cli-service build
       
       
      |  Building for production...
       
       DONE  Compiled successfully in 6134ms                                                                                                       01:27:23
        File                                     Size             Gzipped
       
        dist\js\chunk-vendors.2ce01813.js        82.83 KiB        29.95 KiB
        dist\js\home_helloworld.c1d000cf.js      4.63 KiB         1.66 KiB
        dist\css\home_helloworld.3e4589e0.css    0.33 KiB         0.23 KiB
       
        Images and other types of assets omitted.
       
       DONE  Build complete. The dist directory is ready to be deployed.
       INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html
      		 cs

       

      ⑨ Visual Studio에서 asp.net 어플리케이션을 기동하여 /Home/HelloWorld 경로로 이동하면 아래와 같은 HelloWorld 화면을 볼 수 있다. 

       

       

      4. HMR(Hot Module Replacement)

      webpack을 사용하며 가장 편리하다고 생각하는 기능이다. 이 기능이 없었을 때는 매번 빌드를 수행하여 브라우저를 수동으로 새로고침을 하며 작업을 진행해야 했다. 워치 모드를 사용하면서는 매번 빌드해야 하는 번거로움은 줄었으나 브라우저는 수동으로 새로고침을 해야 했다. 매번 빌드하지 않아도 되는 것만 해도 매우 편리하다고 생각했었는데 HMR을 사용하면 소스 파일을 저장할 때마다 빌드 및 브라우저 화면 갱신까지 자동으로 해주니 얼마나 편리한지... 

       

      https://logdirectory.tistory.com/14

       

      asp.net mvc 5에서 vue.js 설정 및 사용하기 2

      전편에 이어 Hot Module Replacement 기능을 사용하기 위한 devServer 설정 방법입니다. ※ webpack devServer proxy의 상세 설정은 아래 링크를 통해 확인할 수 있다. https://webpack.js.org/configuration/dev-..

      logdirectory.tistory.com

       

       

       

      저작자표시 비영리 변경금지

      '공부 > C#' 카테고리의 다른 글

      asp.net mvc 5에서 vue.js 설정 및 사용하기 2  (0) 2019.08.01
      C# Decimal 타입을 사용해야 하는 이유  (0) 2018.12.19

      관련글 관련글 더보기

    티스토리툴바