TIL 16|Vueプロジェクトの作成

開発プリファレンスパラメータを設定し、Vueプロジェクトを作成する

Visual Studioコード、ノードをインストールします.js(+NPM)および開発用のVisual Studioコードをインストールする拡張プログラムから、Defaltオプションを使用してプロジェクトを作成する(Vue CLIを使用してプロジェクトを作成する)まで.

開発環境の構成

1)Visual Studioコードのインストール
2)VS code Extentionのインストール:付属のデフォルトの韓国語パッケージ、Vert、Debugger for Chrome、Prettier-codeフォーマットプログラムをインストールする
3) Node.インストールjs
4) Node.jsバージョンを確認-VSコードを実行したら、View->ターミナル実行端末をクリックし、node-vコマンドを使用してバージョンを検証します.
5)Node Package Manager(NPM)-Nodeをインストールします.jsをインストールすると自動的にインストールされます.npm-vコマンドを使用してバージョンを検証します.

Vue CLIを使用したVueプロジェクトの作成

VUE CLIは、VUEプロジェクトの迅速な組織、構築、配布を支援するツールです.
このときCLIはCommand Lineインタフェースの略であり,端末が命令を入力してコンピュータと対話する方式を示す.(反対:GUIグラフィックユーザインタフェース)
1)VUE CLIのインストール:npm install -g @vue/cliコマンドを使用してVUE CLIをインストールする.権限エラーが発生します.次の権限エラー設定コマンドを使用して解決してください.set-ExecutionPolicy -ExecutionPolicy Unrestricted
Vue CLIがインストールされている場合は、簡単なコマンドでVueプロジェクト開発用の各種フォルダや設定ファイルを簡単にインストールできます.

Defaultオプションを使用したvueプロジェクトの作成(インストール)

1)vue create Vue프로젝트명コマンドを使用してvueアイテムを生成します.
2)cd Vue프로젝트명コマンドで生成されたvueプロジェクトフォルダに移動します.
3)npm rum serveコマンドを使用してサーバを起動します.
4)ctrl + 왼쪽마우스からhttp://localhost:8080行きますまでVueに到着します.js App画面が表示され、この画面が表示されると、Vueプロジェクトがよくインストールされます.

💻 Node.js,NPMバージョン確認-Defaltオプションを使用してVueプロジェクトを作成(インストール)

Windows PowerShell
Copyright (C) Microsoft Corporation. All rights reserved.

새로운 크로스 플랫폼 PowerShell 사용 https://aka.ms/pscore6

PS C:\Users\315> cd.. // 상위폴더로 이동
PS C:\Users> cd..
PS C:\> md Vue_C // 기본경로(Vue_C) 생성


디렉터리: C:\


Mode                 LastWriteTime         Length Name
----                 -------------         ------ ----
d-----      2022-04-08  오전 10:14                Vue_C


PS C:\> cd Vue_C
PS C:\Vue_C> 

 // clear하고 했던명령 되돌리려면 : 방향키 위, 아래

PS C:\Vue_C> node -v // node.js 버전 확인
v16.14.0
PS C:\Vue_C> npm -v // npm이 설치되었는지 확인
8.3.1
PS C:\Vue_C> npm install -g @vue/cli // Vue cli 설치

권한 오류 설정
set-ExecutionPolicy -ExecutionPolicy Unrestricted

PS C:\Vue_C> vue create pro01 // Default옵션으로 vue 프로젝트 생성(설치)

PS C:\Vue_C> cd pro01 // 만든 프로젝트로 이동

PS C:\Vue_C\pro01> npm run serve // 서버 시작.

ctrl + 왼쪽 마우스 클릭으로 시작된 서버를 연다. 

// 프로젝트 생성하고 나가는 법 : ctrl c

[実習]
デフォルトパス=>c:/vuepro
1)diの自動作成:pro 02 c
2)di:pro 02 mの手動作成
3)プロジェクトマネージャとして:pro 02 ui
Key Point)新規プロジェクトフォルダを作成する場合は、デフォルトのパス位置で作成します.cd vuepro

Vue-Router設定

ルーティングとは?すなわち,ページはクライアントでurlアドレスに従って切り替える.
Vueプロジェクト内では、URLアドレスをあらかじめ定義し、各アドレスにVueページ(コンポーネント)を関連付けます.
ユーザーがメニューをクリックするか、ブラウザアドレスを直接リフレッシュすると、定義済みurlアドレスに対応するVueページに画面が切り替わります.
🔌 Vueはvueが提供する公式プラグインvue-routerを使って簡単にルーティングを実現できます!

Vue-Routerのインストール

プロジェクトフォルダ(デフォルトパスで作成されたプロジェクトフォルダ)に入り、その場所でex:C:Vue Cpro 01>を選択します.
vue-routerのインストールとデフォルト設定は、次のコマンドを入力して実行できます.vue add router->@vue/cli-plugin-routerのインストールが完了しました.

インストール完了時に作成

srcフォルダにルータ(/index.js)、ビュー(/app.vue)、ファイル

を作成します.
この状態で、次のコマンドを入力してサーバーを再起動します.npm run serve

