[Vue] vue-cli를 설치하고 사용하여 SPA 프로젝트 빌드

1. Vue-cli 설치

1.1 Vue-cli란?

1.2 Vue-cli 설치

1.3 Vue-cli를 사용하여 프로젝트 빌드

2. SPA 프로젝트

2.1 SPA 프로젝트 가져오기 및 실행

2.2 Vue 프로젝트 구조 설명

2.3 *.vue 파일이란?

2.4 SPA 프로젝트 기반의 완전한 라우팅

2.5 SPA 프로젝트 기반의 완전한 중첩 라우팅

1. Vue-cli 설치

1.1 Vue-cli란?

Vue CLI는 Vue.js 기반의 공식 스캐폴딩 도구로, vue.js+webpack 프로젝트 템플릿을 자동으로 생성하고 Vue.js 프로젝트를 위한 개발 환경을 빠르게 구축하는 데 사용됩니다. 개발자가 프로젝트 초기화, 빌드 도구 구성, 종속성 관리 등에 도움을 줄 수 있는 대화형 명령줄 인터페이스를 제공합니다. Vue CLI는 일반적으로 사용되는 일부 개발 도구와 모범 사례를 통합하여 개발자가 Vue.js 애플리케이션을 보다 효율적으로 개발할 수 있도록 합니다.

생성 명령: vue init webpack xxx

xxx는 프로젝트 이름을 직접 생성합니다.

먼저 vue, vue-cli, webpack, node 등 필요한 환경을 설치해야 합니다.

1.2 Vue-cli 설치

명령: npm install -g vue-cli

vue 설치가 성공했는지 확인하려면 cmd 창에 다음 명령어를 입력하세요. 참고: 여기서 V는 대문자입니다. 성공하면 버전 번호가 인쇄됩니다.

vue -V

1.3 Vue-cli를 사용하여 프로젝트 빌드

저장할 파일 경로에서 cmd 명령어 창을 열고 프로젝트 저장 디렉터리를 생성한 후 다음 명령어를 실행합니다.

vue init webpack 项目名

다음으로 설치 프로그램은 질의응답 설치 모드로 들어갑니다.
1) 프로젝트 이름: 프로젝트 이름, 입력 시 기본값은 ycxw_spa 이름입니다. Enter를 누르기만 하면 됩니다.
2) 프로젝트 설명: 프로젝트 설명, Enter만 누르면 됩니다
. 3) 작성자: 작성자, 아무렇게나 입력하거나 Enter 키를 누르세요.
4) Vue 빌드: 객관식 질문, 일반적으로 첫 번째 질문을 선택합니다.
Runtime + Compiler: recommended for most users //运行加编译，官方推荐
Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere//仅运行时
5) vue-router 설치: vue-router가 필요한지 여부에 관계없이 생성된 프로젝트에 관련 라우팅 구성 파일이 있도록 이를 사용하도록 선택합니다.
6) ESLint를 사용하여 코드 린트: ESLint를 사용하여 코드 오류를 제한할지 여부 스타일. N

7) 단위 테스트 설정 : 단위 테스트 설치 여부 N
8) Nightwatch로 e2e 테스트 설정 여부 : e2e 테스트 설치 여부 N
9) 프로젝트가 생성된 후 npm install을 실행해야 합니까?(권장) (화살표 사용) 키)
> 예, NPM을 사용합니다(이 옵션을 선택하세요)
예, Yarn을 사용합니다
. 아니요, 직접 처리하겠습니다.

모든 항목을 선택하고 Enter를 눌러 프로젝트를 생성합니다.

마지막으로 프로젝트 초기화 완료! 가 나타나고 다운로드가 완료됩니다.

2. SPA 프로젝트

2.1 SPA 프로젝트 가져오기 및 실행

이전에 빌드한 스파 프로젝트의 파일 경로를 찾아 프로그래밍 소프트웨어로 가져옵니다.

1. cmd 명령 창으로 돌아가서 다음 명령을 입력하십시오.

CD 프로젝트 이름(ycxw_spa)

2. npm run dev 명령을 입력하여 실행합니다.

이 페이지를 열어 다음을 실행하세요.

2.2 Vue 프로젝트 구조 설명

폴더: 빌드

기능: 이 폴더는 주로 webpack의 일부 구성에 사용됩니다.

