programing

기존 멀티페이지에서 jQuery를 VueJS 2로 교체할 때 가장 좋은 방법.NET MVC 응용 프로그램

prostudy 2022. 5. 4. 21:33
반응형

기존 멀티페이지에서 jQuery를 VueJS 2로 교체할 때 가장 좋은 방법.NET MVC 응용 프로그램

나는 VueJ에 새로 왔다.s

나는 ASP가 여러 장 있다.VueJS를 사용할 NET MVC 앱(구성 요소, 양방향 바인딩, 검증, CRUD 작업)

현재 DOM 조작, Ajax 요청 등에 jQuery 사용

이 문제에 어떻게 접근해야 할까?다른 게시물(온라인)에서 너무 많은 생각의 변화를 받고 있다.

누가 나를 안내하고 시작할 수 있는 몇 가지 조언을 해줄 수 있니?

Vuejs 단일 파일 구성 요소와 번들로 Hello World 페이지(MVC View)를 사용하여 이 작업을 수행하는 방법을 보여주는 단계별 설명서는 매우 유용할 것이다.

번들거리는 과정이 복잡해 보인다.하지만 나는 내 코드에 REST를 사용하고 싶다.

읽어줘서 고마워

극단적 기본

나는 ASP에서 Vue를 가장 기본적인 방법으로 알고 있다.NET는 단지 당신의 프로젝트에 Vue 스크립트를 포함하기 위한 것이다.vue.js Nuget 패키지를 사용할 수 있으며, 이 패키지는 Vue 스크립트를 Scripts 디렉터리에 추가하고 MVC 보기에 개발 버전 또는 축소 버전을 포함하기만 하면 된다.

<script src="~/Scripts/vue.min.js"></script>

그런 다음 보기 cshtml에서 스크립트 블록을 추가하십시오.

<script>
    new Vue({
        el: "#app",
        data: {
            message: "Hello from Vue"
        }
    })
</script>

에, 어디에#app보기에 있는 요소를 가리킨다.구성 요소를 사용하려면 스크립트 블록에 추가하십시오.

<script>
    Vue.component("child", {
        template:"<h1>I'm a child component!</h1>"
    })

    new Vue({
        el: "#app",
        data: {
            message: "Hello from Vue"
        }
    })
</script>

Vue 템플릿을 수정하십시오.

<div id="app">
    {{message}}
    <child></child>
</div>

구성 요소를 많이 구축하는 경우(해당될 가능성이 높은 경우) vue.components.js 파일이나 이와 유사한 파일로 압축을 풀고 해당 파일에서 모든 구성 요소를 정의한 후 vue 스크립트 외에 보기에 포함하십시오.

단일 파일 구성 요소 사용

단일 파일 구성 요소를 사용하려면 단일 파일 구성 요소에 대한 node.js 빌드 프로세스를 ASP에 통합해야 한다.NET MVC 빌드 프로세스.

node.js를 설치하십시오.node.js를 설치한 후 webpack을 전체적으로 설치하십시오.

npm install webpack -g

패키지를 추가하십시오.당신의 프로젝트에 json.여기 내가 사용하는 것이 있다.

{
  "version": "1.0.0",
  "name": "vue-example",
  "private": true,
  "devDependencies": {
    "babel-core": "^6.23.1",
    "babel-loader": "^6.3.2",
    "babel-preset-env": "^1.1.8",
    "css-loader": "^0.26.1",
    "style-loader": "^0.13.1",
    "vue-loader": "^11.1.0",
    "vue-template-compiler": "^2.1.10",
    "webpack": "^2.2.0"
  },
  "dependencies": {
    "vue": "^2.2.1"
  }
}

나는 일반적으로 내 프로젝트에서 Vue 스크립트와 .vue 파일을 보관하기 위해 Vue라는 폴더를 만든다.Vue 빌드 프로세스의 시작 지점으로 사용할 파일을 추가하십시오.우리는 이 index.js(또는 당신이 원하는 모든 것)를 부를 수 있다.

import Vue from 'vue'
import App from './App.vue'

new Vue({
    el: '#app',
    render: h => h(App)
})

App.vue를 만드십시오.

<template>
    <div id="app">
        {{msg}}
    </div>
</template>

