Vue.js チュートリアル コラムでは学習計画と Vue.js の理解について紹介しており、一緒に学ぶことができます。
#この学習ノートでは、Vue.js フレームワークを学習するときに私が個人的に書いたプログラム コードと学習体験の一部を記録します。これを行うには、
ProgrammingLanguage/JavaScript ディレクトリの下に vuejs という名前のディレクトリを作成し、このディレクトリの下に次の 2 つのサブディレクトリを設定します。 #note
ディレクトリは、ノートを
markdown- 形式で保存するために使用されます。
code ディレクトリは、メモに記録されたプログラム コードを保存するために使用されます。
学習計画
基礎学習:
HTML、CSS、JavaScriptに関する基礎知識を習得します。わかりました。
- npm パッケージ マネージャーの基本的な使い方をマスターしました。
- B/S アプリケーション アーキテクチャの基本原則を理解します。
-
- 学習教材:
ビデオ チュートリアル: Dark Horse Programmer の Vue.js 教育ビデオ
- オンライン ドキュメント: Vue.js 公式チュートリアル
- 参考書籍:「わかりやすい Vue.js」
-
- 学習目標:
「クラウド メモ帳」アプリケーションを開発します。
- パート 1: Vue.js フレームワークを理解する
Vue.js の概要
Vue.js は、ユーザー インターフェイスを構築するための進歩的なフレームワークです。このフレームワークは、ボトムアップでレイヤーごとに適用されるように設計されており、そのコア ライブラリはビュー レイヤーのみに焦点を当てており、開始が簡単であるだけでなく、サードパーティのライブラリや既存のプロジェクトとの統合も簡単です。一方、最新のツール チェーンやさまざまなサポート ライブラリと組み合わせると、Vue.js は複雑なシングルページ アプリケーションを完全に駆動できます。つまり、Vue.js には次のような特徴があります。
は従来の HTML に似たテンプレート構文を使用しており、初心者にとっては簡単に始めることができます。
仮想 DOM モデルを使用して、ページ要素の操作を簡素化します。
- レスポンシブ ビュー コンポーネントを使用すると、プログラム インターフェイスのユーザー エクスペリエンスが向上します。
- ページのレンダリング速度は非常に速いため、アプリケーションの実行パフォーマンスが向上します。
- React のような複雑で大規模なアプリケーションを構築するためのルーティング インターフェイスを提供できます。
- jQuery のような、使いやすく、適切にカプセル化された操作インターフェイスも提供できます。
- もちろん、Vue.js の作者は中国人であるため、Vue.js コミュニティの中国語情報も他の JavaScript フレームワーク コミュニティよりも豊富です。中国語で読むことに慣れていることが、このフレームワークを使用する理由かもしれません。
- Vue.js フレームワークの紹介
ほとんどの JavaScript フロントエンド ライブラリやアプリケーション フレームワークと同様、Vue.js フレームワークを独自のプロジェクトに導入するには、主に 2 つの方法があります。CDN リファレンスとローカルです。以下で個別に説明します。
CDN 引用
CDN は Content Delivery Network または Content Distribution Network の略称で、対象ユーザーに最も近い既存のインターネット システムを使用するサーバーです。音楽、写真、ビデオ、アプリケーション、その他のデータ素材を配信し、ユーザーに高性能、拡張性、低コストのネットワーク コンテンツ配信を提供することを目指しています。つまり、CDN 参照方式を使用する場合、Vue.js フレームワーク ファイルは指定された CDN サービス ネットワーク内のサーバー ノードに保存され、フレームワーク ファイルのアクセス負荷とメンテナンスはサービスが責任を負います。フレームワークを使用する必要があるため、次のように HTML ドキュメントの
<script>
タグで対応する CDN サービスの URL を参照するだけで済みます。
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 或者 -->
<!-- 生产环境版本，优化了文件大小和载入速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
ログイン後にコピー
上記の例では、 test cdn.jsdelivr.net が提供する CDN サービスを使用して Vue.js フレームワークを参照するには、これも Vue.js 公式チュートリアルで推奨されているサービスです。開発環境のバージョンを参照するか、本番環境のバージョンを参照するかについては、具体的な使用シナリオによって異なります。通常であれば、プログラムの開発段階ではフィードバック情報が比較的豊富な開発環境版を選択し、プログラムのリリースを待ってより実行効率を追求した本番環境版に切り替えることになります。 CDN を参照方法として使用する利点を見てみましょう:
- CDN 的总承载量可以比单一骨干最大的带宽还要大。这使得内容分发网络可以承载的用户数量比起传统单一服务器多。
- CDN 服务器可以被放置到不同地点，这有助于减少计算机之间互连的流量，进而降低带宽成本。
- CDN 通常会指派较近、较顺畅的服务器节点将资料传输给用户。虽说距离并非影响传输的绝对因素，但这可以尽可能提高性能和用户体验。
- CDN 上存储的资料通常都会有异地备援，即当某个服务器故障时，系统将会调用其他邻近地区的服务器资料，以提高服务的可靠度。
- CDN 提供给服务提供者更多的控制权，即提供服务的人可以针对客户、地区，或是其他因素来做相应的调整。
当然了，这种引用方式归根结底都得依赖于网络环境，甚至很多时候是国外的网络环境，由于众所周知的原因，我们的网络环境经常会受到各种不可抗力的影响，所以我个人更倾向于将框架文件下载到本地来引用。
本地引用
正如上面所说，如果想减少意外状况，最好的选择是将 Vue.js 的框架文件下载到本地，然后再引用它们。下载这类文件的方式有很多，现如今为了便于更新版本，人们通常会选择使用 npm 这类包管理器来下载 JavaScript 的各种程序库和应用框架。具体做法就是在之前创建的code目录下执行以下命令：
npm install vue --save
# 如果需要相应的权限，可以使用 sudo 命令来提权
ログイン後にコピー
如果安装过程一切顺利，接下来就只需要在 HTML 文档的<script>标签中引用框架文件的路径即可，像这样：
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="node_modules/vue/dist/vue.js"></script>
<!-- 或者 -->
<!-- 生产环境版本，优化了文件大小和载入速度 -->
<script src="node_modules/vue/dist/vue.min.js"></script>
ログイン後にコピー
在这里，选择开发环境版本还是生产环境版本的依据是一样的，就不再重复了。下面来验证一下框架文件是否被成功引入。
程序验证
我将通过编写一个"Hello World"程序来验证 Vue.js 框架是否已被成功引入，具体步骤如下：
在code目录下创建一个名为01_sayHello的项目目录，并在该目录下设置以下两个子目录：
img目录：用于存放图片资源。js目录：用于存放自定义 JavaScript 脚本文件。
将名为logo.png的图表文件存储到code/01_sayHello/img目录中。
在code/01_sayHello目录中创建一个名为index.htm的 HTML 文档，并在其中输入如下代码：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script defer="defer" src="../node_modules/vue/dist/vue.js"></script>
<script defer="defer" src="js/main.js"></script>
<title>你好，Vue.js</title>
</head>
<body>
<p id="app">
<h1> {{ sayHello }} </h1>
<img :src="vueLogo" style="width:200px">
</p>
</body>
</html>ログイン後にコピー
在code/01_sayHello/js目录中创建一个名为main.js的 JavaScript 脚本文档，并在其中输入如下代码：
// 程序名称： sayHello
// 实现目标：
// 1. 验证 Vue.js 执行环境
// 2. 体验构建 Vue.js 程序的基本步骤
const app = new Vue({
el: '#app',
data:{
sayHello: '你好，Vue.js！',
vueLogo: 'img/logo.png'
}
});ログイン後にコピー
接下来只需将相关的 Web 服务运行起来（该服务器可以是 Apache 或者 Nginx，也可以是 VSCode 的 Live Sever 插件），然后如果在 Web 浏览器中看到如下页面，就说明 Vue.js 框架已经被引入到了程序中，并被成功执行起来了。
更多相关免费学习推荐：js视频教程
以上がVue.js 学習記録 1: 学習計画と Vue.js の理解の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
