html通过CDN引入使用Vue和ElementUI

html通过CDN引入使用Vue和ElementUI

近期遇到个需求，就是需要在.net MVC的项目中，对已有的项目的首页进行优化，也就是写原生html和js。但是咱是一个写前端的，写html还可以，.net的话，开发也不方便，还得安装Visual Studio启动项目。所以就计划在html文件中开发，然后移植到.net的项目中。

效果图

在这里插入图片描述

代码实现

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue Grid Layout 示例</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

    <style>
        #loader-wrapper { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 999999; }
        #loader {
            display: block; position: relative; left: 50%; top: 40%; z-index: 1001; width: 90px; height: 90px; margin: -45px 0 0 -45px; border-radius: 50%; border: 3px solid transparent;border-top-color: #fe9501;         
            -webkit-animation: spin 2s linear infinite;
            -ms-animation: spin 2s linear infinite;
            -moz-animation: spin 2s linear infinite;
            -o-animation: spin 2s linear infinite;
            animation: spin 2s linear infinite;
        }
        #loader:before {
            content: ""; position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; border-radius: 50%; border: 3px solid transparent; border-top-color: #fe9501;
            -webkit-animation: spin 3s linear infinite;
            -moz-animation: spin 3s linear infinite;
            -o-animation: spin 3s linear infinite;
            -ms-animation: spin 3s linear infinite;
            animation: spin 3s linear infinite;
        }
        #loader:after {
            content: ""; position: absolute; top: 15px; left: 15px; right: 15px; bottom: 15px; border-radius: 50%; border: 3px solid transparent; border-top-color: #fe9501;
            -moz-animation: spin 1.5s linear infinite;
            -o-animation: spin 1.5s linear infinite;
            -ms-animation: spin 1.5s linear infinite;
            -webkit-animation: spin 1.5s linear infinite;
            animation: spin 1.5s linear infinite;
        }
        @-webkit-keyframes spin {
            0% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); }
            100% { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); }
        }
        @keyframes spin {
            0% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); }
            100% { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); }
        }
        .load-text{
            color: #fe9501;
            text-align: center;
            position: relative;
            top: 55%;
            transform: translateY(-50%);
        }

        html {font-size: 100%; /*100 ÷ 16 × 100% = 625%*/}
        @media screen and (min-width:800px) and (max-width:999px) {
            html { font-size: 65%; }
        }
        @media screen and (min-width:1000px) and (max-width:1024px) {
            html { font-size: 70%; }
        }
        @media screen and (min-width:1025px) and (max-width:1280px) {
            html { font-size: 90%; }
        }
        @media screen and (min-width:1281px) and (max-width:1680px) {
            html { font-size: 100%; }
        }
        @media screen and (min-width:1681px) and (max-width:1920px) {
            html { font-size: 100%; }
        }
        @media screen and (min-width:1921px) and (max-width:2240px) {
            html { font-size: 150%; }
        }
        @media screen and (min-width:2241px){
            html { font-size: 150%; }
        }
        .vue-grid-layout {
            background: #eee;
        }

        .vue-grid-item:not(.vue-grid-placeholder) {
            background: #ccc;
            border: 1px solid black;
        }

        .vue-grid-item .resizing {
            opacity: 0.9;
        }

        .vue-grid-item .static {
            background: #cce;
        }

        .vue-grid-item .text {
            font-size: 24px;
            text-align: center;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            height: 100%;
            width: 100%;
        }

        .vue-grid-item .no-drag {
            height: 100%;
            width: 100%;
        }

        .vue-grid-item .minMax {
            font-size: 12px;
        }

        .vue-grid-item .add {
            cursor: pointer;
        }

        .vue-draggable-handle {
            position: absolute;
            width: 20px;
            height: 20px;
            top: 0;
            left: 0;
            background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><circle cx='5' cy='5' r='5' fill='#999999'/></svg>") no-repeat;
            background-position: bottom right;
            padding: 0 8px 8px 0;
            background-repeat: no-repeat;
            background-origin: content-box;
            box-sizing: border-box;
            cursor: pointer;
        }

        .vue-grid-item{
            display: flex;
        }

        .echart{
            width: 100%;
            height: 100%;
            min-height: 5rem;
        }

    </style>
</head>
<body>
    <div id="app">
        <!-- <grid-layout :layout="layout" :col-num="12" :row-height="30" :is-draggable="true" :is-resizable="true">
        <grid-item v-for="item in layout" :key="item.i" :x="item.x" :y="item.y" :w="item.w" :h="item.h" class="grid-item">
            {{ item.i }}
        </grid-item>
        </grid-layout> -->
        <el-button @click="cliackDialog" type="success">Button</el-button>
        <el-button @click="increment" type="success">{{count}}</el-button>
        <el-dialog :visible.sync="visible" title="Hello world">
            <p>Try Element</p>
        </el-dialog>
        


        
    </div>
    <!-- 引入Vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 引入Vuex -->
    <script src="https://unpkg.com/vuex@3.6.2/dist/vuex.js"></script>
    <!-- 引入gird组件 -->
    <script src="./vue-grid-layout.common.js"></script>
    <script src="./vue-grid-layout.umd.min.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.3/echarts.min.js"></script>
    <!-- 引入子组件 -->
    <script src="./son.js"></script>
    <!-- 引入vuex -->
    <script src="./store.js"></script>
    <script>
        new Vue({
            el: '#app',
            store,
            data: {
                draggable: true,
                resizable: false,
                index: 0,
                visible:false,
            },
            methods: {
                cliackDialog(){
                    this.visible = !this.visible
                },

                
            }   
        });
    </script>
