tm nuxtjs starter 다운로드 -TM tm nuxtjs starter 소스 코드 다운로드

tm nuxtjs starter

기타 카테고리

1.0.0

다운로드

2018 년 8 월 현재 최소한의 기능적 VUE 스타터 키트 및 데모 앱입니다.

JavaScript 피로에 지쳤고 빠르고 쉽게 시작하고 싶다면 이것을 살펴보십시오. 최신 vue 앱을 개발한다고해서 이것보다 훨씬 간단하지는 않습니다.

라이브 데모 nuxtjs.tomicloud.com

스크린 샷

데모 앱은 정적 사이트로, 기본 단일 페이지 앱으로 게으른 수요가있는 몇 가지 주소 페이지가 있습니다. 기본 CRUD 작업을 보여줍니다. 1) 영화 목록, 2) 영화 세부 사항보기, 3) 제작/편집 및 4) 영화 삭제.

데모는 데이터 스토리지에 브라우저 로컬 스토리지를 사용하므로 백엔드없이 실행됩니다. 소스에는 REST 백엔드에 대한 실제 AJAX 호출을 수행하는 모듈이 포함되어 있습니다. 모듈을 활성화하고 서버를 작성하면 실제 웹 앱을 갖기 위해서는 좋은 트랙에 있습니다. 이 간단한 영화 API를 예로 들어 구현하는 RESTPIE3 Python REST API 서버를 개발했습니다.

빌딩 블록

데모 앱은 최신 웹 앱을 만드는 데 필수적인 기능을 제공하는 간단하지만 강력한 기술 스택으로 구성됩니다. 그것은 몇 개의 훌륭한 도서관의 어깨에 서 있습니다.

Vue는 현대 웹 개발자를위한 실용적이고 우아한 JavaScript 라이브러리입니다.
nuxtjs
Vuex는 NUXTJS가 기본적으로 지원하는 빠르고 쉬운 주 관리 라이브러리입니다.
Sass는 여전히 일을 잘하는 좋은 오래된 CSS 확장 언어입니다.
Axios는 약속을 기반으로 한 인기있는 Ajax 라이브러리입니다

소스 트리

 ├── /assets/                    # assets to be processed by Nuxt
│   └── /layout.sass              # main layout of site
├── /components/                # vue components used by pages
│   └── /myheader.vue             # site header component
├── /layouts/                   # page top-level layouts
│   └── /default.vue              # main site layout
├── /pages/                     # pages
│   ├── /about.vue                # about page
│   ├── /index.vue                # home page, lists movies
│   ├── /moviedetails.vue         # details page, views a movie
│   └── /movieedit.vue            # edit page, edits a movie
├── /static/                    # static assets, accessed/exported as is
│   ├── /favicon.ico              # favicon
│   └── /exampledata/
│       └── /movies.json          # sample list of 4 movies - loaded initially
├── /store/                     # data stores managed by Vuex
│   └── /index.js                 # the single store for this app
├── config.js                   # app config, select ajax or localstorage
├── nuxt.config.js              # nuxtjs config
├── package-lock.json           # npm something
├── package.json                # list of npm packages required
├── README.md                   # this doc
├── serverapi_ajax.js           # API, talks AJAX to a real backend
└── serverapi_localstorage.js   # API, talks to localStorage

지역 개발

로컬 컴퓨터에서 스타터를 실행하는 방법은 다음과 같습니다.

$ git clone https://github.com/tomimick/tm-nuxtjs-starter
$ cd tm-nuxtjs-starter
$ npm install
$ npm run dev

그런 다음 브라우저를 http : // localhost : 3000에 가리 킵니다.

종속 파일 중 하나가 수정되면 변경 사항이 핫로드되어 즉시 표시됩니다. 개발자를 즐기십시오!

nuxt.js

nuxtjs는 구조 및 핵심 스파 기능을 VUE 기반 앱에 제공하는 훌륭한 작은 프레임 워크입니다. 앱 개발을 쉽게 시작하여 핵심 앱에 집중할 수 있지만보다 복잡한 앱 생성을 안내하는 관행도 제공합니다.

간단히 말하면 nuxt.js 혜택 :

최소 구성 - 원하지 않는 한 웹 팩 또는 바벨 구성을 땜질 할 필요가 없습니다.
소스 파일에 대한 구조 시행 - 논리적이고 문서화 된 방식으로 앱을 제작하는 지침
Dev 작업 속도를 높이기 위해 페이지를 핫로드합니다
내장 된 스파 라우팅 로직
페이지의 자동 코드 분할, JS의 전환
배포 옵션 : 백엔드에서 정적 서버가없는 사이트를 내보내거나 node.js를 내보내기

nuxt.js는 VUE 구성 요소의 템플릿, 논리 및 스타일을 동일한 소스 파일에서 함께 캡슐화하는 훌륭한 실용적인 솔루션 인 VUE의 단일 파일 구성 요소를 활용합니다.

nuxt.js는 React 생태계와 동일한 프레임 워크 인 Nextjs에서 직접 영감을 받았습니다. nuxt.js는 레이아웃, 플러그인 및 미들웨어 용 폴더가있는 계층 구조를 조금 더 소개합니다.

Vuex State Management

nuxtjs는 많은 데이터 및 코드가있는 앱 개발을 지원하는 툴링을 가지고 있기 때문에 일반적으로 페이지 및 구성 요소에서 데이터를 공유하기위한 일종의 상태 관리 솔루션이 필요합니다.