構成部品の基本

コンポーネントは、ビュー、データ、コードの集合であると考えられます.コンポーネントにはHTMLコードがあり、このHTMLコードを実行するJavaScriptコードとデータがあります.
構成部品は他の構成部品にインポートして使用できます.つまり、再利用可能です.これが素子の最大の特徴です.
🔌 Vueでは、コンポーネントは、画面に表示されるページ自体であってもよいし、ページ内の特定の機能要素であってもよい.

クリップを追加

Snippetは、コンポーネントの基本構造など、使用するコードを登録してロードするVS codeが提供する機能です.(作成したすべてのコードをコピーして貼り付ける必要はありません)
1)File->Preference->User Snappetsを選択すると、Snappetsを登録するファイルタイプを選択するウィンドウが表示されます.ここに「vue」と入力し、「vue」を選択します.
2) Vue.JAsonファイルが開きます.初期Vue.Jasonファイルには登録されているコードクリップがないため、これらのコードクリップをどのように登録して消去し、Vueコンポーネント開発時に以下のデフォルトのスケルトンとなるコードを登録するかを注釈的に説明しています.

"Generate Basic Vue Code" : {
	"prefix": "vue-start",
	"body": [
		"<template>\n\t<main>\n\n\t</main>\n</template>\n<script>\nexport default {\n\tname: '',\n\tcomponents: {},\n\tdata() {\n\t\treturn {\n\t\t\texample: '',\n\t}\n},\n\tbeforeCreate() {},\n\tcreated() {},\n\tbeforeMount() {},\n\tmounted() {},\n\tbeforeUpdate() {},\n\tupdated() {},\n\tbeforeUnmount() {},\n\tunmounted() {},\n\tmethods: {}\n}\n</script>"
	],
	"description": "Generate Basic Vue Code"
}

構成部品の作成

構成部品の作成-srcフォルダでviewsを右クリックし、컴포넌트이름.vueを入力して構成部品ファイルを作成します.ex) UserView.vue

snippetの使用

viewsに新しく作成された構成部品UserView.vueファイルを入力し、staを入力すると登録されたvue-startが表示されます.vue-start自動生成コードを選択します.
[コードの外観を生成]

<template></template>
<script>
export default {
    data() {
        return {
            sampleData: ''
    }
},
    beforeCreate() {},
    created() {},
    beforeMount() {},
    mounted() {},
    beforeUpdate() {},
    updated() {},
    beforeUnmount() {},
    unmounted() {},
    methods: {}
}
</script>

この基本構造はvue開発時に引き続き使用されており,一度登録すれば開発が容易に行える.

データのバインド

データバインディング-Vueは双方向データバインディングをサポートします.双方向データバインドとは、モデルでデータを定義した後、ビューに関連付けられ、モデルとビューのいずれかが変更されたときに自動的に別のビューに反映されることを意味します.
[データバインディングをUserView.vueファイルに適用]

<template>
	<h1>{{myText}}</h1>
</template>
<script>
export default {
    data() {
        return {
            myText: '오늘 수업 끝!'
    }
},
    beforeCreate() {},
    created() {},
    beforeMount() {},
    mounted() {},
    beforeUpdate() {},
    updated() {},
    beforeUnmount() {},
    unmounted() {},
    methods: {}
}
</script>

構成部品ファイルをルータ/インデックスにルーティングします。jsに追加(パス)

作成されたUserView.route/indexを使用して、vueファイルにアクセスします.jsに次の内容を追加します.
index.jsが「パス」であり、構成部品ファイルへのアクセスが可能であると考えられる場合は、容易に理解できます.
[ルータ(index.js)に新しい構成部品ファイルを追加]

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

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  },
  {
    path: '/UserView',
    name: 'UserView',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/UserView.vue')
  }
]

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

export default router

[ルータに追加されたUserView.vueファイル]

 {
    path: '/UserView',
    name: 'UserView',
...
    component: () => import(/* webpackChunkName: "about" */ '../views/UserView.vue')
  }

入力path:/UserView
name:他の構成部品と区別する構成部品名を入力UserView
component:()セクションでは、新しく作成した構成部品のパスを再入力します.
または、次のコードに示すように、ファイルの上部にimport文を使用してパスを入力できます.import UserView from '../Views/UserView.vue'次に、component:コンポーネントファイルの名前(UserView)を一部入力します.component : UserView

App.コンポーネントリンクをvueファイルに追加

コンポーネントの最上位アプリケーション.vueファイルでUserViewを使用します.vueへのリンクを追加します.
[App.vueファイルへのUserView.vueリンクの追加]

<template>
	<div id="nav">
    	<router-link to="/">home</router-link) |
        <router-link to="/about">about</router-link) |
        <router-link to="/UserView">UserView</router-link)
    </div>
    <router-view/>
</template>

上記のコードでは、router-link to「___」の___部分にroute/indexが含まれています.jsに登録されたコンポーネントファイルのpath:部分を含む.______部分にname:部分があることがわかります.
|参考書:Vue.jsプロジェクト投入前週-高勝元