Vue-cli アプリケーションと Vue2 のコンポーネントの基本的な理解
一、Vue-cli
1. 単一ページのアプリケーション
シングルページ アプリケーション (SPA) は、HTML ページが 1 つだけある Web サイトを指し、すべての機能と操作がこの唯一のページで完了します。
2. vue-cli の概要
Vue-cli は Vue.js 開発の標準ツールであり、プログラマが Webpack に基づいてエンジニアリングされた Vue プロジェクトを作成するプロセスを簡素化します。
中国公式サイト：https://cli.vuejs.org/zh/
3. インストールと使用方法
Vue-cli は npm 上のグローバル パッケージであり、npm install コマンドを使用してコンピュータに簡単にインストールできます。
npm install -g @vue/cli
インストールが成功したら
、コマンドを入力して正常かどうかを確認します
vue -V
そうであれば、それは成功を意味します
4. プロジェクトを作成する
4.1 プロジェクト作成のための入力
vue create 自定义的项目名
4.2 3 番目の項目を選択し、自己設定を実行し、Enter を押します。
4.3 必要なライブラリを選択する
スペースバーを押して選択または選択を解除します
4.4 Vue のバージョンを選択する
ニーズに応じて選択してください
4.5 CSSセレクターの選択
ニーズに応じて選択してください
4.6 Babel、ESLintなどの設定ファイルの保存方法を選択します。
最初の項目は別のファイルにアーカイブされ、
2 番目の項目は package.json に保存されます。
最初の項目はデフォルトで選択されます。
4.7 行ったすべての選択内容を保存します。これらの選択内容は、次回プロジェクトを作成するときに再確認することなく自動的にデフォルト設定されます。
y を入力すると、選択内容が保存されます。「N」を入力すると、選択内容は保存されず、次回再度確認する必要があります。
4.8 プロジェクト名を書く
4.9 実行後の結果
以下のように成功しました
4.10 サービスを開始する
まずは作成したプロジェクトのディレクトリに入ります
cd 项目名
サービスを再起動する
npm run serve
やっと
アドレスをブラウザにコピーすると、
結果は次の図のようになり、サービスが正常に開始されたことがわかります。
5. プロジェクトカタログの解釈
5.1 node_modules ディレクトリ
すべてのサードパーティパッケージを保存する
5.2 パブリックディレクトリ
(1)
favicon.ico ウェブサイトのアイコン
(2)
index.htmlで生成されたファイルが挿入されます。
5.3 srcディレクトリ
プロジェクトのソース コード ディレクトリ。すべてのコードは src ディレクトリにあります。
(1) アセット フォルダーには
、CSS スタイル シート、画像リソースなど、プロジェクトで使用される静的リソース ファイルが保存されます。
(2) コンポーネント フォルダーには、
カプセル化された再利用可能なコンポーネントが格納されます。
(3) main.js ファイルは
、プロジェクトのエントリ ファイルです。プロジェクト全体を実行するには、まず main.js を実行する必要があります
(4) App.vue ファイル
プロジェクトのルート コンポーネント
5.4 .gitignore ファイル
git関連の設定
5.5 babel.config.js ファイル
バベル設定ファイル
5.6 package.json ファイル
パッケージ管理設定ファイル
6. vueプロジェクトの実行プロセス
(1) レンダリングするテンプレート構造を記述するために App.vue を使用します
(2) Index.html 内に el 領域を確保する必要があります
(3) main.js は、Index.html で確保された領域に App.vue をレンダリングします
7. $mount() メソッド
7.1 はじめに
Vue インスタンスの $mount() メソッドには、el 属性とまったく同じ機能があります。
7.2 関連コード
<!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">
<title>Document</title>
<link rel="stylesheet" href="./lib/bootstrap.css">
</head>
<body>
<div id="app">
{
{username}}
</div>
<!--1.导入Vue的库文件，在window全局就有了Vue这个构造函数-->
<script src="./lib/vue-2.6.14.js"></script>
<!--2.创建Vue的实例对象-->
<script>
// 创建Vue的实例对象
// 相当于 ViewModel层
const vm = new Vue({
// data对象就是要渲染到页面上的数据
// 相当于 model层
data: {
username: 'admin'
},
})
vm.$mount('#app')
</script>
</body>
</html>
2. Vue コンポーネントの簡単なアプリケーション
1. コンポーネント開発
コンポーネントベースの開発とは、カプセル化の考え方に従って、プロジェクトの開発とメンテナンスを容易にするために、ページ上の再利用可能な UI 構造がコンポーネントにカプセル化されることを指します。
2. vueでのコンポーネント開発
(1) Vue は、コンポーネントベースの開発をサポートするフロントエンド フレームワークです。
(2) Vue では、コンポーネントのサフィックスは .vue であると規定されています。つまり、App.vue ファイルは本質的に vue コンポーネントです。
3. vue コンポーネントの 3 つのコンポーネント
3.1 テンプレート
コンポーネントテンプレートの構造
3.2 スクリプト
コンポーネントの JavaScript の動作
3.3 スタイル
コンポーネントスタイル
4. vue コンポーネントの使用
4.1 はじめに
メイン コードは template タグの下に記述され、JavaScript コードは script タグの下に記述され、エクスポート デフォルトも必要です。CSS コードは style タグの下に記述され、lang="less" も必要です。
4.2 コード
<template>
<div>
<div class="text-box">
<h3>自定义的属性 {
{ username }}</h3>
<button @click="changeName">修改用户名</button>
</div>
</div>
</template>
<script>
// 默认导出，这是固定写法
export default {
// data 数据源
// 注意：.vue组件中的data不能像之前一样，不能指向对象
// 注意：组件中的data必须是一个函数
data(){
// 这个return出去的{}中，可以定义数据
return {
username: 'admin'
}
},
methods: {
changeName(){
console.log(this.username)
// 在组件中，this就表示当前组件的实例对象
this.username = '张三'
}
},
// 当前组件中的侦听器
watch:{
},
// 当前组件中的计算属性
computed:{
},
// 当前组件中的过滤器
filters:{
},
};
</script>
// CSS渲染
<style lang="less">
.text-box{
background-color: aqua;
h3{
color: red;
}
}
</style>
4.3 結果
