La colonne
Tutoriel Vue.js présente la planification de l'apprentissage et la compréhension de Vue.js, vous pouvez apprendre ensemble.
Cette note d'étude enregistrera certains des codes de programme et des expériences d'apprentissage que j'ai personnellement écrits lors de l'apprentissage du framework Vue.js. Pour ce faire, je vais créer un répertoire nommé ProgrammingLanguage/JavaScript
sous le répertoire vuejs
, et configurer les deux sous-répertoires suivants sous ce répertoire :
note
est utilisé pour stocker markdown
Formater les notes. Le répertoire code
permet de stocker le code du programme enregistré dans les notes. Cette partie des notes enregistrera ma compréhension conceptuelle du framework Vue.js, ainsi que mon expérience dans le projet Présenter les méthodes spécifiques du framework et écrire un programme "Hello World".
Vue.js est un framework progressif pour la création d'interfaces utilisateur. Le framework est conçu pour être appliqué couche par couche de bas en haut. Sa bibliothèque principale se concentre uniquement sur la couche de vue, qui est non seulement facile à démarrer, mais également facile à intégrer à des bibliothèques tierces ou à des projets existants. D'un autre côté, lorsqu'il est combiné avec une chaîne d'outils moderne et diverses bibliothèques de support, Vue.js est entièrement capable de piloter des applications complexes d'une seule page. En bref, Vue.js possède les fonctionnalités suivantes :
Bien sûr, puisque l'auteur de Vue.js est chinois, les informations chinoises de la communauté Vue.js sont également plus riches que celles des autres communautés de framework JavaScript, ce qui est pour de nombreux utilisateurs qui sont habitués à lire en chinois. C'est peut-être la raison pour laquelle nous avons choisi d'utiliser ce cadre.
Comme la plupart des bibliothèques frontales et frameworks d'application JavaScript, il existe deux manières principales d'introduire le framework Vue.js dans votre propre projet : référence CDN et local référence. Découvrons-les séparément ci-dessous.
CDN est l'abréviation de Content Delivery Network ou Content Distribution Network, qui est un serveur qui utilise le système Internet existant le plus proche de l'utilisateur cible. distribuer de la musique, des images, des vidéos, des applications et d'autres supports de données, dans le but de fournir aux utilisateurs des performances élevées, une évolutivité et une diffusion de contenu réseau à faible coût. En d'autres termes, lors de l'utilisation de la méthode de référence CDN, le fichier de framework Vue.js sera stocké sur un nœud de serveur dans le réseau de service CDN désigné, et le service sera responsable de la charge d'accès et de la maintenance de la version du fichier de framework. le framework, et il suffit de référencer l'URL du service CDN correspondant dans la balise <script>
du document HTML, comme ceci :
<!-- 开发环境版本,包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- 或者 --> <!-- 生产环境版本,优化了文件大小和载入速度 --> <script src="https://cdn.jsdelivr.net/npm/vue"></script>
Dans l'exemple ci-dessus, j'ai testé en utilisant le cdn.jsdelivr.net
fourni Service CDN pour référencer le framework Vue.js, qui est également le service recommandé dans le tutoriel officiel de Vue.js. Quant à savoir s'il faut référencer la version de l'environnement de développement ou la version de l'environnement de production, cela dépend du scénario d'utilisation spécifique. Dans des circonstances normales, je choisirais d'utiliser la version de l'environnement de développement avec des informations de retour relativement riches pendant la phase de développement du programme, et j'attendrais que le programme soit publié avant de passer à la version de l'environnement de production qui recherche une plus grande efficacité d'exécution. Jetons un coup d'œil aux avantages de l'utilisation du CDN comme méthode de citation :
当然了,这种引用方式归根结底都得依赖于网络环境,甚至很多时候是国外的网络环境,由于众所周知的原因,我们的网络环境经常会受到各种不可抗力的影响,所以我个人更倾向于将框架文件下载到本地来引用。
正如上面所说,如果想减少意外状况,最好的选择是将 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视频教程
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!