程序员经验分享-hwhale

Vue2.js （2）引入开发组件

2023-11-11

1.如何引入Vue2（通过CDN）

https://cn.vuejs.org/v2/guide/instance.html - 【学习】-【安装】- section CDN

!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入 Vue，通过使用CDN -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
</head>

 2.如何引入Element UI

https://element.eleme.io/#/zh-CN/component/installation - 【组件】-【安装】-section CDN

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入CDN -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
    <!-- 引入Element UI样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入Element UI组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

</head>

3.引入axios发送Ajax请求 

http://www.axios-js.com/zh-cn/docs/ -【文档】-【安装】 

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>xxxxxxx</title>
    <!--引入外部样式CSS文件-->
    <link rel="stylesheet" href="./css/index.css">
    <!--使用CDN，引入Vue模块-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
    <!--引入Element UI引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!--引入Element UI引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!--引入Axios实现Ajax请求 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</head>

4.引入本地文件（如x.css） 

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入本地CSS -->
    <link rel="stylesheet" href="./css/index.css">
    <!-- 引入CDN -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
    <!-- 引入Element UI样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入Element UI组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

</head>

备注：./css/index.css，其中“.”代表html所在文件夹。意思是，把html所在文件夹/css/index.css引入。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

前端

html

Vue2.js （2）引入开发组件 的相关文章

