Nuxt.js 를 사용 하여 기 존 프로젝트 를 개조 하 는 방법

머리말
만약 우리 가 기 존의 vue 프로젝트 에 대해 ssr 개 조 를 해 야 한다 면,nuxt.js 를 사용 하 는 것 은 좋 은 선택 이다.여기 서 예 로 들 고 있 는'기 존 프로젝트'는 배 고 프 냐 배달 앱 의 스 파 다.그러나 나 는 모든 기능 을 개발 하지 않 았 다.
 
다음은 이 demo 를 생쥐 로 ssr 개조 하 겠 습 니 다.
준비 하 다.
기 존 디 렉 터 리
 
vue-cli 로 만 든 프로젝트 임 이 분명 합 니 다.
그 중에서 prod.server.js 는 build 이후 의 시작 파일 입 니 다.
dataa.json 파일 은 아 날로 그 데이터 입 니 다.build/dev-server.js 에서 사용 합 니 다.
설치 및 설정
설치 nuxt

npm install --save-dev nuxt

새 nuxt 폴 더
루트 디 렉 터 리 아래 에 nuxt 폴 더 를 만들어 야 합 니 다.이 폴 더 의 내부 조직 은 nuxt 자체 의 응용 디 렉 터 리 구조 에 따라 조직 되 어야 합 니 다레 퍼 런 스.
 
static 디 렉 터 리 아래 에 logo.png 가 있 습 니 다.프로젝트 아이콘 으로 nuxt.config.js 에서 이 그림 의 주 소 를 직접 기록 합 니 다/logo.png.다음 절 은 nuxt 폴 더 의 조직 에 대해 상세 하 게 설명 할 것 입 니 다.
nuxt.config.js 를 새로 만 들 고 설정 합 니 다.
물론 루트 디 렉 터 리 에 nuxt.config.js 파일 을 만들어 서 Nuxt.js 응용 프로그램 을 구성 하 는 맞 춤 형 설정 을 만들어 야 합 니 다.이 항목 에서 설정 해 야 할 점 은 다음 과 같 습 니 다.

소스 디 렉 터 리 경로

head 의 meta 및 link(주로 아이콘)

전역 css 스타일

프로젝트 에 그림 과 글꼴 파일 을 사용 해 야 합 니 다.nuxt 는 기본적으로 설정 되 어 있 지만 일부 내용 을 다시 정의 해 야 합 니 다(프로젝트 에 서 는 limit 확대)

프로젝트 에 sass 를 사 용 했 습 니 다.설정 이 필요 합 니 다

그래서 nuxt.config.js 의 코드 는 다음 과 같 습 니 다.

module.exports = {
  //   nuxt      
  srcDir: "nuxt/",
  head: {
    title: "sell-nuxt",
    meta: [
      {
        charset: "utf-8"
      },
      {
        name: "viewport",
        content: "width=device-width, initial-scale=1,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0"
      }
    ],
    link: [
      {
        rel: "shortcut icon",
        type: "image/png",
        //            static  logo.png
        href: "/logo.png"
      }
    ]
  },
  css: [
    "~assets/reset.css"
  ],
  build: {
    vendor: ['axios'],
    loaders: [
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
         limit: 10000,
         name: 'img/[name].[hash:7].[ext]'
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
         limit: 10000,
         name: 'fonts/[name].[hash:7].[ext]'
        }
      },
      {
        test: /\.scss$/,
        loader: "vue-style-loader!css-loader!sass-loader"
      }
    ]
  }
}

package.json 설정
package.json 은 npm 설정 파일 입 니 다.현재 script 옵션 을 설정 해 야 합 니 다.

"scripts": {
  "dev": "nuxt",
  "build": "nuxt build",
  "start": "nuxt start",
  "generate": "nuxt generate",
  "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
  "precommit": "npm run lint"
 }

nuxt 참고 가능명령 목록
개 조 된 목록
 