파일: webpack.base.conf.js Webpack 기본 구성, 개발 환경, 프로덕션 환경은 모두 webpack.dev.conf.js 웹팩 개발 환경 구성 webpack.prod.conf.js 웹팩 프로덕션 환경 구성 build.js 프로덕션 환경 빌드
에 따라 다릅니다. script vue -loader.conf.js 이 파일은 .vue 파일을 처리하기 위한 구성 파일입니다.

폴더: 구성

기능: 구성 파일

파일:
dev.env.js 개발 환경 구성
prod.env.js 프로덕션 환경 구성
index.js 이 파일은 프록시 서버를 구성합니다. 예: 포트 번호 수정
node_modules는 package.json에 따라 생성된 npm 설치 패키지를 저장합니다. npm 설치 폴더 중 구성

폴더: src

기능: 소스 코드 디렉터리(개발 시 가장 일반적으로 사용되는 폴더)

파일: 비즈니스 코드가 저장되는
자산, 공유 스타일 및 사진 구성 요소입니다. 저장을 위한 구성 요소로 구분됩니다. 페이지는 구성 요소이며 페이지에도 많은 구성 요소가 포함됩니다. 라우터 라우팅을 설정합니다(라우팅과 라우팅 사이의 관계 정의). 구성 요소) App.vue vue 파일 입력 인터페이스 main.js는 vue 인스턴스를 생성하기 위한 App.vue에 해당하며, 이 역시 항목 파일이며 webpack.base.config.js의 항목 구성에 해당합니다.

정적 폴더:

저장된 파일은 webpack에서 처리되지 않으며 직접 참조할 수 있습니다. 예를 들어 swf 파일을 참조하고 싶다면 webpack에서 구성하면 됩니다. swf 접미사가 붙은 파일을 처리하는 로더의 경우 직접 배치할 수도 있습니다. 참조용으로 이 폴더에 있는 swf 파일을 확인하세요.

패키지.json:

이 파일에는 유용한 두 부분, 즉 스크립트의 명령 설정과 종속성 및 devDependency가 있습니다. 이는 각각 전역적으로 다운로드된 종속성 패키지와 로컬로 다운로드된 종속성 패키지에 해당합니다.

2.3 *.vue 파일이란?

*.vue 파일은 HTML과 유사한 구문을 사용하여 Vue 구성 요소를 설명하는 사용자 정의 파일 형식입니다. 각 .vue 파일에는 세 가지 유형의 최상위 언어 블록 ( <template>, <script> 및 <style> )이 포함되어 있습니다 . 이 세 부분은 각각 html, js 및 css를 나타냅니다.

참고:
HTML 코드는 <template></template>에 직접 래핑할 수 없습니다. 대신 모든 코드를 래핑하려면 html 태그를 내부에 배치해야 합니다. 일반적으로 <div></div> 태그는 다른 코드를 포함하는 데 사용됩니다. 루트 요소가 있는 한 다른 태그를 사용할 수 있습니다

<template>
    <div>
        ...
    </div>
</template>

js 코드는 <script> 태그에 작성되고 내보내기를 통해 내보내집니다.

<script>
    export default {
        name: 'App'
    }
</script>

2.4 SPA 프로젝트 기반의 완전한 라우팅

스파 프로젝트를 빌드할 때 이미 기본 환영 인터페이스를 만들었고 다음으로 해당 형식에 따라 사용자 정의 구성 요소만 만들면 됩니다.

1. src 아래의 구성 요소에 사용자 정의 구성 요소를 만듭니다.

Hone.vue

