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链接无法使用。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

java的遍历的方法对比 效率对比

在 Java 中&#xff0c;遍历对象的方式主要取决于对象的类型和数据结构。以下是几种常见的遍历方式&#xff0c;以及它们的效率比较&#xff1a; 普通的 for 循环&#xff1a; 效率&#xff1a;高。使用普通的 for 循环可以直接根据索引来访问元素&#xff0c;适用于数组和实现…

js vue table单元格合并

实现效果 关键代码 <table classtable table-bordered><thead><tr><th>检测项目</th><th>详细说明</th><th>检测结果</th><th>检测说明</th></tr></thead><tbody><tr ng-repeatrow in…

ant design pro多页签功能

效果&#xff1a; 原理&#xff1a; 1、所有需要页签页面&#xff0c;都需要一个共同父组件 2、如何缓存&#xff0c;用的是ant的Tabs组件&#xff0c;在共同父组件中&#xff0c;实际是展示的Tabs组件 3、右键&#xff0c;用的是ant的Dropdown组件&#xff0c;当点击时&…

基于红黑树对map和set的封装

前言 前面我们已经对红黑树做了介绍和实现&#xff0c;本期我们来对红黑树进一步改造&#xff0c;然后基于改造后的红黑树封装出map和set&#xff01; 本期内容介绍 • 红黑树的改造 • 红黑树的迭代器实现 • map的封装 • set的封装 • 全部源码 ● 红黑树的改造 我们目前…

【JavaEE】网络编程——UDP

&#x1f921;&#x1f921;&#x1f921;个人主页&#x1f921;&#x1f921;&#x1f921; &#x1f921;&#x1f921;&#x1f921;JavaEE专栏&#x1f921;&#x1f921;&#x1f921; 文章目录 1.数据报套接字(UDP)1.1特点1.2编码1.2.1DatagramSocket1.2.2DatagramPacket…

汽车预约维修小程序的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;技师管理&#xff0c;技师信息管理&#xff0c;用户预约管理&#xff0c;取消预约管理&#xff0c;订单信息管理&#xff0c;系统管理 微信端账号功能包括&#xff1a;系统首页&#xff0c;技师信息&a…

接上一回C++:补继承漏洞+多态原理(带图详解)

引子&#xff1a;接上一回我们讲了继承的分类与六大默认函数&#xff0c;其实继承中的菱形继承是有一个大坑的&#xff0c;我们也要进入多态的学习了。 注意&#xff1a;我学会了&#xff0c;但是讲述上可能有一些不足&#xff0c;希望大家多多包涵 继承复习&#xff1a; 1&…

并查集+链表,CF 1131F - Asya And Kittens

一、题目 1、题目描述 2、输入输出 2.1输入 2.2输出 3、原题链接 1131F - Asya And Kittens 二、解题报告 1、思路分析 本质是拼积木游戏 初始有n块积木&#xff0c;每次两块首尾拼成一块就行&#xff0c;拼接n - 1 次最后会得到一个大积木&#xff0c;我们从左往右输出组…

Nuxt3封装网络请求 useFetch $fetch

前言&#xff1a; 刚接触、搭建Nuxt3项目的过程还是有点懵的&#xff0c;有种摸石头过河的感觉&#xff0c;对于网络请求这块&#xff0c;与之前的Vue3项目有所区别&#xff0c;在Vue项目通常使用axios这个库进行网络请求&#xff0c;但在Nuxt项目并不推荐&#xff0c;因为有内…

【PostgreSQL】Spring boot + Mybatis-plus + PostgreSQL 处理json类型情况

Spring boot Mybatis-plus PostgreSQL 处理json类型情况 一、前言二、技术栈三、背景分析四、方案分析4.1 在PostgreSQL 数据库中直接存储 json 对象4.2 在PostgreSQL 数据库中存储 json 字符串 五、自定义类型处理器5.1 定义类型处理器5.2 使用自定义类型处理器 一、前言 在…

【PowerShell】-1-快速熟悉并使用PowerShell

目录 PowerShell是什么&#xff1f;和CMD的区别&#xff1f; PowerShell的演变 自动化IT管理任务 一些名词 详尽的PowerShell开始之路 1.打开PowerShell&#xff1a; 2.基本命令&#xff1a; &#xff08;1&#xff09;Get-Process &#xff08;2&#xff09;变量赋值…

React Hooks学习笔记

一、usestate的使用方法-初始化state函数 import React, { useState } from "react"; function App() {const [count, setCount] useState(0);return (<div><p>点击{count}次</p><button onClick{() > setCount(count 1)}>点击</bu…

【Linux系统】信号量(初次理解)

五个概念 多个执行流&#xff08;进程&#xff09;&#xff0c;能看到的一份资源&#xff1a;共享资源被保护起来的资源可以叫临界资源&#xff08;同步和互斥&#xff09; --- 用互斥的方式保护共享资源就叫临界资源互斥&#xff1a;任何时刻只能有一个进程在访问共享资源资源…

就业平台小程序的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;学生管理&#xff0c;企业管理&#xff0c;企业类型管理&#xff0c;留言板管理&#xff0c;系统管理 微信端账号功能包括&#xff1a;系统首页&#xff0c;招聘信息&#xff0c;简历&#xff0c;我的 …

SpringCloud--Eureka集群

Eureka注册中心集群 为什么要集群 如果只有一个注册中心服务器&#xff0c;会存在单点故障&#xff0c;不可以高并发处理所以要集群。 如何集群 准备三个EurekaServer 相互注册&#xff0c;也就是说每个EurekaServer都需要向所有的EureakServer注册&#xff0c;包括自己 &a…

游戏如何应对黑灰产工作室

游戏黑灰产工作室&#xff0c;是指以非法渠道、非法手段通过游戏进行牟利的团伙。使用脚本、外挂是黑灰产工作室的显著特征&#xff0c;其常见的牟利方式有&#xff1a;打金工作室、资源囤积号、初始号、自抽号、代练工作室以及营销欺诈等。 ▲ 常见的游戏黑灰产工作室牟利路径…

PMP证书 怎么报名?

首先&#xff0c;PMP证书相当于某些行业的敲门砖&#xff0c;身处项目管理相关行业的人应该清楚&#xff0c;这个证书&#xff0c;可能是你升职的不可或缺的一把钥匙。首先&#xff0c;我们先来了解一下什么是pmp。 1充分了解PMP PMP&#xff08;项目管理专业人士资格认证&am…

idm站点抓取可以用来做什么 idm站点抓取能抓取本地网页吗 idm站点抓取怎么用 网络下载加速器

在下载工具众多且竞争激烈的市场中&#xff0c;Internet Download Manager&#xff08;简称IDM&#xff09;作为一款专业的下载加速软件&#xff0c;仍然能够赢得众多用户的青睐&#xff0c;这都要得益于它的强大的下载功能。我们在开始使用IDM的时候总是有很多疑问&#xff0c…

「iOS」暑假第一周 —— ZARA的仿写

暑假第一周 ZARA的仿写 文章目录 暑假第一周 ZARA的仿写写在前面viewDidLoad 之中的优先级添加自定义字体下载想要的字体添加至info之中找到字体名字并应用 添加应用图标和启动页面 写在前面 暑假第一周留校学习&#xff0c;对于ZARA进行了仿写&#xff0c;在仿写的过程之中&a…

探索创意无限:独特的平面设计趋势与案例分享

随着平面设计领域的不断发展&#xff0c;平面设计趋势也在不断变化。在一个信息爆炸的时代&#xff0c;设计不仅仅是视觉的表达&#xff0c;更是思想和情感的交流。到了 2024 年&#xff0c;一些新的平面设计趋势已经开始显现&#xff0c;同时一些旧的趋势得到了新的发展和再度…