이 파일 은 ssr 개 조 를 완료 한 프로젝트 에 api 인 터 페 이 스 를 제공 하 는 nuxt.api.js 입 니 다.koa 를 사용 하여 3001 포트 에서 실 행 됩 니 다.
nuxt 폴 더 조직
프로젝트 코드 를 개 발 했 기 때문에 nuxt 폴 더 의 대부분 코드 는 기 존 코드 에서 직접 복사 할 수 있 습 니 다.
layouts
레이아웃 디 렉 터 리 layouts 는 레이아웃 구성 요 소 를 구성 하 는 데 사 용 됩 니 다.nuxt 는 layouts/default.vue 파일 을 추가 하여 기본 레이아웃 을 확장 할 수 있 습 니 다.layouts 에서 default.vue 를 새로 만 듭 니 다.

<template>
 <div id="app">
  <v-header v-bind:seller="seller"></v-header>
  <v-tab></v-tab>
  <nuxt/>
 </div>
</template>

<script>
 import axios from 'axios';
 //     
 import header from "~/components/header/header.vue";
 import tab from "~/components/tab/tab.vue";
 export default {
  data:function(){
   return {
    seller:{}
   }
  },
  created:function(){
   axios.get("http://localhost:3001/seller").then(res=>{
    console.log(res.data);
    this.seller = res.data.data;
   });
  },
  components:{
   "v-header":header,
   "v-tab":tab
  }
 }
</script>

<style lang="scss" rel="text/css">

</style>

<nuxt/>구성 요 소 는 페이지 의 주체 내용,즉'상품','평론','업 체'등 몇 가지 부분 을 표시 하 는 데 사용 된다.
pages
nuxt 는 pages 디 렉 터 리 구조 에 따라 vue-router 모듈 의 경로 설정 을 자동 으로 생 성 합 니 다.이것 은 매우 편리 합 니 다.
 
상품,patings,판매자 가 각각'상품','평론','상가'에 대응 하 는 것 을 알 수 있다.
이 설정 을 사용 하면 nuxt 가 자동 으로 생 성 되 는 경로 설정 은 다음 과 같 습 니 다.

router: {
 routes: [
  {
   name: 'index',
   path: '/',
   component: 'pages/index.vue'
  },
  {
   name: 'goods',
   path: '/goods',
   component: 'pages/goods/index.vue'
  },
  {
   name: 'patings',
   path: '/patings',
   component: 'pages/patings/index.vue'
  },
  {
   name: 'seller',
   path: '/seller',
   component: 'pages/seller/index.vue'
  }
 ]
}

그러나 우 리 는 기본적으로 goods 에 들 어가 기 를 원 합 니 다.nuxt 공식 문 서 는 기본 경 로 를 설정 하 는 방법 을 말 하지 않 았 습 니 다.이것 이 바로 pages 아래 에 index.vue 를 만 드 는 이유 입 니 다.

<template>

</template>

<script>
 export default {
  created:function(){
   this.$router.push('/goods'); //        
  }
 }
</script>

<style lang="scss" rel="text/css">

</style>

pages 아래 페이지 구성 요소 처럼 asyncData 방법 이 필요 없 는 구성 요소 에 대해 서 는 components 디 렉 터 리 에 저장 할 수 있 습 니 다.
assets
자원 디 렉 터 리 assets 는 LESS,SASS 또는 JavaScript 와 같은 컴 파일 되 지 않 은 정적 자원 을 구성 하 는 데 사 용 됩 니 다.이 디 렉 터 리 는 제 가 경 로 를 참조 할 때 가장 구 덩이 를 파 는 것 같 습 니 다.
공식 문서 에서 모든 디 렉 터 리 에 별명 이 있 습 니 다.이 별명 들 은 nuxt.config.js 에서 설정 할 때 유효 합 니 다.예 를 들 어 이전에 설정 한 css 옵션 이지 만 우리 가 구성 요소 에서 이 별명 을 사용 하 는 것 이 효과 적 인 것 은 아 닙 니 다.구성 요소 에서 우 리 는 상대 경 로 를 사용 하 는 것 이 좋 습 니 다.예 를 들 어 components/header/header.vue 에서 직접 쓸 수 없고~assets상대 경 로 를 솔직하게 써 야 합 니 다.

<style lang="scss" rel="text/css" src="../../assets/base.scss"></style>
<style type="text/css" src="../../assets/style.css"></style>
<style lang="scss" rel="text/css">
  @import "../../assets/mixin.scss";
  @import "./header.scss";
</style>

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.