<script>
    export default {
      name: 'app',
      data () {
        return {
          msg: 'Welcome to Your Vue.js App'
        }
      }
    }
</script>

프로젝트에 webpack.config.js를 추가하십시오.여기 내가 사용하는 것이 있다.

module.exports = {
    entry: "./Vue/index.js",
    output: {
        path: __dirname,
        filename: "./Vue/bundle.js",
    },
    module: {
        loaders: [
            { test: /\.vue$/, loader: 'vue-loader' },
        ],
    }
}

이 구성은 웹 팩이 Vue 폴더에 컴파일되어 저장될 bundle.js 파일에 포함할 항목을 파악하기 위한 진입점으로 index.js를 지정한다.

프로젝트가 구축될 때마다 bundle.js 파일을 컴파일하기 위해 프로젝트 파일을 다음과 같이 수정한다.

<Target Name="RunWebpack">
  <Exec Command="npm install" />
  <Exec Command="webpack" />
</Target>
<Target Name="BeforeBuild" DependsOnTargets="RunWebpack"></Target>

이렇게 하면 필요한 npm 패키지를 설치한 다음 웹 팩을 실행하여 번들.js를 구축한다.빌드 서버에 프로젝트를 구축하는 경우 이 작업이 필요하다.

당신은 . 다니다가 보기이다.js.js 을일 을 하면 된다.#appvue.js나 vue.min.js는 포함하지 않아도 된다.그것은 묶음 안에 있을 것이다.

개별 단일 파일 구성 요소 컴파일

우리는 단일 파일 구성요소를 사용하기를 원했지만, 모든 것을 하나의 스크립트로 묶고 싶지 않은 경우가 있다는 것을 발견했다.이렇게 하려면 주로 webpack.config.js만 수정하면 된다.

const fs = require("fs");
const path = require("path");

// build an object that looks like 
// {
//      "filename": "./filename.vue"
// }
// to list the entry points for webpack to compile.
function buildEntry() {
    const reducer = (entry, file) => { entry[file.split(".").shift()] = `./Vue/${file}`; return entry; };

    return fs.readdirSync(path.join(__dirname, "Vue"))
        .filter(file => file.endsWith(".vue"))
        .reduce(reducer, {});
}

module.exports = {
    entry: buildEntry(),
    output: {
        path: path.join(__dirname, "Vue"),
        filename: "[name].js",
        library: "[name]"
    },
    module: {
        loaders: [
            { test: /\.vue$/, loader: 'vue-loader' },
        ],
    }
}

이 웹 팩 구성은 모든 개별 단일 파일 구성 요소에 대한 스크립트 파일을 구축할 것이다.그런 다음 위의 "극단적으로 기본" 기법을 사용하는 페이지에 해당 스크립트를 포함시키고 Vue의 구성 요소를 전체적으로 노출하거나 Vue의 일부로 사용하면 된다.예를 들어, 내가 모달(모달)을 가지고 있다면.vue, 나는 ASP에 Modal.js를 포함시킬 것이다.NET MVC 보기 및 Vue에 노출하는 방법

Vue.component("Modal", Modal);

또는

new Vue({
    ...
    components:{
        "Modal": Modal
    }
})

웹 팩은 구성성이 매우 뛰어나므로 다른 접근 방식을 취하여 페이지마다 단일 번들을 구축하는 것이 좋다.

마지막으로 개발 및 실행 중에 명령줄을 열 수 있음

webpack --watch

프로젝트에서 직접 그리고 번들 또는 개별 구성요소를 저장할 때마다 구축될 것이다.

나는 ASP와 Vue를 설치하려고 했다.NET MVC 5(.@Bert가 위에 게재한 글을 따라 NET 4.5, Core!) 하지만 나는 많은 문제에 부딪혔기 때문에 나는 다른 방법을 찾았다.

