[Vue+NodeJS] vue 라우팅 및 NodeJS 환경 구축(Windows 버전)

News 2023-10-05 06:35:19 views: null

1. Vue 라우팅

1. Vue 라우팅이란 무엇입니까?

        Vue 라우팅은 Vue.js 프레임워크에서 SPA ( 단일 페이지 애플리케이션 ) 를 구현하는 데 사용되는 라우팅 관리자 입니다 . 이를 통해 여러 페이지 간의 탐색을 생성하고 URL 변경을 통해 다양한 구성 요소를 동적으로 로드 할 수 있습니다 . Vue 라우팅은 선언적 방식으로 페이지 탐색 규칙을 정의하고 라우팅 링크, 라우팅 보기 및 탐색 가드와 같은 일부 내장 탐색 구성 요소 및 기능을 제공합니다 .

        Vue 라우팅을 통해 다양한 경로에 해당하는 구성 요소를 정의한 다음 페이지의 라우팅 링크를 사용하여 해당 페이지 전환을 트리거할 수 있습니다. Vue 라우팅은 동적 경로 매개변수, 쿼리 매개변수 및 중첩 경로 도 지원하므로 복잡한 애플리케이션 탐색 구조를 구축하고 페이지 간 논리를 전환할 수 있습니다.

Vue 라우팅은 사용자 신원 확인, 라우팅 전환 효과 처리 등과         같은 라우팅 전환 전후에 일부 논리적 작업을 수행할 수 있는 탐색 가드 기능도 제공합니다.

        Vue 라우팅은 페이지 탐색 및 구성요소 전환을 구현하는 Vue.js 프레임워크의 핵심 도구로, 대화형의 원활한 단일 페이지 애플리케이션을 보다 쉽고 효율적으로 구축 할 수 있습니다 .

1. 1. SPA란 무엇인가요?

   단일 페이지 웹 애플리케이션 (SPA)은 웹 페이지가 하나만 있는 애플리케이션입니다.

   단일 HTML 페이지를 로드하고 사용자가 애플리케이션과 상호 작용할 때 해당 페이지를 동적으로 업데이트하는 웹 애플리케이션입니다.

  •    단일 페이지 애플리케이션:

     페이지가 처음 로드될 때만 이후의 각 요청은 필요한 데이터만 가져오고, 그런 다음 페이지의 js를 구문 분석하여 얻은 데이터가 페이지에 표시됩니다.

  •    기존의 다중 페이지 애플리케이션:

     기존 다중 페이지 애플리케이션의 경우 서버에 대한 각 요청은 전체 페이지를 반환합니다.

  •    이점

     요청량 감소, 페이지 응답 가속화, 서버 부담 감소, 사용자 경험 향상

2. Vue 라우팅 아이디어 및 예시

2.1 아이디어

라우팅 아이디어

  1. Vue.vue-router의 js 종속성을 도입했는지 확인하세요.
  2. 먼저 구성 요소를 정의 해야 합니다 (즉, 다른 페이지 효과를 표시하려면).
  3. 컨테이너에 다양한 구성요소를 넣어야 함 ( 라우팅 컬렉션)
  4. 경로 모음을 라우터로 조립
  5. Vue 인스턴스에 경로를 마운트합니다.
  6. 앵커 포인트 정의
  7. 도약

2.2 예

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>路由</title>
    <!--  jQuery-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <!--  vue.js-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
    <!--    导入router js-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue-router/2.6.0/vue-router.js"></script>
</head>
<body>
<div id="app">
    <!--触发路由事件按钮-->
    <router-link to="/index">首页</router-link>

    <router-link to="/home">介绍</router-link>

    <!--    定义锚点/路由内容-->
    <router-view></router-view>
</div>
</body>
<script type="text/javascript">
    // 定义两个组件

    var Index = Vue.extend({
        template: '<div>这是一个首页</div>'
    });
    var Home = Vue.extend({
        template: '<div>这是一个介绍666</div>'
    });
    // 定义组件与路径对应关系
    var routes = [{
        component: Index, path: '/index'
    }, {
        component: Home, path: '/home'
    }];
    // 通过路由关系获取路由对象 router
    var router = new VueRouter({routes});
    new Vue({
        el: '#app',
    // 将路由对象挂载到vue实例中
        router
    })
</script>
</html>

효과 시연

2. 노드 환경 구축

1. Node.js란 무엇인가

Node.js 는 이벤트 중심의 비차단 I/O 모델을 사용하는 Chrome V8 엔진을 기반으로 구축된 JavaScript 런타임 환경으로 , JavaScript가 서버 측에서 실행될 수 있도록 하여 JavaScript가 PHP, Python, Perl 및 Ruby. 서버측 언어와 동등한 스크립팅 언어입니다  . 
 

