vue2学习笔记-官网使用指南和搭建开发环境

官网使用指南

官网地址:介绍 — Vue.js

1、学习

1.1 教程和API

最重要的两个板块。API是VUE的字典,需要时来查阅。

1.2、风格指南

如何写出风格优雅的VUE代码。规则分为四类:必要的,强烈推荐、推荐、谨慎使用。

1.3、示例

在github上提供了一部分案例,包含源码和效果预览。但是速度很慢。

1.4、cookbook

编码技巧,JS基本功,和VUE的一些使用技巧

1.5、视频教程

与VUE官方有合作的视频教程。

2、生态系统

2.1、工具和核心插件

很重要,但是初学者暂时还接触不到。可以延后学习。

脚手架:Vue CLI

路由:Vue Router

3、资源列表

3.1、主题

预定义好的一些样式和主题,可以直接使用。国内有更好的,免费的。

3.2、awesome

封装好的第三方周边库。

3.3、浏览和Vue相关的包

与Awesome差不多,一些支持的三方库,比如Element UI

搭建开发环境

1、安装

1.1 直接使用<script>引入

  • 开发版本:包含完整的警告和调试模式,其中的调试信息比较友好。vue.js
  • 生产版本:删除了警告,vue.min.js

CDN: script中所引用的src为远程路径(http://)时,使用CDN加速。详见备注。

1.1.1 安装vs.code及插件live server

vs.code是一款跨平台的、免费且开源的现代轻量级代码编辑器。

官网:Visual Studio Code - Code Editing. Redefined

国内镜像下载地址:Visual Studio Code – VSCODE 中国区下载加速 – 白盒子网

安装后,打开vs code, 点击左侧扩展(extensions),搜索并安装live server

1.1.2 安装Vue开发者工具-chrome插件Vue.crx

1)chrome,管理扩展程序中打开开发者模式。

2)将vue.crx拖到扩展程序窗口中,添加。

3)将插件固定在工具栏上,方便使用

1.1.3、引入vue

创建如图目录结构:

代码:

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>初识Vue</title><!--引入vue.js,则全局就会多了一个vue的构造函数--><script type="text/javascript" src="../js/vue.js"></script></head>
</html>
 1.1.4、验证Vue引入成功

在页面中,右键并选择open with live server,将在浏览器中打开一个名称为“初识Vue”的空白页。

打开开发者工具,切换到控制台(console),按ctrl+F5强制刷新:

在其中输入Vue,可以看到该实例(对象)已存在,被成功引入。

 1.1.5 关闭开发版本警告 - 方法1,可能不起作用

1)查看官网API

2)查看Vue.config中的属性:

3)查看官网API中关于productionTip的解释: 

4)设置productionTip = false

然而很不幸,没关掉,productionTip已经是false,但是提示依然存在。

1.1.6 关闭开发版本警告 - 方法2,直接修改vue.js源文件

1.2 NPM + 命令行工具CLI(脚手架)

待学习

备注:CDN

CDN(内容分发网络)是一种用于提高网站性能和可用性的技术。在Vue中,CDN被用来通过网络加载Vue的核心库以及其他相关的库。

Vue的核心库通常通过CDN提供,这意味着你可以直接在HTML文件中引用CDN链接,而不需要通过npm安装并在项目中引入Vue。这样做有一些优势:

  1. 加载速度快:CDN通常具有全球广泛的节点分布,可以根据用户的地理位置选择最近的服务器来提供资源,从而加快加载速度。

  2. 可靠性高:CDN使用多个服务器来缓存和提供资源,即使某个服务器发生故障,其他服务器仍然可以提供资源,确保网站的可用性。

在Vue的官方文档中,CDN链接提供了Vue的压缩和非压缩版本的核心库,以及Vue的运行时构建和带编译器的完整构建版本。你可以根据自己的需要选择适合的链接引用到你的HTML文件中。

例如,以下是引用Vue核心库的CDN链接的示例:

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script>

