02 Bootstrap和ElementUI
2024-04-20 18:09:48
1 Bootstrap
1.1 什么是Bootstrap？
Bootstrap是美国Twitter公司基于HTML、CSS、JavaScript开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。文档参见：Bootstrap官网。
1.2 栅格系统
1.2.1 什么是栅格系统？
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。工作原理如下：
那么，Bootstrap的基本使用格式可以定义如下(已将链接资源改为本地)：
<!doctype html>
<html lang="zh-CN">
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --><title>TestBootStrap</title><!-- Bootstrap --><link rel="stylesheet" href="css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"><!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) --><script src="js/jquery-3.2.1.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script><!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 --><script src="js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
</head>
<body>
<div class="container"><div class="row">...</div><div class="row">...</div>...
</div>
</body>
</html>
1.2.2 栅格参数
1.2.3 列偏移
注：这里有个容易产生错误的点，来看下面代码：
<div class="row clearfix"><div class="col-md-3 column"></div><div class="col-md-6 column"><form class="form-horizontal formDiv" role="form"><h3 class="col-xs-offset-5" style="color: white">登 录</h3><div class="form-group"><label for="inputID" class="col-sm-2 control-label">学 号</label><div class="col-sm-8"><input class="form-control" id="inputID" type="text" placeholder="学号"/></div></div><div class="form-group"><label for="inputPassword" class="col-sm-2 control-label">密 码</label><div class="col-sm-8"><input class="form-control" id="inputPassword" type="password" placeholder="密码"/></div></div><div class="form-group"><label for="inputSeedKey" class="col-sm-2 control-label">seedKey</label><div class="col-sm-8"><input class="form-control" id="inputSeedKey" type="password" placeholder="seedKey"/></div></div><div class="form-group"><div class="col-sm-offset-2 col-sm-8"><button type="submit" class="btn btn-success">登 录</button></div></div></form></div><div class="col-md-3 column"></div></div>
上述代码将row分为3 6 3个格子，我说的要注意的点是在这三部分中，又是重新开始算格子数的，填满依旧是12个格子，是相对的。
1.3 Bootstrap的常用组件
1.3.1 按钮
按钮的实现及居中显示。
<!doctype html>
<html lang="zh-CN">
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --><title>test</title><!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) --><script src="js/jquery-3.2.1.min.js"></script><!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 --><script src="js/bootstrap.min.js"></script><!-- Bootstrap --><link rel="stylesheet" href="css/bootstrap.min.css"><style>.col-center {position: absolute;top: 50%;-webkit-transform: translateY(-50%);-moz-transform: translateY(-50%);-ms-transform: translateY(-50%);-o-transform: translateY(-50%);transform: translateY(-50%);/*border: 2px solid black;*/}</style>
</head>
<body>
<div class="container-fluid"><div class="row col-md-offset-6"><div class="col-center"><button class="btn btn-default" type="submit">Button</button></div></div>
</div>
</body>
</html>
1.3.2 表单
<!doctype html>
<html lang="zh-CN">
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --><title>test</title><!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) --><script src="js/jquery-3.2.1.min.js"></script><!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 --><script src="js/bootstrap.min.js"></script><!-- Bootstrap --><link rel="stylesheet" href="css/bootstrap.min.css"></head>
<body>
<div class="container"><!--定义了一个占8个格子的列，向右偏移3个格子，形成水平居中--><div class="row"><div class="col-md-8 col-md-offset-3"><form class="form-horizontal"><div class="form-group"><label for="inputEmail3" class="col-sm-2 control-label">Email</label><div class="col-sm-6"><input type="email" class="form-control" id="inputEmail3" placeholder="Email"></div></div><div class="form-group"><label for="inputPassword3" class="col-sm-2 control-label">Password</label><div class="col-sm-6"><input type="password" class="form-control" id="inputPassword3" placeholder="Password"></div></div><div class="form-group"><div class="col-sm-offset-2 col-sm-6"><button type="submit" class="btn btn-default">Sign in</button></div></div></form></div></div>
</div>
</body>
</html>
1.3.3 表格
<!doctype html>
<html lang="zh-CN">
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --><title>test</title><!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) --><script src="js/jquery-3.2.1.min.js"></script><!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 --><script src="js/bootstrap.min.js"></script><!-- Bootstrap --><link rel="stylesheet" href="css/bootstrap.min.css"><style>.form{background: rgba(255,255,255,0.2);width:400px;margin:100px auto;}</style></head>
<body>
<div class="container"><!--定义了一个占8个格子的列，向右偏移3个格子，形成水平居中--><div class="row row-centered"><div class="col-md-6 col-md-offset-3 col-centered"><table class="table table-bordered" style="text-align: center"><tr><td>ID</td><td>NAME</td><td>AGE</td></tr><tr><td>01</td><td>HC</td><td>24</td></tr><tr><td>02</td><td>HP</td><td>25</td></tr><tr><td>03</td><td>HH</td><td>26</td></tr></table></div></div>
</div>
</body>
</html>
1.3.4 导航条
<nav class="navbar navbar-default"><div class="container-fluid"><!-- Brand and toggle get grouped for better mobile display --><div class="navbar-header"><button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="#">Brand</a></div><!-- Collect the nav links, forms, and other content for toggling --><div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><ul class="nav navbar-nav"><li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li><li><a href="#">Link</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li role="separator" class="divider"></li><li><a href="#">Separated link</a></li><li role="separator" class="divider"></li><li><a href="#">One more separated link</a></li></ul></li></ul><form class="navbar-form navbar-left"><div class="form-group"><input type="text" class="form-control" placeholder="Search"></div><button type="submit" class="btn btn-default">Submit</button></form><ul class="nav navbar-nav navbar-right"><li><a href="#">Link</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li role="separator" class="divider"></li><li><a href="#">Separated link</a></li></ul></li></ul></div><!-- /.navbar-collapse --></div><!-- /.container-fluid -->
</nav>
1.3.5 轮播图
<nav class="navbar navbar-default"><div class="container-fluid"><!-- Brand and toggle get grouped for better mobile display --><div class="navbar-header"><button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="#">Brand</a></div><!-- Collect the nav links, forms, and other content for toggling --><div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><ul class="nav navbar-nav"><li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li><li><a href="#">Link</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li role="separator" class="divider"></li><li><a href="#">Separated link</a></li><li role="separator" class="divider"></li><li><a href="#">One more separated link</a></li></ul></li></ul><form class="navbar-form navbar-left"><div class="form-group"><input type="text" class="form-control" placeholder="Search"></div><button type="submit" class="btn btn-default">Submit</button></form><ul class="nav navbar-nav navbar-right"><li><a href="#">Link</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li role="separator" class="divider"></li><li><a href="#">Separated link</a></li></ul></li></ul></div><!-- /.navbar-collapse --></div><!-- /.container-fluid -->
</nav>
1.4 Bootstrap案例：登录界面
<!doctype html>
<html lang="zh-CN">
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --><title>Login</title><!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) --><script src="js/jquery-3.2.1.min.js"></script><!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 --><script src="js/bootstrap.min.js"></script><!-- Bootstrap --><link rel="stylesheet" href="css/bootstrap.min.css"><style type="text/css">body {/*background: url("img/01.png");*//*animation-name: BH;*//*animation-duration: 12s;*//*animation-delay: 2s;*//*animation-iteration-count: infinite;*//*animation-play-state: running;*/}@keyframes BH {0% {background: url("./img/1.jpg");}34% {background: url("./img/2.jpg");}67% {background: url("./img/3.jpg");}100% {background: url("./img/4.jpg");}}.formDiv {background: rgba(255, 255, 255, 0.2);width: 400px;margin: 200px auto;}#loginForm {display: block;}</style>
</head>
<body>
<div class="container"><video src="video/01.mp4" style="width: 100%;height: 100%;object-fit: cover;position: absolute;top: 0;left: 0;"autoplay="autoplay" loop="loop" muted="muted"></video><div class="row formDiv"><form class="form-horizontal col-xs-12" id="loginForm"><h3 class="formTitle col-xs-offset-5" style="color: white">登 录</h3><div class="form-group"><label for="inputId" class="col-xs-2 control-label" style="color: white;">学 号</label><div class="col-xs-8"><input type="text" class="form-control" id="inputId" placeholder="学号"></div></div><div class="form-group"><label for="inputPassword" class="col-xs-2 control-label" style="color: white">密 码</label><div class="col-xs-8"><input type="password" class="form-control" id="inputPassword" placeholder="密码"></div></div><div class="form-group"><label for="inputPassword" class="col-xs-2 control-label" style="color: white">sendKey</label><div class="col-xs-8"><input type="text" class="form-control" id="inputSendKey" placeholder="sendKey"></div></div><div class="form-group"><div class="col-xs-offset-2 col-xs-8"><button type="submit" class="btn btn-default" style="color: darkgray">登 录</button></div></div></form></div>
</div>
</body>
</html>
2 ElementUI
2.1 什么是ElementUI？
ElementUI是一套基于VUE2.0的桌面端组件库，ElementUI提供了丰富的组件帮助开发人员快速构建功能强大、风格统一的页面。
2.2 ElementUI的使用
使用ElementUI需要引入如下引入 js 和 css 文件：
<!-- 引入ElementUI样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入ElementUI组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
注：实际项目建议替换成本地目录下的文件。
2.3 ElementUI的常用组件
2.3.1 Container布局容器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!-- 引入ElementUI样式 --><link rel="stylesheet" href="index.css"><script src="vue.js"></script><!-- 引入ElementUI组件库 --><script src="index.js"></script>
</head>
<body>
<div id="app"><el-container><el-header>Header</el-header><el-container><el-aside width="200px">Aside</el-aside><el-container><el-main>Main</el-main><el-footer>Footer</el-footer></el-container></el-container></el-container>
</div><style>.el-header, .el-footer {background-color: #B3C0D1;color: #333;text-align: left;line-height: 60px;}.el-aside {background-color: #D3DCE6;color: #333;text-align: center;line-height: 200px;}.el-main {background-color: #E9EEF3;color: #333;text-align: center;line-height: 590px;}
</style>
<script>new Vue({el: '#app'});
</script>
</body>
</html>
2.3.2 Dropdown下拉菜单
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!-- 引入ElementUI样式 --><link rel="stylesheet" href="index.css"><script src="vue.js"></script><!-- 引入ElementUI组件库 --><script src="index.js"></script>
</head>
<body>
<div id="app"><el-dropdown><span class="el-dropdown-link">下拉菜单<i class="el-icon-arrow-down el-icon--right"></i></span><el-dropdown-menu slot="dropdown"><el-dropdown-item>黄金糕</el-dropdown-item><el-dropdown-item>狮子头</el-dropdown-item><el-dropdown-item>螺蛳粉</el-dropdown-item><el-dropdown-item disabled>双皮奶</el-dropdown-item><el-dropdown-item divided>蚵仔煎</el-dropdown-item></el-dropdown-menu></el-dropdown>
</div><style>.el-dropdown-link {cursor: pointer;color: #409EFF;}.el-icon-arrow-down {font-size: 12px;}
</style>
<script>new Vue({el: '#app'});
</script>
</body>
</html>
2.3.3 NavMenu导航菜单
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!-- 引入ElementUI样式 --><link rel="stylesheet" href="index.css"><script src="vue.js"></script><!-- 引入ElementUI组件库 --><script src="index.js"></script>
</head>
<body>
<div id="app"><el-menu:default-active="activeIndex2"class="el-menu-demo"mode="horizontal"@select="handleSelect"background-color="#545c64"text-color="#fff"active-text-color="#ffd04b"><el-menu-item index="1">处理中心</el-menu-item><el-submenu index="2"><template slot="title">我的工作台</template><el-menu-item index="2-1">选项1</el-menu-item><el-menu-item index="2-2">选项2</el-menu-item><el-menu-item index="2-3">选项3</el-menu-item><el-submenu index="2-4"><template slot="title">选项4</template><el-menu-item index="2-4-1">选项1</el-menu-item><el-menu-item index="2-4-2">选项2</el-menu-item><el-menu-item index="2-4-3">选项3</el-menu-item></el-submenu></el-submenu><el-menu-item index="3" disabled>消息中心</el-menu-item><el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item></el-menu>
</div><script>new Vue({el: '#app',data() {return {activeIndex: '1',activeIndex2: '1'};},methods: {handleSelect(key, keyPath) {console.log(key, keyPath);}}});
</script>
</body>
</html>
2.3.4 Table表格
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!-- 引入ElementUI样式 --><link rel="stylesheet" href="index.css"><script src="vue.js"></script><!-- 引入ElementUI组件库 --><script src="index.js"></script>
</head>
<body>
<div id="app"><template><el-table:data="tableData"style="width: 100%"><el-table-columnprop="date"label="日期"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="address"label="地址"></el-table-column></el-table></template>
</div><script>new Vue({el: '#app',data() {return {tableData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1517 弄'}, {date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1519 弄'}, {date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1516 弄'}]}}});
</script>
</body>
</html>
2.3.5 Pagination分页
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!-- 引入ElementUI样式 --><link rel="stylesheet" href="index.css"><script src="vue.js"></script><!-- 引入ElementUI组件库 --><script src="index.js"></script>
</head>
<body>
<div id="app"><div class="block"><span class="demonstration">页数较少时的效果</span><el-paginationlayout="prev, pager, next":total="50"></el-pagination></div>
</div><script>new Vue({el: '#app',});
</script>
</body>
</html>
2.3.6 Form表单
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!-- 引入ElementUI样式 --><link rel="stylesheet" href="index.css"><script src="vue.js"></script><!-- 引入ElementUI组件库 --><script src="index.js"></script>
</head>
<body>
<div id="app"><!--rules：表单验证规则--><el-form ref="form" :model="form" :rules="rules" label-width="80px"><!--prop：表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的--><el-form-item label="活动名称" prop="name"><el-input v-model="form.name"></el-input></el-form-item><el-form-item label="活动区域" prop="region"><el-select v-model="form.region" placeholder="请选择活动区域"><el-option label="区域一" value="shanghai"></el-option><el-option label="区域二" value="beijing"></el-option></el-select></el-form-item><el-form-item label="活动时间"><el-col :span="11"><el-date-picker type="date" placeholder="选择日期" v-model="form.date1"style="width: 100%;"></el-date-picker></el-col><el-col class="line" :span="2">-</el-col><el-col :span="11"><el-time-picker type="fixed-time" placeholder="选择时间" v-model="form.date2"style="width: 100%;"></el-time-picker></el-col></el-form-item><el-form-item label="即时配送"><el-switch v-model="form.delivery"></el-switch></el-form-item><el-form-item label="活动性质"><el-checkbox-group v-model="form.type"><el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox><el-checkbox label="地推活动" name="type"></el-checkbox><el-checkbox label="线下主题活动" name="type"></el-checkbox><el-checkbox label="单纯品牌曝光" name="type"></el-checkbox></el-checkbox-group></el-form-item><el-form-item label="特殊资源"><el-radio-group v-model="form.resource"><el-radio label="线上品牌商赞助"></el-radio><el-radio label="线下场地免费"></el-radio></el-radio-group></el-form-item><el-form-item label="活动形式"><el-input type="textarea" v-model="form.desc"></el-input></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">立即创建</el-button></el-form-item></el-form>
</div><script>new Vue({el: '#app',data: {form: {name: '',region: '',date1: '',date2: '',delivery: false,type: [],resource: '',desc: ''},//定义校验规则rules: {name: [{required: true, message: '请输入活动名称', trigger: 'blur'},{min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}],region: [{required: true, message: '请选择活动区域', trigger: 'change'}]}},methods: {onSubmit() {console.log(this.form);//validate：对整个表单进行校验的方法，参数为一个回调函数。//该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。this.$refs['form'].validate((valid) => {if (valid) {alert('submit!');} else {console.log('error submit!!');return false;}});}}})
</script>
<script>new Vue({el: '#app'});
</script>
</body>
</html>
02 Bootstrap和ElementUI相关推荐
- 前端技术：Vue+elementUI 饿了吗UI+CRUD，创建图书管理系统
1.Vue框架 JavaScript升级版,JS它脚本语言,Vue框架 语言它my生命,api工具类 文章中心思想,有生命力 Vue框架思想,MVVM框架思想,数据驱动思想,组件化思想 2.j2ee框 ...
- Bootstrap前端组件库+构建管理
目录 构建管理 Grunt Sass JavaScript Bootstrap作为前端组件库 一些语法 媒体查询 辅助类 栅栏系统 补充 代码示例 媒体查询 网格系统 建立可伸缩的甚至是响应式组件的方 ...
- 李炎恢Bootstrap视频教程下载
李炎恢Bootstrap视频教程下载 课程目录: 01.[Bootstrap] 第1章 Bootstrap介绍.avi 02.[Bootstrap] 第2章 排版样式.avi ...
- 流程系统的设计与实现
流程系统的设计与实现 The Design and Implementation of Process system 详细论文 摘要 在计算机还没有普及的时候,很多工作流程都是手工传递纸质表格,逐级审 ...
- Vue纯前端：榜单管理系统
文章目录: 一.主要功能: 二.实现效果: 1.主页: 2.注册: 3.登录: 4.列表界面: 5.添加应用界面: 6.修改应用界面: 7.模糊查询: 三.整体架构: 四.配置文件说明: 五.功能说明 ...
- java项目_JNPF快速开发平台-简单快速高效开发java项目
◆JNPF快速开发平台 JNPF快速开发平台采用前后端分离技术.采用B/S架构开发,形成一站式开发多端(APP+PC)使用. 使用JNPF开发平台可以简单.快速.高效的构建各种类型java项目. ◆J ...
- Vue 全家桶 + Electron 开发的一个跨三端的应用
GitHub Repo:vue-objccn Follow: halfrost · GitHub 项目地址:https://github.com/halfrost/vue-objccn 利用 Vue. ...
- 万万没想到！ModelArts与AppCube组CP了
摘要:嘘,华为云内部都不知道的秘密玩法,我悄悄告诉您! 双"魔"合璧庆双节 ↑开局一张图,故事全靠编 华为云的一站式开发平台ModelArts和应用魔方AppCube居然能玩到一起 ...
- Vue 全家桶 + Electron 开发的一个跨三端的应用 1
代码地址如下: http://www.demodashi.com/demo/11738.html GitHub Repo:vue-objccn Follow: halfrost · GitHub 利用 ...
最新文章
- 算法之智能搜索（下）
- linux fedora35指定某个固定的启动项作为默认的启动项
- Git学习笔记------整理自廖雪峰官网教程
- 洛谷 一种堆套路 P1631序列合并、P2085最小函数值
- 【手算】逆序数树形计算方法
- java合并sheet行_java poi Excel循环合并行
- python静态方法和类方法的区别_python中类的静态方法和类的类方法
- Git warning：LF will be replaced by CRLF in readme.txt的原因与解决方案
- 网络管理与维护作业8
- Python3.6全栈开发实例[013]
- 镇江市第一届软件设计大赛参赛作品简单记录
- RT-Thread Nano入门学习笔记（2）
- 2022年抗癌行业研究报告
- html+css精致的登录页面 （含源码的哦）
- 关于2048小游戏的开发感想
- 【BJOI2019】勘破神机（下降幂转自然幂）（第一类斯特林数）（特征方程）
- JAVA整合Milvus矢量数据库及数据
- Metasploit联动CobaltStrike渗透win11主机并提权
- 小白学 Python（2）：基础数据类型（上）
- 古人的养德养生观揭秘