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

news2024/9/9 7:50:34

官网使用指南

官网地址:介绍 — 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.coloradmin.cn/o/1919024.html

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

相关文章

C嘎嘎类与对象上篇

类的定义 1. class为定义类的关键字&#xff0c;Stack为类的名字&#xff0c;{}中为类的主体&#xff0c;注意类定义结束时后⾯分号不能省略 。类体中内容称为类的成员&#xff1a;类中的变量称为类的属性或成员变量; 类中的函数称为类的⽅法或者成员函数。 2. C中struct也可以…

C++入门基础题:数组元素逆序(C++版互换方式)

1.题目&#xff1a; 数组元素逆置案例描述: 请声明一个5个元素的数组&#xff0c;并且将元素逆置. (如原数组元素为:1,3,2,5,4;逆置后输出结果为:4,5,2,3,1) 2.图解思路&#xff1a; 3.代码演示&#xff1a; #include<iostream>using namespace std;int main(){int a…

为什么使用代理IP无法访问网站

代理IP可以为用户在访问网站时提供更多的便利性和匿名性&#xff0c;但有时用户使用代理IP后可能会遇到无法访问目标网站的问题。这可能会导致用户无法完成所需的业务要求&#xff0c;给用户带来麻烦。使用代理IP时&#xff0c;您可能会因为各种原因而无法访问您的网站。以下是…

网络安全应急响应信息收集利器-Eagle_Eye

项目介绍: 网络安全应急响应信息收集利器 - Eagle_Eye&#xff1a;您的终端信息自动收集专家 在网络安全的紧急时刻&#xff0c;每一秒都至关重要。Eagle_Eye&#xff0c;这款专为应急响应设计的工具&#xff0c;如同一位随时待命的侦察兵&#xff0c;能够在危机时刻迅速收集…

插片式远程 I/O模块:Profinet总线耦合器在SIMATIC Manager配置

XD9000是Profinet总线耦合器&#xff0c;单个耦合器最多可扩展32个I/O模块&#xff01;本文将详细介绍如何在SIMATIC Manager中配置插片式远程 I/O模块的Profinet总线耦合器&#xff0c;帮助您更好地应用这一技术。 一、SIMATIC Manager软件组态步骤&#xff1a; 1、创建工程&…

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

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

Qt开发 | C++ Qt开发环境安装(Qt5.15.2、VS2019、vsaddin2.8) | QtCreator和VS2019的基本使用和设置 | 添加第三方模块

文章目录 一、Qt简介二、C Qt开发环境安装1.Visual Studio 2019安装2.Qt5.15.2安装3.vsaddin2.8安装 三、QtCreator和VS2019的基本使用1.QtCreator的基本使用1.1 创建项目1.2 Qtcreator基本设置 2.VS2019的基本使用2.1 创建项目2.2 Visual Studio 2019的基本设置 3.如何添加第三…

2款强大到离谱电脑软件,都是效率神器

板栗看板 板栗看板是一款在线可视化项目协作工具&#xff0c;旨在通过自动化、数据化和智能化的手段提升团队协作效率。它基于精益生产的看板理论&#xff0c;具有扁平、透明和灵活的特性&#xff0c;能够帮助个人和团队提高生产效率。 该工具支持多人任务协作&#xff0c;用户…

uni-app/vue项目如何封装全局消息提示组件

效果图&#xff1a; 第一步&#xff1a;封装组件和方法&#xff0c;采用插件式注册&#xff01; 在项目目录下新建components文件夹&#xff0c;里面放两个文件&#xff0c;分别是index.vue和index.js. index.vue&#xff1a; <template><div class"toast&quo…

前端埋点数据收集和数据上报

原文地址 什么是埋点 学名叫时间追踪(Event Tracking), 主要针对用户行为或者业务过程进行捕获&#xff0c;处理和发送相关技术及实施过程. 埋点是数据领域的一个专业术语&#xff0c;也是互联网领域的俗称&#xff0c;是互联网领域的俗称 埋点是产品数据分析的基础&#xf…

漏洞扫描器之XRAY的安装及破解

XRAY简介 xray 是一款功能强大的安全评估工具&#xff0c;由多名经验丰富的一线安全从业者呕心打造而成&#xff0c;主要特性有&#xff1a; 检测速度快&#xff1a;发包速度快 ; 漏洞检测算法高效。 支持范围广&#xff1a;大至 OWASP Top 10 通用漏洞检测&#xff0c;小至…

Nginx上配置多个网站

一、需求描述 我们只有一台安装了Nginx的服务器,但是我们需要实现在这台服务器上部署多个网站,用以对外提供服务。 二、Nginx上配置多个网站分析 一般网站的格式为:【http://ip地址:端口号/URI】(比如:http://192.168.3.201:80),IP地址也可用域名表示;那么要实现在Nginx…

Nuxt框架中内置组件详解及使用指南(五)

title: Nuxt框架中内置组件详解及使用指南&#xff08;五&#xff09; date: 2024/7/10 updated: 2024/7/10 author: cmdragon excerpt: 摘要&#xff1a;本文详细介绍了Nuxt框架中和组件的使用方法与配置&#xff0c;包括安装、基本用法、属性详解、示例代码以及高级功能如…

vscode如何自动补全-cnblog

打开设置 输入save选项选afterDelay 详情介绍 afterDelay 这个是在多少毫秒后自动保存。 onFocusChange 编辑器失去焦点的时候保存 onWindowChange 这个是窗口失去焦点的时候保存 自动保存时间设置 Auto Save Delay默认保存时间是1000毫秒,就是1秒,设置成500毫秒可以对应大…

PaintsUndo - 一张照片一键生成绘画过程视频 本地一键整合包下载

这就是ControlNet作者张吕敏大佬的新作&#xff0c;PaintsUndo。只要你有一张图片&#xff0c;PaintsUndo 就能让它变成完整的绘画过程视频。这科技&#xff0c;绝了。 你有没有想过&#xff0c;一张静态图片也能变成一个绘画教程? PaintsUndo 就是这么神奇。你只需要提供一…

C++ 现代教程三

// 模板参数类型区分 template <class T> static std::string cppdemangle() {std::string s{cppdemangle(typeid(std::remove_cv_t<std::remove_reference_t<T>>))};if (std::is_const_v<std::remove_reference_t<T>>)s " const";if…

商家转账到零钱申请必过攻略

商家使用微信支付的“商家转账到零钱”功能需要满足一定的条件&#xff0c;并遵循特定的开通步骤。由于人工审核提高了申请门槛&#xff0c;多数商家在申请中需要一定的操作指南才能开通&#xff0c;以下是我们上万次成功开通“商家转账到零钱”功能的经验总结&#xff0c;希望…

夏令营入门组day1

一. 题目 二. 初步思路 因为是解决区间上的问题&#xff0c;很容易想到用前缀和来解决。前缀和是o ( n ) 的时间复杂度&#xff0c;但后续枚举两个端点要 o ( n^2 )&#xff0c;对于2e10的数据&#xff0c;超时。 for (int i 1; i < n; i )for (int j i; j <n; j ){if…

小程序问题

1.获取节点 wx.createSelectorQuery() wx.createSelectorQuery().in(this) //组件中加in(this)&#xff0c;不然获取不到 2.使用实例 wx.createSelectorQuery().in(this).select(#share).fields({node: true,size: true}).exec(async (res) > {const canvas res[0].node;…

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

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