風上コンポーネントとVueの実装
ねえ、devs
私は今週2つのプロジェクトに取り組んでおり、いくつかを共有したいと思います.
https://www.kevinodongo.com/
私はあなたがテストすることができますし、全体のチュートリアルの終了製品を理解するために再生できるように私はすべての作業チュートリアルをアップロードされる個人的なウェブサイトを作成しました.
例えば、私はコースチュートリアルをして、ウェブサイトの上でアプリケーションリンクをアップロードするアプリケーションのいくつかです.バルクメールとSMSアプリケーション ビデオとWaverble、AWSキネシスビデオストリーム、AWS WebSocket、DynamoDB、およびVueとのチャットアプリケーション.ビデオとwebrtc、ソケットとのチャットアプリケーション.IO、ノード、エクスプレス、およびmongo db. APIゲートウェイ、ラムダ、認知、増幅、AppSync(Serverlessなアプローチ). Mongo DB、ノード、およびExpress. そこから、我々はDockerとECS/Fargateのような他のテクノロジーに行くことができます.地形と雲形成
風下とVue
私は今週2つのプロジェクトに取り組んでおり、いくつかを共有したいと思います.
個人的なウェブサイト。
https://www.kevinodongo.com/
私はあなたがテストすることができますし、全体のチュートリアルの終了製品を理解するために再生できるように私はすべての作業チュートリアルをアップロードされる個人的なウェブサイトを作成しました.
例えば、私はコースチュートリアルをして、ウェブサイトの上でアプリケーションリンクをアップロードするアプリケーションのいくつかです.
風下とVue
私はVuetify CSSとの作業を愛し、ドキュメントはまっすぐに方法だった.Tailwindが来て、ゲームを変更しました.Tarwindがコード化を容易にした方法に感動しました.移行は悪夢だった.彼らのドキュメントは異なっていました、彼らは自由なコンポーネントを与えました、そして、あなたは買わなければなりませんでした.開始するには、無料のコンポーネントをコピーし、これは遷移したい人に挑戦された編集する必要があります.CSSユーティリティは私がどこから始めるのか尋ねることができました.それで、簡単にするために、私はVuetifyドキュメンテーションとして構成要素を切り離すことに決めました.Tailwind and Vue .今ではレイアウトを行うことによって、各コンポーネントの周りに私の方法を動作し、必要なコンポーネントを取得することが容易になります.これは楽しいプロジェクトでしたが、Vueプロジェクトに取り組んでいる人を助けることができました.
議題
私の課題は、すべてのコンポーネントを分離し、V - IF、V - for、V - once、トランジションなどを使用して、それらを実装することでした.したら、グリッドとFlexboxであなたのレイアウトをした残りはそよ風です.
リンクを取得するには、私のウェブサイトが稼働しているだけでプロジェクトのセクションに移動し、TailwindとVueを探します.私は、これですべてのアプリケーションをリファクタリングしています.
ここでは風車とVueです.
簡単説明
ボタンの例を挙げましょう.以下は、Vuetifyが彼らをした方法です.あなたはから選択するボタンの種類が異なっていた.を選択し、追加し、編集します.
これは私がTailwindとVueアプリケーションでやった方法です.
ボタンの-すべての異なるタイプ.選択したいコードを選択し、アプリケーションで編集します.
ナビゲーション引き出しVuetifyのようなものは、様々なスタートを持っていた.これらはコンポーネントとしてTailwindとVueを実行するようになります.Vueを使用して実装する方法を見つけるでしょう.
心地よいCSSでポジショニングの重要性を学びました.簡単に作業するには、相対位置と絶対の概念を理解する必要があります.
アプリケーションのレイアウトは、Flexboxやグリッドを使用して達成することができます.ああ!Vuetifyを中心に私のお気に入りはどこでTailwindであなたを見つけるつもりだった.
<template>
<v-row class="fill-height" justify="center" align="center" height="500px">
// all items are centered in the middle of the parent
<div>Hello World!</div>
</v-row>
</template>
私はそれを楽天で得た.
<div style="height: 500px" class="content-center">
// all items are centered in the middle of the parent
<div>Hello World!</div>
</div>
カレンダー、ツールチップ、およびカルーセルはどうですか?博士を通して行ってください、そして、あなたは解決を見つけます.
プロジェクトは作業プロジェクトですが、使用できます.我々は一緒に行くように追加し、修正することができます.
誰かにそれが本当に開発中にそれらを助ける希望.私は私のコースとチュートリアルでそれをたくさん使用されます.
ありがとう
Reference
この問題について(風上コンポーネントとVueの実装), 我々は、より多くの情報をここで見つけました
https://dev.to/kevin_odongo35/implement-tailwind-components-and-vue-5425
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
私の課題は、すべてのコンポーネントを分離し、V - IF、V - for、V - once、トランジションなどを使用して、それらを実装することでした.したら、グリッドとFlexboxであなたのレイアウトをした残りはそよ風です.
リンクを取得するには、私のウェブサイトが稼働しているだけでプロジェクトのセクションに移動し、TailwindとVueを探します.私は、これですべてのアプリケーションをリファクタリングしています.
ここでは風車とVueです.
簡単説明
ボタンの例を挙げましょう.以下は、Vuetifyが彼らをした方法です.あなたはから選択するボタンの種類が異なっていた.を選択し、追加し、編集します.
これは私がTailwindとVueアプリケーションでやった方法です.
ボタンの-すべての異なるタイプ.選択したいコードを選択し、アプリケーションで編集します.
ナビゲーション引き出しVuetifyのようなものは、様々なスタートを持っていた.これらはコンポーネントとしてTailwindとVueを実行するようになります.Vueを使用して実装する方法を見つけるでしょう.
心地よいCSSでポジショニングの重要性を学びました.簡単に作業するには、相対位置と絶対の概念を理解する必要があります.
アプリケーションのレイアウトは、Flexboxやグリッドを使用して達成することができます.ああ!Vuetifyを中心に私のお気に入りはどこでTailwindであなたを見つけるつもりだった.
<template>
<v-row class="fill-height" justify="center" align="center" height="500px">
// all items are centered in the middle of the parent
<div>Hello World!</div>
</v-row>
</template>
私はそれを楽天で得た.
<div style="height: 500px" class="content-center">
// all items are centered in the middle of the parent
<div>Hello World!</div>
</div>
カレンダー、ツールチップ、およびカルーセルはどうですか?博士を通して行ってください、そして、あなたは解決を見つけます.
プロジェクトは作業プロジェクトですが、使用できます.我々は一緒に行くように追加し、修正することができます.
誰かにそれが本当に開発中にそれらを助ける希望.私は私のコースとチュートリアルでそれをたくさん使用されます.
ありがとう
Reference
この問題について(風上コンポーネントとVueの実装), 我々は、より多くの情報をここで見つけました
https://dev.to/kevin_odongo35/implement-tailwind-components-and-vue-5425
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
<template>
<v-row class="fill-height" justify="center" align="center" height="500px">
// all items are centered in the middle of the parent
<div>Hello World!</div>
</v-row>
</template>
<div style="height: 500px" class="content-center">
// all items are centered in the middle of the parent
<div>Hello World!</div>
</div>
Reference
この問題について(風上コンポーネントとVueの実装), 我々は、より多くの情報をここで見つけました https://dev.to/kevin_odongo35/implement-tailwind-components-and-vue-5425テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol