vue scaffolding public에 무엇을 넣어야 할까요?

일반적으로 일부 정적 리소스(그림)는 webpack 패키징 시 dist 폴더에 그대로 패키징됩니다. 공용 디렉터리의 파일은 Webpack에서 처리되지 않으며 최종 패키징 디렉터리(기본값은 dist/static)에 직접 복사됩니다. 이러한 파일은 "vue.config.js에 따라 달라지는 절대 경로를 사용하여 참조되어야 합니다. " publicPath 구성에서 기본값은 "/"입니다.

이 튜토리얼의 운영 환경: windows7 시스템, vue3 버전, DELL G3 컴퓨터.

1. Vue 스캐폴딩 설치

1. 1단계(처음에만 실행): @vue/cli를 전역적으로 설치합니다.

npm i @vue/cli -g

2. 프로젝트를 생성하려는 디렉터리로 전환합니다. 프로젝트

vue create XXX

3 , 프로젝트 시작

npm run serve

비고:

1.npm Taobao 미러 주소

npm config set registry https://registry.npm.taobao.org

2. Vue 스캐폴딩은 모든 웹팩 관련 구성을 숨깁니다.

vue inspect > output.js

2. 목적 vue-cli 스캐폴딩 초기화 프로젝트의 각 폴더

node_modules 폴더 : 프로젝트 종속성 폴더

public 폴더:

에는 일반적으로 일부 정적 리소스(그림)가 배치됩니다. public 폴더에 있는 정적 리소스는 webpack이 패키징할 때 dist 폴더에 그대로 패키징된다는 점에 주목할 필요가 있습니다.

public 폴더에 있는 모든 정적 리소스는 webpack을 거치지 않고 간단히 복사됩니다. 절대 경로를 통해 참조해야 합니다.

웹팩에서 처리하고 다음과 같은 이점을 얻을 수 있도록 모듈 종속성 그래프의 일부로 리소스를 가져오는 것이 좋습니다.

• 스크립트와 스타일시트가 함께 압축되어 번들로 제공되므로 추가 네트워크 요청이 방지됩니다.
• 파일이 손실되면 사용자 측에서 404 오류가 생성되는 대신 컴파일 중에 직접 오류가 보고됩니다.
• 최종 생성된 파일 이름에는 콘텐츠 해시가 포함되므로 브라우저가 이전 버전을 캐싱하는 것에 대해 걱정할 필요가 없습니다.

공개 디렉터리는 대체 경로를 제공합니다. 절대 경로를 통해 참조하는 경우 애플리케이션이 배포될 위치에 주의하세요. 애플리케이션이 도메인 루트에 배포되지 않은 경우 URL에 대해 publicPath 접두사를 구성해야 합니다. public/index.html 또는 html-webpack-plugin을 통해 템플릿으로 사용되는 기타 HTML 파일의

• 
  <%= BASE_URL %>:

<link rel="icon" href="<%= BASE_URL %>favicon.ico">

• 를 통해 링크 접두어를 설정해야 합니다. 템플릿에서 먼저 기본 URL을 구성 요소에 전달해야 합니다.

data () {
  return {
    publicPath: process.env.BASE_URL
  }
}

그런 다음:

<img :src="`${publicPath}my-image.png`">

When 공용 파일을 사용하려면 폴더

• 빌드 출력에 파일 이름을 지정해야 합니다.
• 수천 개의 이미지가 있고 해당 경로를 동적으로 참조해야 합니다.
• 일부 라이브러리는 webpack과 호환되지 않을 수 있습니다. 이 경우 독립 라이브러리를 사용해야 합니다.

vue-cli3.0에는 정적 리소스, 즉 public과 자산을 배치하기 위한 두 개의 디렉터리가 있습니다.

변경되지 않는 공용 위치 파일(vue-cli2.x의 static과 동일)
public/ 디렉토리의 파일은 Webpack에서 처리되지 않습니다. 최종 패키징 디렉토리에 직접 복사됩니다(기본값은 거리/정적). 이러한 파일은 절대 경로를 사용하여 참조되어야 합니다. 이는 vue.config.js의 publicPath 구성에 따라 다릅니다.

변경될 수 있는 자산 저장소 파일
자산 디렉터리의 파일은 webpack에 의해 처리되고 모듈 종속성으로 구문 분석되며, 상대 경로 형식만 지원됩니다.

간단히 말하면 public은 다른 사람의 js 파일(즉, 변경되지 않음)을 넣고, Asset은 직접 작성한 js 파일(변경이 필요한 파일)을 넣습니다

src 폴더

    assets 폴더 : 일반적으로 정적 리소스(여러 구성 요소가 공유하는 정적 리소스)를 저장하는 데 사용됩니다. webpack이 자산 폴더에 정적 리소스를 패키징할 때 webpack은 정적 리소스를 모듈로 처리하고 JS 내부에서 패키징한다는 점에 유의할 필요가 있습니다. 파일. ㅋㅋㅋ >                          # .gitignore: git 버전 제어에 의해 무시되는 구성(일반적으로 건드리지 않음)

     babel.config.js: Babel의 구성 파일(ES6 관련 구문을 ES5로 번역하는 것과 같은 번역기와 동일하며 더 나은 호환성으로 일반적으로 건드리지 않음) )

Package.json: 애플리케이션 패키지 구성 파일(프로젝트 ID 카드, 기록 프로젝트 이름, 프로젝트 종속성, 프로젝트 실행 및 기타 정보와 유사)

Package-lock.json: 패키지 버전 제어 파일(캐싱 파일)

README. md: 애플리케이션 설명 파일(설명 파일)

vue.config.js: 스캐폴딩을 사용자 정의할 수 있습니다. 구성 방법은 Vue CLI

기타 폴더:

• pages 파일을 참조하세요. 폴더: 라우팅 관련 구성요소 저장(페이지를 뷰로 대체할 수도 있음)

• 라우터 폴더: 라우팅 구성 파일

• store 폴더: vuex 관련 파일

• mock 폴더: 모의 시뮬레이션 데이터 저장

3. 스캐폴딩 작업 환경

vue-cli 스캐폴딩 환경: vue 프로젝트 작성을 지원하기 위한 node + webpack 기반

기본 항목 파일 main.js: 모든 코드는 main.js를 사용하여 직접 또는 간접적으로 생성되어야 합니다. 도입 관계

패키징 프로세스: 패키징을 실행할 때 webpack은 항목 관계를 기반으로 코드 맵을 구축하고 해당 코드를 로더/플러그인으로 번역하여 .js 파일로 출력하고 인덱스에 삽입합니다. html 실행

① main.js → 항목 패키징 및 실행

② Vue.comComponent("컴포넌트 이름", 컴포넌트 객체) → Vue용 전역 컴포넌트 등록

실행 순서: 먼저 main.js를 통해 전역 컴포넌트를 등록합니다. 파일을 선택한 다음 구성 요소 내에서 이 전역 구성 요소를 사용하세요

[관련 권장 사항: vuejs 비디오 튜토리얼, 웹 프론트 엔드 개발]

위 내용은 vue scaffolding public에 무엇을 넣어야 할까요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!