<template>
  <div>
    <h1>{
   
   { msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data () {
    return {
      msg: 'Welcome to 网站首页'
    }
  }
}
</script>

<style>
</style>

About.vue

<template>
  <div>
    <h1>{
   
   { msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'About',
  data () {
    return {
      msg: 'Welcome to 云村小威 个人网站'
    }
  }
}
</script>

<style>
</style>

2. 라우팅 정의 및 라우팅 경로 구성

라우터 폴더 아래 index.js 에 라우팅을 추가하고 라우팅 경로를 구성합니다 .

1. 먼저 Vue 및 Vue Router 모듈을 가져왔습니다.
import Vue from 'vue'
import Router from 'vue-router'
이렇게 하면 코드에서 Vue 및 Vue Router의 기능을 사용할 수 있습니다.

2. 다음으로 일부 구성요소를 가져왔습니다.
import HelloWorld from '@/components/HelloWorld'
import Home from '@/components/Home'
import About from '@/components/About'
이러한 구성 요소는 @ 기호를 사용하여 경로를 지정하여 다른 파일에 정의됩니다.

3. 그런 다음 Vue Router 플러그인을 사용합니다.
Vue.use(Router)
이런 방식으로 Vue는 Vue Router의 기능을 사용할 수 있습니다.

4. 마지막으로 라우팅 구성 정보가 포함된 새 라우터 인스턴스를 내보냅니다.
export default new Router({
  routes: [{
    path: '/',
    name: 'HelloWorld',
    component: HelloWorld
  }, {
    path: '/Home',
    name: 'Home',
    component: Home
  }, {
    path: '/About',
    name: 'About',
    component: About,
  }]
})
        이 구성에서는 여러 라우팅 규칙을 정의합니다. 각 라우팅 규칙에는 경로, 이름 및 구성 요소가 포함됩니다. 사용자가 다른 경로에 액세스하면 Vue Router는 구성된 규칙에 따라 해당 구성 요소를 로드합니다.

예를 들어:

        사용자가 루트 경로('/')에 액세스하면 'HelloWorld'라는 컴포넌트가 로드되고, 사용자가 '/Home' 경로에 액세스하면 'Home'이라는 컴포넌트가 로드되며, ' /About' 경로 'About'이라는 구성 요소가 로드되고 '/AboutMe' 및 '/AboutWebsite'라는 두 개의 하위 경로도 정의됩니다. 이는 각각 'AboutMe' 및 'AboutWebsite'라는 구성 요소에 해당합니다.

        이러한 방식으로 Vue Router의 구성을 완료했으며 이러한 라우팅 규칙을 사용하여 Vue 애플리케이션에서 페이지 탐색 및 구성 요소 로딩을 구현할 수 있습니다.

완전한 예:

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Home from '@/components/Home'
import About from '@/components/About'

Vue.use(Router)

export default new Router({
  routes: [{
    path: '/',
    name: 'HelloWorld',
    component: HelloWorld
  }, {
    path: '/Home',
    name: 'Home',
    component: Home
  }, {
    path: '/About',
    name: 'About',
    component: About
  }]
})

3. 경로를 트리거하는 버튼을 정의합니다.

Aue.js에 정의된 경로에 의해 트리거되는 버튼을 찾으세요.

<template>
  <div id="app">
    <img src="./assets/vue.png" style="width: 350px;height: 250px;"><br>
    <router-link to="/Home">首页</router-link>
    <router-link to="/About">关于本站</router-link>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App',
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

4. 테스트 실행

2.5 SPA 프로젝트 기반의 완전한 중첩 라우팅

1. 예: About.vue 구성 요소에 다른 구성 요소를 중첩할 준비를 합니다.

<template>
  <div>
    <h1>{
   
   { msg }}</h1><br />
    <router-link to="/AboutMe">关于我</router-link>
    <router-link to="/AboutWebsite">关于本站</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'About',
  data () {
    return {
      msg: 'Welcome to 云村小威 个人网站'
    }
  }
}
</script>

<style>
</style>

참고: <router-view></router-view>를 반드시 추가하세요.

Vue Router의 자리 표시자 태그입니다. 그 기능은 현재 경로에 해당하는 구성 요소 콘텐츠를 표시하는 것입니다.

Vue 애플리케이션에서 Vue Router를 사용하고 라우팅 규칙을 구성하면 <router-view></router-view> 태그는 현재 라우팅 경로를 기반으로 해당 구성 요소 콘텐츠를 동적으로 렌더링합니다.

2. 중첩되어야 하는 구성요소를 사용자 정의하세요.

AboutMe.vue

<template>
  <div>
    <img src="../assets/自拍照.png" style="width: 200px;height: 200px;"/>
  </div>
</template>

<script>
  export default {
    name: 'AboutMe'
  }
</script>

<style>
</style>

AboutWebsite.vue

<template>
  <div>
    {
   
   {msg}}
  </div>
</template>

<script>
  export default {
    name: 'AboutWebsite',
    data() {
      return {
        msg: '关于本站无需多言，帅说明了一切...'
      }
    }

  }
</script>

<style>
</style>

3. 효과 시연