Nuxtjs는 기본적으로 Vuex State Management Library와 통합됩니다. 이것은 Vue를 만든 재능있는 사람인 Evan You가 저술 한 잘 만들어진 도서관입니다. Vuex는 빨리 배우기에 충분히 간단합니다. 주 데이터 및 돌연변이 및 행동 기능에서 매장을 구성합니다.

vuex를 활성화하려면 매장/ 폴더에 매장 구성 요소를 떨어 뜨립니다 this.$store 사용할 수 있습니다. 그것은 전부입니다. 더 이상의 구성이 필요하지 않습니다.

Mobx와 같은 다른 상태 라이브러리를 사용할 수도 있지만 내장 통합으로 인해 Vuex는 NUXTJS와 자연스러운 선택입니다.

정적 사이트를 생성합니다

nuxtjs로 정적 사이트를 생성하는 기능은 백엔드 서버없이 앱을 실행할 수있는 중요한 도구입니다. 사이트를 GitHub 페이지, NetLify 또는 Amazon S3로 내보낼 수 있습니다. (그러나 GitHub 페이지가있는 사이트+링크 접두사가있는 몇 가지 gotchas를 확인하십시오.)

정적 생성의 또 다른 승리는 백엔드의 언어가 무엇이든 상관없이 REST 백엔드로 앱을 연결할 수 있다는 것입니다. Frontend 및 Backend의 깨끗한 분리는 기술 수준 및 팀 수준에서 모듈화를 제공합니다.

정적 사이트를 생성하려면 간단히 실행하십시오

$ npm run export

정적 파일은 dist -Folder에서 생성됩니다.

로컬 www -server를 통해 정적 사이트를 로컬로 테스트하려면 파이썬 스크립트를 빠르게 실행합니다. (Python3 -m http.server)

$ npm run pyserve

그런 다음 http : // localhost : 8000에서 사이트를 테스트하십시오.

JavaScript의 크기

nuxtjs는 성능이 좋으며 크기가 약 69kb의 미니 화 및 Gzipped 인 홈페이지를 생성합니다. 이것은 상자에서 좋은 결과입니다.

브라우저는 총 4 개의 요청으로 홈페이지를로드하고 주문형으로로드 된 각 새 페이지는 단일 JS 요청을 한 번 만듭니다.

Page Size Inspector Report
URL: https://nuxtjs.tomicloud.com/

REQUEST                                       REQ     BYTES

TOTAL___________________________________________4____68,802

Document________________________________________1_______960
-nuxtjs.tomicloud.com/                                  960

Script__________________________________________3____67,842
-nuxtjs.tomicloud.com/_.../0b088016842f5f4f735       53,552
-nuxtjs.tomicloud.com/_.../1c78d24f170a4f6d1ea       13,680
-nuxtjs.tomicloud.com/_.../f17a22e19f8ece7f59c          610

(Chrome Extension Page Size Inspector의보고.)

Vue vs React- 내 의견

Vue and React는 현대 웹 개발자에게 정말 좋은 선택입니다. 그들은 현대적인 반응/가상 DOM 개념을 기반으로하며, 가볍고 큰 생태계에서 매우 인기가 있습니다. 개발자는 항상이 두 가지 중에서 선택할 수는 없지만 결국 개발자가 더 잘 고려할 수있는 맛의 문제 일 수 있습니다. 취향 결정은 일반적으로 JSX를 좋아하든 템플릿을 좋아하는 철학으로 이어집니다.

프론트 엔드 프로젝트를 위해 내 무기를 선택할 수 있다면 Vue를 선택할 것입니다. 저의 주요 이유는 코드 가독성과 개인 생산성입니다. JSX보다 JavaScript를 사용하여 HTML 템플릿을 읽고 쓸 수 있습니다. 긴 JSX 런은 현기증이 나고 시끄 럽습니다. 몇 가지 지침으로 장식 된 템플릿은 나에게 더 읽기 쉬운 느낌입니다. JSX MAP ()-기능 또는 3 원 운영자 또는 단락이 아닌 HTML 빌딩 블록을 먼저보고 싶습니다. JavaScript Overlord가 전 세계를 점령하기 오래 전에 웹, HTML, JS 및 CSS의 3 개의 기본 빌딩 블록과 함께 일한 역사 때문에 템플릿이 더 자연 스럽다고 생각합니다.

VUE 단일 파일 구성 요소에서 수행되는 3 가지 문제의 분리에 감사드립니다. 나는 관점, 논리 및 스타일이 그들 사이에 약간의 분리되어야하며 혼합되어서는 안된다고 말하는 구식 사고를 대표한다고 생각합니다. 그것들은 그들 사이에 커플 링을 가지고 있습니다. 그것은 자연스러운 것입니다. 그리고 그들은 서로 가까이, 바람직하게는 동일한 소스 파일에 위치하지만 혼합되지 않아야합니다. 너무 단단한 커플 링은 스파게티에서 끝날 수 있습니다.

그러나 나는 또한 반응이 VUE보다 더 나은 상태이며 다른 템플릿 DSL이 약한 접근법이라고 주장하는 반대 의견을 이해합니다. JavaScript 배경에서 온다면 React가 더 자연스럽게 느껴질 수 있습니다. 나는 두 선택 모두에서 일할 수 있지만 (나는이 2 개의 스타터 키트를 만들었습니다!) 아마도 Vue는 나에게 약간의 우위를 가질 수 있습니다.

최근에 괜찮은 VUE 대 REACT 토론 중 하나에 대해 읽으려면이 Reddit 스레드를 확인하십시오.