전통적인 JavaScript 실행 환경(예: 브라우저)과 비교할 때 Node.js는 다음과 같은 특징을 가지고 있습니다.

  1. 이벤트 중심 : Node.js는 이벤트 중심의 비차단 I/O 모델을 사용하므로 많은 수의 동시 요청을 처리할 때 더 효율적입니다.
  2. 단일 스레드 : Node.js는 단일 스레드 방식으로 실행되지만 이벤트 루프 메커니즘과 비동기 작업을 통해 다른 작업을 차단하지 않고 많은 수의 동시 요청을 처리할 수 있습니다.
  3. 크로스 플랫폼 : Node.js는 Windows, Linux, macOS를 포함한 여러 플랫폼에서 실행될 수 있습니다.
  4. 가볍고 효율적입니다 . Node.js의 런타임 환경은 Java 및 PHP와 같은 기존 서버 측 언어보다 메모리 공간이 적고 처리 성능이 높습니다.

Node.js 는 웹사이트 백엔드, 명령줄 도구, 실시간 통신 애플리케이션, API 서버 등을 포함한 다양한 유형의 애플리케이션을 구축하는 데 사용할 수 있습니다. 풍부한 표준 라이브러리와 타사 모듈을 제공하므로 개발자는 고성능 애플리케이션을 신속하게 구축할 수 있습니다.

요약하다

Node.js는 서버 측에서 JavaScript를 실행하기 위한 런타임 환경으로, 이벤트 기반 비차단 I/O 모델을 통해 고성능 네트워크 애플리케이션을 보다 쉽고 효율적으로 구축할 수 있습니다.

2. npm이란 무엇입니까?

        npm은 실제로 Node.js의 패키지 관리자입니다. 오픈 소스 JavaScript 코드 모듈을 관리하고 공유하기 위한 도구입니다.

        npm을 통해 개발자는 자신의 프로젝트에 다양한 JavaScript 모듈을 쉽게 도입, 설치, 업데이트 및 삭제할 수 있습니다 . npm은 다양한 기능과 용도를 다루는 수만 개의 오픈 소스 모듈을 포함하는 거대한 모듈 웨어하우스를 제공합니다. 개발자는 npm을 통해 필요한 모듈을 검색 하고 프로젝트에 추가할 수 있습니다.

        npm으로 모듈을 관리하는 것은 매우 간단합니다. 명령줄에 해당 명령을 입력하면 모듈 설치, 제거, 업데이트 등의 작업을 완료할 수 있습니다. npm은 또한 프로젝트가 정상적으로 실행될 수 있도록 모듈 간의 종속성을 자동으로 해결할 수 있는 완전한 종속성 관리 시스템을 제공합니다.

        npm은 단순한 모듈 관리 도구가 아닌 커뮤니티이자 생태계입니다. 개발자는 다른 개발자가 사용하고 기여할 수 있도록 JavaScript 모듈을 npm 저장소에 게시할 수 있습니다. npm을 통해 개발자는 쉽게 다른 개발자와 코드를 공유하고, 문제를 해결하고, 오픈 소스 프로젝트에 대해 배울 수 있습니다 .

        요약: npm은 JavaScript 코드 모듈을 관리하고 공유하는 데 사용되는 Node.js용 패키지 관리자입니다. 모듈 설치 및 관리 프로세스를 단순화하여 JavaScript 개발을 보다 효율적이고 편리하게 만듭니다.

3. 환경 구축

3.1 node.js 다운로드

해당 버전을 다운받고 저는 Windows 버전을 사용합니다 | Node.js(nodejs.org) icon-default.png?t=N7T8https://nodejs.org/zh-cn/download

  3.2 압축해제

다운로드한 Node.js를 자신의 경로에 압축을 풀고 나중에 위치를 변경하지 마세요.여기에는 두 가지 버전이 있지만 영향을 미치지 않습니다.필요에 따라 선택하시면 됩니다.

그런 다음 압축이 풀린 디렉터리에 node_global 및 node_cache 두 파일을 수동으로 만듭니다 .

새 디렉터리 설명
           node_global : npm 전역 설치 위치
           node_cache : npm 캐시 경로

  3.3 환경 변수 구성

환경 변수를 구성 하려면 컴퓨터의 고급 시스템 설정을 입력하세요.

  1. NODE_HOME 추가 : 압축을 푼 디렉터리 찾기
  2. PATH를 수정 하고 끝에 %NODE_HOME%;%NODE_HOME%\node_global; 을 추가합니다.
  3. 설치 성공 여부 테스트: win+R cmd 창을 열고 다음 명령을 출력하여 NodeJs 및 npm의 버전 번호를 출력합니다.
    1. 노드 -v
    2. npm -v