</body>
</html>

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

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

相关文章

MybatisPlus中的使用Wrapper自定义SQL

MybatisPlus中的使用Wrapper自定义SQL

一、条件构造器 条件构造器提供了一种更加简洁和直观的方式来构建复杂的查询条件。它提供了一组静态方法&#xff0c;用于构建各种类型的查询条件&#xff0c;包括等于、不等于、大于、小于、包含等。使用条件构造器可以避免手动拼接SQL语句的麻烦&#xff0c;提高代码的可读性…
阅读更多...
Pandas使用过程中的神器加持 你不用不要怪我

Pandas使用过程中的神器加持 你不用不要怪我

Pandas是我们日常处理表格数据最常用的包&#xff0c;但是对于数据分析来说&#xff0c;Pandas的DataFrame还不够直观&#xff0c;所以今天我们将介绍4个和Pandas相关的Python包&#xff0c;可以将Pandas的DataFrame转换交互式表格&#xff0c;让我们可以直接在上面进行数据分析…
阅读更多...
mybatis-plus的用法。如果条件不为空则查询。返回结果类型转换

mybatis-plus的用法。如果条件不为空则查询。返回结果类型转换

1.如果条件不为空则查询 偶尔看到这个代码。感觉大可不必 点击进入源码就会发现。 内部已经封装好了条件判断&#xff0c;可以说非常的人性化 而且改条件走的非常深 2.返回结果类型转换 page查询的时候&#xff0c;返回的结果只能是表对应的实体类。如果自定义扩展vo,dto需…
阅读更多...
“城中村上建高楼”，开启一场数智化时代新修炼

“城中村上建高楼”，开启一场数智化时代新修炼

“数字化也好&#xff0c;数智化也罢&#xff0c;你明明白白地告诉我&#xff0c;他们与信息化到底有什么区别&#xff1f;” “我在信息化方面已投入那么多&#xff0c;为什么又要投那么多钱搞数智化&#xff1f;” 中国软件网、海比研究院在《2024中国企业数智服务趋势洞察研…
阅读更多...
Kubernetes(K8s)安全认证-10

Kubernetes(K8s)安全认证-10

安全认证 访问控制概述 Kubernetes作为一个分布式集群的管理工具&#xff0c;保证集群的安全性是其一个重要的任务。所谓的安全性其实就是保证对Kubernetes的各种客户端进行认证和鉴权操作。 客户端 在Kubernetes集群中&#xff0c;客户端通常有两类&#xff1a; User Acco…
阅读更多...
【AI-Fix】解决地图展示包leafmap在Jupyter NoteBook中地图不显示的问题

【AI-Fix】解决地图展示包leafmap在Jupyter NoteBook中地图不显示的问题

1. 问题描述 新创建的环境想使用leafmap在Jupyter中进行地图展示&#xff0c;结果发现运行完成之后不显示&#xff0c;不论怎么重启都没有办法显示出来&#xff0c;以经验来看&#xff0c;多半是缺了包了。 于是去leafmap的官方文档查找原因&#xff0c;一开始并没有发现什么问…
阅读更多...
用OpenCV与MFC写一个图像格式转换及简单处理程序

用OpenCV与MFC写一个图像格式转换及简单处理程序

打开不同格式的图形文件&#xff0c;彩色装灰度图像、锐化、高斯滤波、边界检测及将其存储为需求格式是图像处理的最基本的操作。如果单纯用MFC编程&#xff0c;是一个令人头痛的事情&#xff0c;有不少的代码量。可用OpenCV与MFC编程就变得相对简单。下面来详细演示这一编程操…
阅读更多...
Altair推出 Altair RapidMiner 2023 平台，提供生成式 AI 功能

Altair推出 Altair RapidMiner 2023 平台，提供生成式 AI 功能

Altair推出 Altair RapidMiner 2023 平台&#xff0c;提供生成式 AI 功能 更新包括自动聚类、扩展 SAS、Python 和 R 编程功能等 近日&#xff0c;Altair&#xff08;纳斯达克股票代码&#xff1a;ALTR&#xff09;近日宣布其数据分析和 AI 平台 Altair RapidMiner 取得了一系…
阅读更多...
Python文件打包成exe可执行文件

Python文件打包成exe可执行文件

