Vueとは?
Vue.jsとは何ですか。
2014年2月、エヴァンユーが公式公開ページの画面を開発するために設計したJavaScriptフレームワークは初めてだ。Reactの利点とAngularの利点をもたらし,使いやすい。Reactの仮想Dom方式とAngularの双方向データバインド機能をもたらした。性能はReactとAngularより優れている。Reactのようにコンポーネント方式を使用します。(SPAモード)MVVMモードを使用します。
フレームワークとは?
開発者の開発効率を向上させるために、一定のツールとルールに従って開発するために、構造のツールを定義しておきます。
MVVMモードとは?
MVVMモードは「モデル」+「ビュー」+「ビューモデル」の構造化された開発方式を採用している。このように開発されたのは、制御画面要素のコードとデータ制御ロジックを分離することで、コードをより直感的に理解し、今後のメンテナンスを容易にするためである。
こうぞう
モデル:Web上で使用されるデータとそのデータを処理する部分。ビュー(View):ユーザーが表示するUI部分ドーム(DOM):HTMLドキュメントの要素(タグ、クラス、属性など)情報を含むデータツリードームマネージャ(DOM Listeners):ドームの変更に即座に応答して特定の論理を実行するデバイスデータバインド(Data Binding):ビュー同期ビューモデル(View Model):ビューを表すビューモデル。ビューを表すモデルとビューを表すデータ処理部
Vue instance
ビューインスタンスは、ビューで画面を開発するために必要な基本単位です。インスタンスを作成しないと、ビュー自体を開発することはできません。インスタンスを作成するには、新しいVueを作成します。
使用方法
1.CDNのインポート方法（簡単な練習時）
「ビュー」公式サイト-https://kr.vuejs.org/v2/guide/installation.htmlにアクセスします.
jQueryメソッドと同様に、このセクションではCDNをHTMLファイルに書き込み貼り付けます.
インポートしたCDNを使用してVueインスタンスを作成
<!DOCTYPE html>
<html lang="ko">
<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">
<title>Vue Cdn Test</title>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
</script>
</body>
</html>2.NPM方式（CLI）
Vue自動プロセス
( 1 ) Node.jsインストール
ノードjs公式サイト-https://nodejs.org/ko/理由を表すはnodeに接続されています.js install受信とインストール
(2)VscodeのVueを使用してプロジェクトを行うフォルダを開き、端末(ctrl+’)を開き、パスがVueを使用してプロジェクトを行うフォルダに適しているかどうかを確認し、npm install-g@vue/cliでインストール完了を入力した後、vue createディレクトリ名を作成する際に、2バージョンと3バージョンのどちらにインストールするかを選択できます。
VUE 2とVUE 3のバージョンの違い
詳細-https://velog.io/@bluestragglr/Vue3-%EB%AC%B4%EC%97%87%EC%9D%B4-%EB%B0%94%EB%80%8C%EB%82%98%EC%9A%94
cmdコマンドvue createディレクトリ名を使用して作成したcdディレクトリ名に移動し、npm run serveを使用してVueを実行します。
※Webブラウザ。vueファイルを読み込めません。jsしか読めないので、webpackというバンドルパッケージを使用する必要がありますが、上記の方法で自動的にwebpackをインストールするには時間がかかります。以下、手動方法です。※
手動メソッドもVUE 2バージョンとVUE 3バージョンとは若干異なります。(package.jsonとjsファイルでインスタンスを作成したときの違い)
Vue手動Webパッケージ手動プロセス
https://velog.io/@chyori/webpack
この記事では、Webpackの基本構成手順に従って操作し、VueLoaderPluginを追加すればよい。(同じVUE 2、VUE 3)
※基本設定プログラム+Vueまとめ
インストールが必要なモジュール
作成するファイルとフォルダが必要です。
HTMLファイル
<!DOCTYPE html>
<html lang="ko">
<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">
<title>CVA</title>
</head>
<body>
<div id="root"></div>
</body>
</html>webpack.config.jsファイル
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { VueLoaderPlugin } = require('vue-loader');
module.exports = {
mode: 'development',
resolve: {
extensions: ['*', '.vue', '.js'],
alias: {
'@': __dirname + '/src'
}
},
entry : __dirname + '/src/index.js',
output : {
path: __dirname + '/build',
filename: 'index.js'
},
module: {
rules: [
{
test: /\.vue$/, use: ['vue-loader']
},
{
test: /\.(png|jpg|jpeg|avi|mp4|wav|ico|bmp|gif|svg)$/, use: ['file-loader']
},
{
test: /\.(c|sa|sc)ss$/, use: ['style-loader', 'css-loader', 'sass-loader']
},
{
test: /\.html$/, use: ['html-loader']
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: __dirname + '/src/index.html',
filename: 'index.html'
}),
new VueLoaderPlugin()
],
devServer: {
open: true
}
}VUE 2バージョンインデックス。jsファイル
import Vue from 'vue';
import App from './app';
import router from './router.js';
new Vue({
router,
render: h => h(App),
}).$mount('#root');VUE 3バージョンインデックス。jsファイル
import { createApp } from "vue";
import Store from "./Store";
import Router from "./Router";
import App from './App.vue';
const app = createApp(App);
app.use(Store);
app.use(Router);
app.mount('#root');https://kr.vuejs.org/v2/guide/installation.html
https://beomy.tistory.com/43
Reference
この問題について(Vueとは?), 我々は、より多くの情報をここで見つけました https://velog.io/@chyori/Vueテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol