Window10 nuxt.jsを使用してみる

2019.10.25
nuxt.js
nodejs, nuxt.js, vue

Vue.js アプリケーションを構築するためのフレームワークであるnuxt.jsの簡単な導入手順

1. 環境
2. nuxt.js とは
3. プロジェクト作成
4. Hello World してみる

環境

OS windows10 pro
node V10.16.3
npm 6.9.0

※nodeのインストールはこちら

nuxt.js とは

サーバーで、JavaScriptを使ったHTML生成を行うサーバーサイドレンダリング(SSR)が手軽に Vue.js ベースで実装できる

プロジェクト作成

vue-cliのインストールから開始

## vue-cliインストール
npm i -D vue-cli

## testプロジェクトを作成
vue init nuxt-community/starter-template test

<出力結果>
とりあえず、全部ENTERキーを押下する

? Project name test
? Project description Nuxt.js project
? Author

   vue-cli · Generated "test".

   To get started:

     cd test
     npm install # Or yarn
     npm run dev

## testプロジェクトに移動
cd test

## インストール
yarn　or npm install

→　yarnインストールされてなければ
npm install -g yarn
でインストール可能

## 開発サーバーを起動
npm run dev

## vue-cliインストール

npm i -D vue-cli

## testプロジェクトを作成

vue init nuxt-community/starter-template test

<出力結果>

とりあえず、全部ENTERキーを押下する

? Project name test

? Project description Nuxt.js project

? Author

vue-cli · Generated "test".

To get started:

cd test

npm install # Or yarn

npm run dev

## testプロジェクトに移動

cd test

## インストール

yarn　or npm install

→　yarnインストールされてなければ

npm install -g yarn

でインストール可能

## 開発サーバーを起動

npm run dev

下記の通り、http://localhost:3000 で起動される

※画面はwindows terminalです。導入方法はこちら

アクセスすると下記画面が表示される

Hello World してみる

test\pages何にhelloファルダを作成し、index.vueを下記の内容で作成

<template>
  <section class="container">
    <div>      
      <h1 class="title">
        Hello{{ name }}
      </h1>
      <div class="links">
        <a
          href="/"
          target="_blank"
          class="button--green">TOP</a>       
      </div>      
    </div>
    
  </section>
</template>

<script>
export default {
  data: () => {
    return { name: 'world!' }
  }
}
</script>

<style>
.container {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.title {
  font-family: "Quicksand", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* 1 */
  display: block;
  font-weight: 300;
  font-size: 100px;
  color: #35495e;
  letter-spa0cing: 1px;
}

.links {
  padding-top: 15px;
}
</style>