我们平常用python写些脚本可以方便我们的学习办公&#xff0c;但限制就是需要有python环境才能运行。 那能不能直接在没有python环境的电脑上运行我们的脚本呢&#xff1f; 当然可以&#xff0c;那就是直接把python脚本打包成exe可执行程序&#xff08;注针对win系统&#xf…
阅读更多...
Linux之进程（一）

Linux之进程（一）

目录 一、概念 1、基本概念 2、描述进程的PCB 3、task_struct 二、查看进程 三、获取进程的PID和PPID 通过系统调用获取进程的PID和PPID 四、通过系统调用创建进程 1、fork函数创建子进程 2、用if进行分流 五、进程状态 1、操作系统进程状态 1、新建 2、运行 3、…
阅读更多...
windows磁盘扩容

windows磁盘扩容

在我们为电脑加装一个新的硬盘之后&#xff0c;需要相应的操作才能将硬盘空间加到磁盘空间中。 1.打开磁盘管理器 windows系统可以选择在搜索中直接搜索计算机管理并将其打开 windows server的打开方式为服务器管理器→工具→计算机管理 打开计算机管理后就可以看到磁盘管理&…
阅读更多...
【链表Linked List】力扣-234回文链表

【链表Linked List】力扣-234回文链表

目录 问题描述 解题过程 labuladong题解 问题描述 给你一个单链表的头节点 head &#xff0c;请你判断该链表是否为回文链表。如果是&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 示例 1&#xff1a; 输入&#xff1a;head [1,2,2,1] 输出&#xff…
阅读更多...
20、pytest中的参数化

20、pytest中的参数化

官方实例 # content of test_expectation.pyimport pytestpytest.mark.parametrize("test_input, expected",[("35",8),("24",6),("6*9",42)]) def test_eval(test_input, expected):assert eval(test_input) expected# content of …
阅读更多...
unsafe类和varhandle类讲解

unsafe类和varhandle类讲解

Java的Unsafe类是一个非常特殊的类&#xff0c;它提供了一组原始、底层的操作&#xff0c;可以跳过Java的限制&#xff0c;直接操作内存和对象。这些操作可能会破坏Java的安全机制&#xff0c;所以Unsafe类被标记为不安全的。 Unsafe类提供了下列方法&#xff1a; allocateIns…
阅读更多...
漏洞复现--云时空商业ERP文件上传

漏洞复现--云时空商业ERP文件上传

免责声明&#xff1a; 文章中涉及的漏洞均已修复&#xff0c;敏感信息均已做打码处理&#xff0c;文章仅做经验分享用途&#xff0c;切勿当真&#xff0c;未授权的攻击属于非法行为&#xff01;文章中敏感信息均已做多层打马处理。传播、利用本文章所提供的信息而造成的任何直…
阅读更多...
几个查找开源组件CVE的网站和工具

几个查找开源组件CVE的网站和工具

有时在使用一个开源组件之前&#xff0c;需要先调查一下这个组件是否有一些比较验证的CVE。同时&#xff0c;对于一些重要的正在使用的组件&#xff0c;例如&#xff1a;Spring Framework&#xff0c;也希望查询一下是否有严重的CVE。 本文就介绍几个曾经用过的查找开源组件还不…
阅读更多...
抖店怎么对接达人带货？达人渠道整理，实操详解！

抖店怎么对接达人带货？达人渠道整理，实操详解！

我是电商珠珠 很多人在抖店开通后&#xff0c;按照流程去正常的跑自然流量&#xff0c;再去找达人带货让自己店铺的流量增多&#xff0c;得到相应的曝光。 但是一些新手小白并不知道从哪去找达人&#xff0c;或者说不知道怎么去筛选达人。 一开始所有人都想着去找头部主播&a…
阅读更多...
MySQL_1. mysql数据库介绍

MySQL_1. mysql数据库介绍

shell脚本差不多快完结了接下来会为大家更新MySQL系列的相关的基础知识笔记&#xff0c;希望对大家有所帮助&#xff0c;好废话不多说&#xff0c;接下来开始正题&#xff01; 1.mysql数据库介绍 mysql 是一款安全、跨平台、高效的&#xff0c;并与 PHP、Java 等主流编程语言…
阅读更多...
docker安装及使用（Linux版本）

docker安装及使用（Linux版本）

文章目录 前言一、docker安装二、docker命令pull&#xff08;安装镜像&#xff09;images&#xff08;安装镜像&#xff09;run&#xff08;创建容器&#xff09;exec&#xff08;进入运行中的容器&#xff09;常用命令 总结如有启发&#xff0c;可点赞收藏哟~ 前言 https://do…
阅读更多...
Jmeter测试移动接口性能 —— 压测

Jmeter测试移动接口性能 —— 压测

一般的公司都想知道自己产品的性能瓶颈和以及提升性能&#xff0c;以期大流量来了还撑得住。其实性能测试很难&#xff0c;难点在你不知道性能要达到怎样的需求。难点在于你没有实际的环境场景给你测试&#xff0c;总不能给线上环境你测试吧&#xff1f; 难点在于找性能瓶颈&a…
阅读更多...
最新文章

Copyright @ 2022~2023