随机推荐

  • 封装Vue.js组件库

    一 组件库介绍 1 开源组件库 Element UI IView 2 组件开发方式CDD 自下而上 从组件级别开始 到页面级别结束 3 CDD的好处 组件在最大程度上被重用 并行开发 可视化测试 二 处理组件边界情况 vue中处理组件边界情

  • 详解IP、TCP报文头部及报文封装过程

    TCP报文 字段介绍 1 源端口 16bit 一个端口所属一个进程 可以通过源端口定位到具体的进程 2 目的端口 16bit 通过目的端口和Ip报文的目的ip地址可以唯一定位到一个进程 3 序号 32bit 当前发送数据的起始序号 每一个字

  • 手机视频网页点播服务器,手机视频点播系统搭建完整方案

    技术选择 服务器操作系统 windows 点播服务器 Nginx 转码和生成清单 ffmpeg 手机客户端 ExoPlayer SDK Nginx和ffmpeg都是跨平台的 应该也可以在linux上搭建出来 搭建视频点播和直播系统使用的协议

  • 2022-2023年度应届生画像白皮书

    导读 进入2023年以来 全球经济环境和国际关系日趋动荡复杂 我国的外贸需求增长放缓 企业经营新老风险交织叠加 在此背景下 诸多企业逐步加大了提质增效的力度 更加谨慎地管理招聘需求 减少招聘规模 加高招聘门槛 上半年招聘市场需求萎缩明显 然

  • 数字IC设计学习笔记_静态时序分析STA_ PrimeTime 基本概述

    数字IC设计学习笔记 PrimeTime 基本概述 1 PrimeTime 基本概述 2 运行模式 1 PrimeTime 基本概述 PrimeTime Synopsys公司提出的 针对于复杂的 全芯片的 门级静态时序分析的工具 可集成在逻

  • Process实操教程

    Process实操教程 中介效应检验 1 Process 下载安装 2 Process 做中介检验 Hello 大家好 这里是行上行下 我是喵君姐姐 之前给大家介绍了如何用amos进行中介调节效应检验 Amos实操教程 中介效应检验 今天我

  • 队列的算法实现[数组法]

    采用数组来保存队列的元素 设立一个队首指针 front 一个队尾指针 rear 分别指向队首和队尾元素 则 rear front 即为存储的元素个数 include

  • rust使用睡袋_Rust怎么按睡袋

    发布时间 2016 08 17 在RUST这款游戏中 玩家需要做的事情就是尽可能的生存下来 很多时候对于资源的分配不均可能导致有些玩家缺乏生存物资 所以容易产生激烈的竞争 如何生存就成了玩家需要做的事情 卡灵魂卡石头方法 卡灵魂的意思是 你

  • 第十四天---LDP，MPLS技术

    LDP 标签分发协议 主要应用在MPLS的控制层面 MPLS控制层面需要完成的工作主要就是分配标签和传递标签 分配标签的前提是本地路由表中得先存在标签 传递标签的前提也是得先具备路由基础 所以 LDP想要正常工作 则需要IGP作为基础 1

  • 蛋花花分析孩子学编程到底有没有用

    蛋花花分析孩子学编程到底有没有用 据蛋花花了解对于6到16岁的青少儿来说 在这个AI时代 学习编程简直就是必修课 那么究竟什么样的课程是适合孩子的 能够让孩子对编程保持持续的兴趣 又是什么样的课程能够让孩子们学到的是计算机语言的基本逻辑及分

  • Unity上一个动画的Duration导致下一个动画的事件被调用多次

    情景 我用一个blendtree JumpAndFallBlendTree来切换Jump和Fall的动画 当inAir为true时进入 当inAir为false时退出 当人物着地时 我将inAir置为false 将land置为true 播放

  • 入门googletest

    引入 Google test是一种比较方便的C 测试框架 它可以帮助我们比较方便的进行测试代码 以及输出尽可能详细的失败信息 能够大大缩短我们测试代码的编写效率 而且这个框架的使用也比较简单 之前还在学校学习过Junit框架 作为一个jav

  • vmwareworkstation上Linux安装流程

    如何在vmware workstation上安装linux 安装步骤 1 点击创建新的虚拟机 2 选择典型 点击下一步 3 点击浏览 选择centos 7 x86 64Everything 2009 之后选择稍后安装操作系统 点击下一步 4

  • 2021年终总结：30岁被迫转行，苦逼码农的心酸历程

    背景 岁月如梭 2021已接近尾声 而我还在搬砖道路上不停的奔波 蓦然回首 回想起这一年的经历 悲喜交加 随着年纪的不断增长 渐渐的开始回忆 回忆曾经的事情和点点滴滴 但渐渐的都开始模糊和淡忘 为了让这些点点滴滴能够在未来某个时间想起时还能

  • java如何代码识别excel单元格 删除线_如何解决和审核Excel 2019中的问题

    1 公式标签 Excel在组织功能方面非常出色 并且可以将它们分为对新用户有意义的菜单部分 数据 选项卡包含用于创建和操作存储在本地电子表格或远程数据库中的表中的信息的所有功能 公式 选项卡包含与公式一起使用的所有功能 包括对其进行审核和故

  • 强化学习笔记之策略梯度PG

    前面几天观看了B站周博磊老师的强化学习纲要系列视频狠狠地补了一下基础 强烈推荐没有基础的同学去补补基础 特别是MP马尔可夫过程 MRP马尔可夫奖励过程 MDP马尔可夫决策过程等 才能更好地理解与掌握后来的强化学习算法的算法思想 出发点是什么

  • windows服务器 应通过设定终端接入方式或网络地址范围对通过网络进行管理的管理终端进行限制。

    评测项 应通过设定终端接入方式或网络地址范围对通过网络进行管理的管理终端进行限制 整改建议 建议操作系统设定终端接入方式 网络地址范围等条件限制终端登录 如windows防火墙启用 高级设置 打开 高级安全windows防火墙 窗口 入站规

  • 2022年焊工考试电焊工考试模拟试题卷及答案

    题库来源 优题宝公众号 2022年焊工考试电焊工考试模拟试题卷及答案 由优题宝公众号根据最新焊工考试电焊工考试大纲与历年焊工考试电焊工考试真题汇总编写 包含焊工考试电焊工考试常考重点题型与知识点 有助于考生复习备考焊工考试电焊工考试 取得好

  • 简单公式

    1 行内公式 有三种形式 美元符号 c a b c a b math环境 begin math c a b end math 2 上下标 1 上标 使用 两位以上数字使用 括起来 如 x的20次方 x 20 2 下标 使用 3 希腊字母 希

  • Vue2.js （2）引入开发组件

    1 如何引入Vue2 通过CDN https cn vuejs org v2 guide instance html 学习 安装 section CDN DOCTYPE html gt

热门标签