2.Todo Appの実装-構成部品の作成と登録

19602 ワード
vue.js テキストリンク
板橋隊長のVue.js中級講座-Webアプリケーションを作成することで学ぶVue。js, ES6, Vuex課を整理しました.
毎日20分ちょっとVuejs中級給油.
IDE: Visual Studio Code
クロムビュー開発者ツール:Vue.js devtools

構成部品の作成と登録


1.TODOAPPコンポーネント構造に基づいてコンポーネントを作成します。



/src/componse/サブアイテムに作成し、divラベルを作成します.

2.4つの構成部品を[App.vue]にインポート


templateにコンポーネントを追加する場合は、公式スタイルガイドではtod-headerを使用することを推奨します.
	<todo-header></todo-header>
以下の形式でも同じ機能がありますが、既存のHTMLコードよりも目立つので、このように書きましょう.
    <TodoHeader></TodoHeader>

3.開発者ツールに構成部品が含まれているかどうかを確認する



[App.vue]フルコード

<template>
  <div id="app">
    <TodoHeader></TodoHeader>
    <TodoInput></TodoInput>
    <TodoList></TodoList>
    <TodoFooter></TodoFooter>
  </div>
</template>

<script>
import TodoFooter from './components/TodoFooter.vue'
import TodoHeader from './components/TodoHeader.vue'
import TodoInput from './components/TodoInput.vue'
import TodoList from './components/TodoList.vue'

export default {
  components: { TodoHeader, TodoInput, TodoList, TodoFooter },
}

</script>

<style>

</style>

お気に入りアイコンのフォントと反応ラベルの設定


1.反応型TAG]index。ビューポートmetaラベルをhtmlに追加


に注意
プロジェクト名/共通/インデックス.htmlに追加します.
Googleでviewport metaタグをインポート
<meta name="viewport" content="width=device-width, initial-scale=1.0">

2.[お気に入りアイコンを作成]index。htmlのfavicon。ico


バビコン作成サイト接続
/src/assets/logo.pngを入れて16 x 16->faviconを作ります.icoを生成します.

/src/assets/favicon.icoにナビゲート

提供されたタグをheadタグに挿入
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="/favicon.ico" type="image/x-icon">

3.曖昧なアイコン


Font awesome 
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>

4. google web font


Ubuntuフォント

完了したインデックス。html完全コード


底から見るとindexhtmlにはappというdivラベルがあります.
ビューインスタンスはindexです.htmlの内部に含まれます.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <link rel="shortcut icon" href="src/assets/favicon.ico" type="image/x-icon">
    <link rel="icon" href="src/assets/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" 
    crossorigin="anonymous"/>
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&display=swap" rel="stylesheet">
    <title>Document</title>
</head>
<body>
    <div id="app">


    </div>
    <script src="/dist/build.js"></script>
</body>
</html>

main.jsとindex。html


main.jsは、ビュープロジェクトで最初に実行されるファイルです.
ビューインスタンスを作成し、appというラベルに挿入します.
Webpackを知る必要がある部分なので、プロジェクトが終わったら少し時間をかけて勉強しましょう.
import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')
次のレッスンではTodoHeader素子を実施します.
[VanillaJS]クリップボードのコピー
script-2つ抽出して追加