VUEJSから始める

Vuejsとは
Vueはfrontend JavaScript framework 建築ウェブサイトとユーザーインターフェースのために

Vueは一般的にクライアント上で実行する単一のページアプリケーションを作成するために使用されます.

VUEはまた、サーバーの側でnxtのようなSSRフレームワークを使用して実行することができます.

なぜVueを使うのか?

ダイナミックフロントエンドのアプリやウェブサイトを作成します.

簡単学習曲線

簡単に他のプロジェクトと統合する.

高速かつ軽量.

非常に人気(と上昇).

何を最初に知っていますか?

Like with any framework, you should be comfortable with the underlying language first. In this case, that is JavaScript

ジャバスクリプト

非同期プログラミング

配列メソッド( foreach , map , filterなど)

リクエストを作成するためにAPIを扱うので、「フェッチAPI/HTTPリクエスト」を理解することが重要です

また、余分な機能を与えるために他のパッケージをインストールするつもりであるので、あなたは糸またはNPM(Node Package Manager)での経験を持つべきです.

始める

インストール

npm install -g @vue/cli

OR

yarn global add @vue/cli

2 .新規プロジェクトの作成

vue create vue-project

Warning

If you are on Windows using Git Bash with minTTY, the interactive prompts will not work. You must launch the command as winpty vue.cmd create vue-project. If you however want to still use the vue create vue-project syntax, you can alias the command by adding the following line to your ~/.bashrc file. alias vue='winpty vue.cmd' You will need to restart your Git Bash terminal session to pull in the updated bashrc file.

あなたはプリセットを選択するよう求められます.のいずれかを選択することができますデフォルトのプリセットは、基本的なバベル+エスニックセットアップ、または選択“手動で選択機能”を選択する機能を選択します.

デフォルトのセットアップはすぐに新しいプロジェクトをプロトタイピングするのに最適ですが、マニュアルのセットアップでは、より多くの生産指向のプロジェクトに必要なオプションを提供します.

手動で機能を選択する場合は、プロンプトの終わりには、将来的にそれを再利用することができますプリセットとしての選択を保存するオプションがあります.

プロジェクトの実行
プロジェクトディレクトリを開き、このコマンドを実行します.

npm run serve

予想される出力:

あなたのブラウザーのリンクをコピーして、ペーストして、出力を見てください.

http://localhost:8080/ 

HelloWorldの既定のコンポーネントを使用して再生することもできますが、その前にコンポーネントやルータについて話をしましょう.

コンポーネント
コンポーネントは、名前を持つ再利用可能なVueインスタンスです.

Vueコンポーネントの基本レイアウト
ボタンコンポーネントの例を示します.

<template>
<button @click="onClick()" :style="{background: color}" class="btn">{{ text }}</button>
</template>

<script>
export default {
    methods: {
    onClick() {
    console.log("Button Clicked!")
    },
},
    name: 'Button',
    props: {
        text: String,
        color: String,
    },
}

</script>

<style scoped>
  .btn {
  background: #000;
  color: #fff;
}
<style>

コンポーネントは、マークアップのためのテンプレート、どのコンポーネント/データ/メソッドだけでなく、そのコンポーネントのスタイルを含むロジックが含まれます.
使用props 外部コンポーネントからユニークなデータを渡す方法です.
上のボタンコンポーネントは、次のように他のコンポーネントで再利用できます.
ヘッダーコンポーネントです.

<template>
    <header>
        <h2>Title</h2>
        <Button :text="Add Task" :color='green'/>
    </header>
</template>

<script>
import Button from './Button'

export default {
    name: 'Header',
    components: {
        Button
    }
}
</script>

<style scoped>
header {
    display: flex;
    justify-content: space-between;
    align-items: cetner;
    margin-bottom: 20px;
}
</style>

ボタンコンポーネントを再利用するには、まずボタンをインポートし、components インサイドscript タグ.

export default {
    name: 'Header',
    components: {
        Button
    }
}

Vueルータ
ルーティングは、ナビゲーション中に不要なリロードなしに単一のページアプリケーションを作成することができます.これを行うにはまずvue routerをインストールする必要があります.

npm install vue-router

ルーティングをしましょう
クリエイトrouter プロジェクトのルートディレクトリのフォルダ.
ルータフォルダ内でindex.js .
あるページについてのルータを作成するには最初にコンポーネント(ページ)をインポートする必要があります.

import About from '../views/About'

そして、あなたのページのルータを指定してください.

const routes = [
    {
        path: '/about',
        name: 'About',
        component: About
    }
]

以下は私のインデックスの例です.ルータフォルダ

import {createRouter, createWebHistory} from 
'vue-router'
import About from '../views/About'

const routes = [
    {
        path: '/about',
        name: 'About',
        component: About
    }
]

const router = createRouter({
    history: createWebHistory(process.env.
        BASE_URL),
        routes
})

export default router

次のステップは主にルータを使うことです.あなたのVueプロジェクトのルートフォルダにあるJSファイル.

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App)
.use(router)
.mount('#app')

あなたのアプリケーションでルータを含める.Vueテンプレートタグ.

    <router-view></router-view>

現在、あなたは行ってよいです.単一のWebアプリケーションのコンポーネントで、ルータを使用できます.
使用する代わりに:

 <a href="/about">About</a>

使用する必要があります.

<router-link to="/about">About</router-link>

このポストを訪問していただきありがとうございます.あなたが質問をしたり、何かを言いたい場合は以下のコメントをお気軽に.