(경고: vue.js를 자체 구성 요소와 함께 사용하려면 npm, webpack용 node.js를 설치하여 번들을 빌드하고 vue-loader를 구문 분석해야 함)

  1. node.js 설치
  2. Node.js 명령 프롬프트를 실행하고 Visual Studio 프로젝트 폴더로 이동하십시오(여기서 *.csproj 파일이 배치됨).
  3. 유형:npm init -y입력 후 입력 - 종속성 및 기본 설정이 있는 package.json 파일을 생성해야 함
  4. Vue에 필요한 로더를 추가하십시오(이 로더가 없으면 *.vue 파일을 javascript에 구문 분석할 수 없음). npm install --save-dev vue-loader vue-template-compiler

  5. 웹 팩을 추가하고(광택적으로) 패키지에 저장하십시오.json 파일:

    a)npm install -g webpack

    b)npm install –-save-dev webpack

  6. 마지막으로 Vue.js를 프로젝트에 추가하십시오.npm install --save vue

일단, 내 소포.json은 다음과 같이 보인다.

{
  "name": "VueExample",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "vue-loader": "^14.2.1",
    "vue-template-compiler": "^2.5.16",
    "webpack": "^4.2.0"
  },
  "dependencies": {
    "vue": "^2.5.16"
  }
}
  1. 다음 단계는 웹 팩 구성 - Visual Studio로 돌아가서 project webpack.config.js 파일에 다음 코드를 붙여넣으십시오.

module.exports = {
    entry: './Vue/index.js',
    output: {
        path: __dirname,
        filename: './Vue/dist/bundle.js'
    },
    devtool: 'source-map',
    module: {
        rules: [
            {
                test: /\.vue$/,
                exclude: /node_modules/,
                loader: 'vue-loader'
            }
        ]
    }
};

  1. 프로젝트에 Vue 폴더를 추가하고 두 개의 파일(index.js 및 App)을 프로젝트에 배치하십시오.vue:

인덱스.js:

import Vue from 'vue'
import App from './App.vue'

new Vue({
    el: '#app',
    render: h => h(App)
});

App.vue:

<template>
    <div id="app">
        {{msg}}
    </div>
</template>

<script>
    export default {
      name: 'app',
      data () {
        return {
          msg: 'Welcome to Your Vue.js App'
        }
      }
    }
</script>

  1. 샘플 인덱스.cshtml 파일:

@{
    ViewBag.Title = "Home Page";
}

<div id="app">

</div>

@section scripts{
    <script src="~/Vue/dist/bundle.js"></script>
}

  1. 2에서 열린 Node.js 명령 프롬프트로 돌아가서 다음을 입력하여 웹 팩을 실행하십시오.webpack, 입력 후 ~/Vue/dist/bundle.js에서 찾을 수 있는 bundle.js를 만드십시오.
  2. Visual Studio에서 프로젝트를 만들고 실행하십시오.

나는 @1_bug에서 제공하는 많은 답을 사용하여 내 ASP에서 웹 팩과 번들링하는 Vue Single File Component를 설정했다.NET MVC 4.5 프로젝트.

그러나 webpack 명령을 사용하여 번들을 빌드하려고 할 때 다음과 같은 오류를 받았다.

"vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config."

이것을 조사하면서 나는 vue-loader의 최신 업데이트 (v15)가 webpack.config.js 파일을 약간 변경해야 한다는 것을 알았다.

vue-loader 웹 사이트(https://vue-loader.vuejs.org/migrating.html),에서 다음과 같이 webpack.config.js 파일의 vue-loader 플러그인을 참조해야 함:

// webpack.config.js
const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
  // ...
  plugins: [
    new VueLoaderPlugin()
  ]
}

참조URL: https://stackoverflow.com/questions/42541315/best-approach-when-replacing-jquery-with-vuejs-2-in-multi-page-existing-net-mvc

반응형

'programing' 카테고리의 다른 글

vue 구성 요소에서 슬릭 슬라이더가 작동하지 않음  (0) 2022.05.04
vuej에서 여러 하위 구성 요소에서 발생하는 이벤트를 캡처할 수 있는 방법이 있는가?  (0) 2022.05.04
Vue.js 클래스 이름으로 프로펠러 값 사용  (0) 2022.05.04
순기능의 이점  (0) 2022.05.04
Java Map이 컬렉션을 확장하지 않는 이유  (0) 2022.05.04

'programing'의 다른글

  • 현재글기존 멀티페이지에서 jQuery를 VueJS 2로 교체할 때 가장 좋은 방법.NET MVC 응용 프로그램

관련글

댓글

티스토리툴바