这将在你的HTML文件中加载Vue的压缩版本的核心库。

需要注意的是,CDN链接可能会因为网络问题或其他原因而无法访问,因此在实际应用中,你可能需要提供一个备用的本地文件引用,以防止CDN链接无法使用。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/45029.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

初始网络知识

前言&#x1f440;~ 上一章我们介绍了使用java代码操作文件&#xff0c;今天我们来聊聊网络的一些基础知识点&#xff0c;以便后续更深入的了解网络 网络 局域网&#xff08;LAN&#xff09; 广域网&#xff08;WAN&#xff09; 路由器 交换机 网络通信基础 IP地址 端…

PCI PTS 硬件安全模块(HSM)模块化安全要求 v5.0

符合条件的 PCI SSC 利益相关者在 30 天的意见征询 (RFC) 期间审查 PCI PTS 硬件安全模块 (HSM) 模块化安全要求 v5.0 草案并提供反馈。 PCI PTS 硬件安全模块(HSM)模块化安全要求 v5.0图 从 7 月 8 日到 8 月 8 日&#xff0c;邀请符合条件的 PCI SSC 利益相关者在 30 天的意见…

【linux】服务器创建RAID1(软件配置RAID1)

【linux】服务器创建RAID1(软件配置RAID1) 文章目录 【linux】服务器创建RAID1(软件配置RAID1)一、配置介绍raid介绍raid类型RAID 0:RAID 1:RAID 5:RAID 6:二、配置RAID硬件RAID:软件RAID:三、软件配置RAID1(以linux为例)1.先进入管理员模式2.安装mdadm工具3.创建raid1数…

SSH服务器CBC漏洞(CVE-2008-5161)

漏洞简介 OpenSSH 是一种开放源代码的SSH协议的实现,初始版本用于OpenBSD平台,现在已经被移植到多种Unix/Linux类操作系统下,Linux环境中一般采用AES这种算法加密,AES有五种加密模式(CBC、ECB、CTR、OCF、CFB),系统默认会选择CBC的加密模式。 CBC模式是一种常用的对称…

存取款系统接口设计

题目描述&#xff1a; 设计一个存取款接口&#xff0c;入参是账户数组balances 与存取款请求体数组requests 对于取款要求判断&#xff1a; 当前余额不足&#xff0c;返回余额不足帐号 之前的取款时间在24之前的&#xff0c;在24小时之后返回上次取款额度的百分之2并向下取整。…

Hive期末测试题(头歌)

第1关&#xff1a;计算“Bad Boys (1995)”这部电影的评分次数 -- 使用mydb数据库 USE mydb;-- 计算“Bad Boys (1995)”这部电影的评分次数 SELECT m.movieid, m.moviename, COUNT(r.movieid) AS rating_count FROM t_movies m JOIN t_ratings r ON m.movieid r.movieid WHE…

【欧几里得算法】C++求解最大公因子:求解两个正整数的最大公因子

1. 算法描述&#xff1a; 【欧几里得算法】求解两个正整数m&#xff0c;n的最大公因子 2. 算法求解步骤&#xff1a; E1&#xff08;求两个整数的余数&#xff09;&#xff1a;求两个正整数的余数&#xff0c;r m % nE2&#xff08;判断余数是否为0&#xff09;&#xff1a…

遥感影像图像识别

遥感影像图像识别 基于遥感影像的道路提取论文、开源代码和数据集汇总

C语言 结构体和共用体——结构体所占内存的字节数

目录 结构体所占内存的字节数 结构体所占内存的字节数

Unity之OpenXR+XR Interaction Toolkit实现 Gaze眼部追踪

使用 Unity OpenXR 实现Gaze眼部追踪 在虚拟现实(VR)和增强现实(AR)应用中,眼动追踪是一项强大而受欢迎的技术。它可以让开发者更好地理解用户的注意力和行为,并创造出更加沉浸和智能的体验。在本文中,我们将探讨如何使用 Unity OpenXR 实现Gaze眼部追踪功能。 Unity …

