텐 발전 프로젝트 프론트 엔드, NUXT 항목 (X)

면책 조항 :이 문서는 블로거 원본입니다, 추적 에 의해-SA의 CC 4.0 저작권 계약, 복제, 원본 소스 링크이 문을 첨부 해주세요.

이 링크 : https://blog.csdn.net/Eknaij/article/details/96965076

A, NUXT 프로필

Nuxt.js 경량 애플리케이션 프레임 워크 Vue.js에 기초하여, 서버 측 표현 (SSR) 애플리케이션을 생성하는데 사용될 수 있고, 또한 고정 위치 엔진으로서 작용할 수있는 것은 고급 계층 코드 구조 및 열적 부하와 다른 특성을 갖는 고정 사이트 응용 프로그램 생성 .
공식 웹 사이트 주소 : HTTPS : //zh.nuxtjs.org/

두, NUXT 환경 구축

(1) 제공
(5.2.0 운송 NPM의 기본부터 NPX) NPX를 설치해야합니다
(2) cmd를 인터페이스가 실행
npx create-nuxt-app tensquare
(NPM -v 버전을 볼 수 있습니다)을 입력 할 수 있습니다 당신이 npm6.1 버전보다 더 많은 경우
npm init nuxt-app tensquare.
여기에 그림 삽입 설명
빨간색 상자를 여기에 선택 원사, 그래서 또한 원사 설치해야하기 때문에, 원사를 선택할 또는 오류가 될 것입니다 확인
npm install -g yarn
(3) VS 연을, package.json을 수정

  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },

(4) tensquare 디렉토리에 실행
cd tensquare
yarn install
의존성의 설치
여기에 그림 삽입 설명
(5) 실행

yarn dev

여기에 그림 삽입 설명
로컬 호스트 : 브라우저 열기 3000, 다음 페이지는 친구가 될 수 참조 :

두, nuxt 디렉토리 구조 분석

（1）资源目录 assets
用于组织未编译的静态资源如 LESS、SASS 或 JavaScript。
（2）组件目录 components
用于组织应用的 Vue.js 组件。Nuxt.js 不会扩展增强该目录下 Vue.js 组件，即这些组件不会像页面组件那样有 asyncData 方法的特性。
（3）布局目录 layouts
用于组织应用的布局组件。
（4）页面目录 pages
用于组织应用的路由及视图。Nuxt.js 框架读取该目录下所有的 .vue 文件并自动生成对应的路由配置。
（5）插件目录 plugins
用于组织那些需要在根vue.js应用实例化之前需要运行的 Javascript 插件。
（6）nuxt.config.js 文件
nuxt.config.js 文件用于组织Nuxt.js 应用的个性化配置，以便覆盖默认配置。

三、NUXT快速入门

1.定义布局

一般网页的布局主要分为三部分，头尾以及中央的主体，一般情况下头部的导航信息以及尾部的版权信息是不变的，所以我们可以将头部和尾部单独提取出来：
修改layouts目录下default.vue

<template>
  <div>
    <header>头部</header>
    <nuxt />
    <footer>尾部</footer>
  </div>
</template>

刷新一下页面就可以在页面上面看到“头部”的字样，页面下方则显示尾部，页面的中央主体部分 <nuxt />，是pages目录下的index.vue

2.页面路由

（1）在page目录创建文件夹
여기에 그림 삽입 설명
（2）recruit目录创建index.vue

<template>
  <div>
    招聘列表
  </div>
</template>

（3）gathering目录创建index.vue

<template>
  <div>
    活动列表
  </div>
</template>

NUXT 루트 디렉토리에 자동으로, 아니 필기에 따라 생성됩니다.
default.vue, 헤더 추가 탐색 링크를 수정

    <header>头部
      <router-link to="/">首页</router-link>
      <router-link to="/recruit">招聘</router-link>
      <router-link to="/gathering">活动</router-link>
    </header>

탐색 링크를 클릭 라우팅의 효과를 테스트하기 위해
여기에 그림 삽입 설명

3. 데이터 렌더링

설치 Axios의이
yarn add axios
디렉토리 index.vue를 수집 수정

<template>
  <div>
    活动列表
    <div v-for="(item,index) in items" :key="index" >{{item.name}}</div>
  </div>
</template>
<script>
import axios from 'axios'
export default {
    asyncData () {
        console.log("111111")
        return axios.get('http://192.168.192.130:7300/mock/5d120b475ed8ef4c615f2d60/gathering').then( res => {
        return {items : res.data.data }
        })
    }
}
</script>

asyncData로드 데이터를 비동기 적으로하는 방법입니다
참조 : HTTPS : //zh.nuxtjs.org/guide/async-data

4. 동적 라우팅

우리가 문의 사항 ID에 필요한 경우, 우리는 동적 라우팅을 사용합니다. NUXT 동적 라우팅이 초기 밑줄 VUE 파일을 기반으로, 파일 이름 매개 변수는 밑줄 뒤에 이름이
페이지를 생성 / 수집 / 아이템 / _id.vue

<template>
  <div>
    活动详情
    {{item.id}}
    <hr>
    {{item.name}}
  </div>
</template>
<script>
import axios from 'axios'
export default {
    asyncData ({params}) {
        console.log("111111")
        return axios.get(`http://192.168.192.130:7300/mock/5d120b475ed8ef4c615f2d60/gathering/${params.id}`).then( res => {
        return {item : res.data.data }
        })
    }
}
</script>

우리는 주소 표시 줄에 http를 입력 : // localhost를 : 3000 / 수집 / 항목 / 1 당신은 결과를 볼 수 있습니다
여기에 그림 삽입 설명
세부 정보 페이지를 입력 할 수있는 링크를 활성 목록 페이지의 클릭으로를

  <div>
    活动列表
    <div v-for="(item,index) in items" :key="index" >
        <nuxt-link :to="'/gathering/item/'+item.id">{{item.name}}</nuxt-link>
    </div>
  </div>

현재 nuxt 링크 및 라우터 링크 행동, 라우팅 점프입니다.