使用CDN方法的方式进行Vue.js的安装

简介: 最近公司需要进行一些前端的开发工作用到了Vue前端框架,所以准备自学Vue,顺便几下学习的过程以及一些问题。

前言


最近公司需要进行一些前端的开发工作用到了Vue前端框架,所以准备自学Vue,顺便几下学习的过程以及一些问题。


正文


使用Vue框架的话,首先需要在自己的电脑上安装Vue.js。安装Vue.js有两种方式,一种是直接下载进行独立安装,另一种则是用CDN的方式。独立版本的话,可以直接去在Vue.js的官网 直接下载 vue.min.js 并在用 (摘自百度百科)。即不需要下载下来自己通过在,因为会比较稳定,并且会保持和 npm 发布的最新的版本一致。接下来开始引入CDN并且实例化Vue对象。


实战


首先在桌面(或者任意位置)新建一个vueDemo的文件夹,并且用sublime(或者任意文本编辑器)打开,打开结果如下所示,


dbe46bed7f414415b4f10aa2b37aaea6~tplv-k3u1fbpfcp-zoom-in-crop-mark_1304_0_0_0.webp.jpg


然后新建一个html文件,命名为index.html(或者任意.html),如下图所示。


5c335e6b953d4c89a036ecd61f537345~tplv-k3u1fbpfcp-zoom-in-crop-mark_1304_0_0_0.webp.jpg


然后在html文件的框架内引入CDN,并且命名title,如下图所示


e8c630ef3df44cdea1ce55b50852de69~tplv-k3u1fbpfcp-zoom-in-crop-mark_1304_0_0_0.webp.jpg


然后新建一个app.js文件,并且在html文件中的script的src中引入,表示app.js是一个根容器。


5bf2968da17f49888e7270ca5c6d407b~tplv-k3u1fbpfcp-zoom-in-crop-mark_1304_0_0_0.webp.jpg


在app.js中实例化Vue对象。


14e7d24afe4d47788a7668b552886949~tplv-k3u1fbpfcp-zoom-in-crop-mark_1304_0_0_0.webp.jpg


108d62a69960407b8ed8ed20150e2b18~tplv-k3u1fbpfcp-zoom-in-crop-mark_1304_0_0_0.webp.jpg


5bf2968da17f49888e7270ca5c6d407b~tplv-k3u1fbpfcp-zoom-in-crop-mark_1304_0_0_0.webp.jpg


data用于数据的存储,格式为data:{},大括号中间则是具体的数据和值,有点类似java中map的形式,,data可以存储各种的数据类型,每个数据用,进行分割开来。比如


0cf3ac33c200406c990f9c374c5dd784~tplv-k3u1fbpfcp-zoom-in-crop-mark_1304_0_0_0.webp.jpg


接着在html中引入data中的值,格式为{undefined{}}中间加上具体的数据名称


dfe45d6ebe4d42b19aebb7bbff962bb1~tplv-k3u1fbpfcp-zoom-in-crop-mark_1304_0_0_0.webp.jpg


保存全部文件,打开文件夹,双击index.html用浏览器打开就会出现,页面会出现如下的结果:


8f15c7839b704646b8a82e301f1ecc77~tplv-k3u1fbpfcp-zoom-in-crop-mark_1304_0_0_0.webp.jpg


则通过CDN的方式引入Vue.js完成了。


总结


以上就是如何采用CDN的方式引入vue.js并实现安装,在实际开发中也是比较好用的!


每天学习一点点,每天进步一点点!


目录
相关文章
|
JavaScript Linux 内存技术
Debian 11系统下Node.js版本更新方法详解
本指南详细介绍在Linux系统中安装和管理Node.js的步骤。首先检查现有环境,包括查看当前版本和清除旧版本;接着通过NodeSource仓库安装最新版Node.js并验证安装结果。推荐使用nvm(Node Version Manager)进行多版本管理,便于切换和设置默认版本。同时,提供常见问题解决方法,如权限错误处理和全局模块迁移方案,以及版本回滚操作,确保用户能够灵活应对不同需求。
1506 0
|
JavaScript Linux 内存技术
Debian 11系统下Node.js版本更新方法
Debian 11更新Node.js主要就是这三种方式,无论你是初涉其中的新手还是找寻挑战的专家,总有一种方式能满足你的需求。现在,你已经是这个
1515 80
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
710 1
|
11月前
|
JavaScript Unix Linux
nvm与node.js的安装指南
通过以上步骤,你可以在各种操作系统上成功安装NVM和Node.js,从而在不同的项目中灵活切换Node.js版本。这种灵活性对于管理不同项目的环境依赖而言是非常重要的。
3577 11
|
存储 前端开发 JavaScript
仿真银行app下载安装, 银行卡虚拟余额制作app,用html+css+js实现逼真娱乐工具
这是一个简单的银行账户模拟器项目,用于学习前端开发基础。用户可进行存款、取款操作,所有数据存储于浏览器内存中
|
监控 JavaScript Java
Node.js中内存泄漏的检测方法
检测内存泄漏需要综合运用多种方法,并结合实际的应用场景和代码特点进行分析。及时发现和解决内存泄漏问题,可以提高应用的稳定性和性能,避免潜在的风险和故障。同时,不断学习和掌握内存管理的知识,也是有效预防内存泄漏的重要途径。
1108 159
|
资源调度 JavaScript 前端开发
前端开发必备!Node.js 18.x LTS保姆级安装教程(附国内镜像源配置)
本文详细介绍了Node.js的安装与配置流程,涵盖环境准备、版本选择(推荐LTS版v18.x)、安装步骤(路径设置、组件选择)、环境验证(命令测试、镜像加速)及常见问题解决方法。同时推荐开发工具链,如VS Code、Yarn等,并提供常用全局包安装指南,帮助开发者快速搭建高效稳定的JavaScript开发环境。内容基于官方正版软件,确保合规性与安全性。
15201 23
|
JavaScript 前端开发 Java
js 垃圾回收机制的方法
JS回收机制方法讲解