일부 컴퓨터는 환경 변수를 구성할 때 node_global 폴더를 생성합니다.

그렇지 않은 경우 직접 node_global 폴더를 수동으로 생성 해야 합니다 .

3.4 npm 전역 모듈 경로 및 캐시 기본 설치 위치 구성


      cmd를 열고 다음 명령을 별도로 실행하십시오.

npm 구성 세트 캐시 "설치 경로\node_cache"

npm config set cache "D:\zking App\Node.js\node-v18.16.1-win-x64\node-v18.16.1-win-x64\node_cache"

npm 구성 세트 접두사 "설치 경로\node_global"

npm config set prefix "D:\zking App\Node.js\node-v18.16.1-win-x64\node-v18.16.1-win-x64\node_global"
  1. 1단계에서 생성한 node_global( npm 전역 설치 위치 )과 node_cache( npm 캐시 경로 )를 npm으로 연결합니다 .
  2. 명령 실행이 중단되면 C:\Users\username\.npmrc를 삭제하고 다시 실행할 수 있습니다. (사용자 이름: 현재 컴퓨터의 사용자 이름입니다)
  3. "D:\zking App\Node.js\node-v18.16.1-win-x64\node-v18.16.1-win-x64\node_global", 큰따옴표가 누락될 수 없습니다.

  • 첫 번째 명령을 실행하면 node_cache 폴더에 하나, 사용자 폴더에 하나, 두 개의 파일이 생성됩니다.
     

3.5 다운로드 속도 향상을 위해 npm 이미지 수정

cnpm을 사용하거나 --registry를 직접 설정할 수 있으며, --registry를 설정하는 것이 좋습니다.

    3.5.1 --레지스트리

  • Taobao 소스 설정  
    npm config set registry https://registry.npm.taobao.org/

  • 소스보기, 설정된 소스를 모두 볼 수 있습니다.
    npm config get registry


     

  • 실제로 이 단계의 내용은 C:\Users\username\.npmrc 파일에 다음 코드를 추가하는 것입니다.

               레지스트리=https://registry.npm.taobao.org


    3.5.2cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
  1. cnpm 설치 후 npm 명령어 대신 cnpm 명령어를 사용하시면 되는데 이때 npm은 계속 공식 이미지를 사용하고 cnpm은 국내 이미지를 사용하게 됩니다.
  2. 원래 설정으로 복원하려면 다음을 수행하십시오.
    npm config set registry https://registry.npmjs.org/

3.6 설치 결과 확인

npm 전역 경로 설정 확인

  • 이 단계에서는 모듈을 전역적으로 설치하고 평가할 수 있습니다.
    npm install webpack -g

  • 위 명령이 실행되면 다음 파일이 생성됩니다:
     %node_home%\node_global\node_modules\webpack

         참고: 다운로드 도중 경고가 발생하더라도 걱정하지 마시고, 오류가 발생하면 다운로드한 깨진 파일을 삭제하고 다시 다운로드하시기 바랍니다.

4. 테스트 노드

Node 프로젝트를 찾거나, 자신이 가지고 있는 Node 프로젝트를 이용하세요. 여기서는 Node 프로젝트를 이용하여 테스트해보겠습니다.

Node 프로젝트의 루트 디렉터리에 들어가서 아래 그림에 따라 npm i



명령을 입력 하고 로드될 때까지 기다립니다.

걸리는 시간을 볼 수 있습니다. 명령이 실행 되면 프로젝트의 루트 디렉터리에 npm 원격 라이브러리에서 다운로드한 다음 프로젝트에 "설치된" 모듈이 포함된 추가 node_modules
폴더 가 있게 됩니다 .


프로젝트를 시작하는 명령을 입력하세요

npm run dev

로드될 때까지 조용히 기다리면 마침내 성공적으로 시작됩니다.

내 공유는 여기서 끝납니다. 누구나 댓글 영역에서 토론할 수 있습니다! ! !

Supongo que te gusta

Origin blog.csdn.net/weixin_74383330/article/details/133086921
Recomendado
Clasificación
Diario
Más
2024-05-30(0)
2024-05-29(1)
2024-05-28(0)
2024-05-27(1)
2024-05-26(1)
2024-05-25(0)
2024-05-24(13)
2024-05-23(34)
2024-05-22(10)
2024-05-21(34)

Code World

© 2018 codetd.com