Linux文件:EXT2文件系统工作原理 软硬链接

Linux文件&#xff1a;文件系统究竟是什么&#xff1f;如何管理文件&#xff1f; 前言一、磁盘结构、存储策略1.1 磁盘存储结构1.2 磁盘存储策略1.3 磁盘的逻辑存储结构 二、如何管理磁盘文件三、如何管理组3.1 每个组保存的数据种类3.2 如何管理数据1、节点表&#xff08;inod…

科普文:Shell编程三剑客:grep+sed+awk

shell三剑客是grep、sed和awk三个工具的简称,因功能强大&#xff0c;使用方便且使用频率高&#xff0c;因此被戏称为三剑客&#xff0c;熟练使用这三个工具可以极大地提升运维效率。 三剑客的特点: 命令 特点 使用场景 grep 擅长查找过滤 快速查找过滤 sed 擅长取行和替…

智慧城市可视化页面怎么做?免费可视化工具可以帮你

智慧城市是一个综合性的概念&#xff0c;广泛应用于各个领域&#xff0c;如基础设施建设、信息化应用、产业经济发展、市民生活品质等。 可视化页面的制作也是一个综合性的过程&#xff0c;需要确定展示内容、数据收集与处理、设计可视化元素等多个环节紧密配合。 1. 明确展示…

download failed after attempts=6: dial tcp 108.160.169.178:443: i/o timeout问题解决

添加公开的docker加速代理(可能会失效)&#xff1a; vim /etc/docker/daemon.json{"registry-mirrors":["https://docker.mirrors.sjtug.sjtu.edu.cn","https://docker.m.daocloud.io","https://noohub.ru","https://huecker.io…

序列化Serialization

介绍 序列化&#xff08;Serialization&#xff09;是将对象的状态转换为可存储或传输的格式的过程。通过序列化&#xff0c;可以将对象保存到文件中、数据库中&#xff0c;或者通过网络传输到远程系统。相应地&#xff0c;反序列化&#xff08;Deserialization&#xff09;是…

从零开始开发视频美颜SDK:实现直播美颜效果

因此&#xff0c;开发一款从零开始的视频美颜SDK&#xff0c;不仅可以节省成本&#xff0c;还能根据具体需求进行个性化调整。本文将介绍从零开始开发视频美颜SDK的关键步骤和实现思路。 一、需求分析与技术选型 在开发一款视频美颜SDK之前&#xff0c;首先需要进行详细的需求…

python对点云可视化设置颜色

1、背景介绍 点云分类/分割时&#xff0c;常需要对分类结果进行可视化&#xff0c;其中给点云赋予不同颜色是一种最直接方法。介绍基于python中matplotlib进行点云颜色渲染显示。 2、点云颜色渲染 2.1 有限种颜色渲染 matplotlib在点云颜色渲染时&#xff0c;使用表示颜色的关…

如何让接口请求,页面不刷新加载,页面加载中 不显示

check(data, config) {return request(Object.assign({url: dicEquPurpose/queryList,data: packQuery(data),noLoading:true }, config || {})) }, 加上 noLoading:true 即可

Spring开发实践(五)

接口幂等性 接口幂等性&#xff08;Idempotency&#xff09;是指在网络请求中&#xff0c;无论一个操作被执行多少次&#xff0c;产生的结果都是相同的。换句话说&#xff0c;幂等操作的多次执行不会改变系统的状态&#xff0c;或者说多次执行的结果与单次执行的结果是一样的。…

C++知识点总结(41):广度优先搜索

广度优先搜索 一、广度优先搜索1. 意义2. 分析3. 基本程序 二、例题1. 最短路径模板2. 跳跃的马2.1 审题2.2 思路2.3 参考答案 3. 今天就上 200 200 200 层3.1 审题3.2 参考答案 三、DFS VS. BFS *注&#xff1a;如果还没有学过 结构体 或者 栈/队列/优先队列 的同学请仔细看完…