first commit

This commit is contained in:
编码猿
2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions

View File

@@ -0,0 +1,128 @@
<html>
<head >
<title> 我的第一个网站 </title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<img>
<h1>标题1</h1>
<h2>标题2</h2>
<hr>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6 >标题6</h6>
<img title="悬浮的时候提示文字" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="图片出不来了">
<P>
什么&nbsp;&nbsp;&nbsp;&nbsp;是HTML HTML 是 <del>用来</del> 描述网页的一种语言。 <br>
HTML 是一种在 Web 上使用的 <i>通用</i> 标记语言。<br>
HTML 允许你格式化文本, <strong>添加图</strong> 片,创建 <sub></sub> 接、输入 <sup></sup> 单、框架和表格等等,并
</P>
<pre>
此例演示如何使用 pre 标签
对空行和 空格
进行控制
</pre>
<ul>
<li>
html学习
</li>
<li>无序列表2</li>
<li>无序列表3</li>
<li>无序列表4</li>
<li>无序列表5</li>
</ul>
<ol>
<li>
有序列表1
<ol>
<li>p标签学习</li>
<li>li标签学习</li>
<li>img标签学习</li>
</ol>
</li>
<li>有序列表2</li>
<li>有序列表3</li>
<li>有序列表4</li>
<li>有序列表5</li>
</ol>
<a href="https://item.jd.com/100033815062.html" target="_blank">去京东</a>
<input type="text" placeholder="请输入用户名">
<input type="password" placeholder="请输入密码">
<input type="number" placeholder="请输入手机号">
<input type="color">
<input type="date">
<input type="time">
<input type="file">
你的兴趣:
编程<input type="checkbox">
打游戏<input type="checkbox">
看电视<input type="checkbox">
你的性别:
<input type="radio" name="znan">
<input type="radio" name="znan">
<input type="range">
<input type="file">
<input type="button" value="登录 input">
<!-- <input type="submit" value="登录 input"> -->
<button>登录</button>
<select name="" id="">
<option value="">-请选择-</option>
<option value="101">合肥</option>
<option value="102">南京</option>
<option value="103">北京</option>
</select>
<textarea cols="30" rows="10" placeholder="请输入留言"></textarea>
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>职业</th>
</tr>
<tr>
<td>张三</td>
<td>18</td>
<td></td>
</tr>
<tr>
<td>李四</td>
<td>20</td>
<td></td>
</tr>
</table>
<video width="200px" src="https://v1.kwaicdn.com/upic/2023/01/23/23/BMjAyMzAxMjMyMzUyNTZfODI5MjQwMzQ5Xzk0NDQzNTI5NDI1XzBfMw==_hd15_B0a384e79cc83963e0dda8f3dd819d84c.mp4?pkey=AAVOq3pXn2cUMhT5WPtpTs6MmEH5rbnCFjqcOmsHPzzOv4d_wn8ItljRE4wR5eYAOiJkEQMecpkvNsHA97CT6zGkBOvS4vVjqORlWSwcmsobWBIl5h_TK-XS4fqslOFqU4s&tag=1-1675502788-unknown-0-dlm0ux2rcq-2ba2128185d3f233&clientCacheKey=3xix3c9m4kbcyh4_hd15.mp4&di=24a1ee5e&bp=14944&tt=hd15&ss=vp" controls muted loop autoplay></video>
<audio width="200px" src="https://v1.kwaicdn.com/upic/2023/01/23/23/BMjAyMzAxMjMyMzUyNTZfODI5MjQwMzQ5Xzk0NDQzNTI5NDI1XzBfMw==_hd15_B0a384e79cc83963e0dda8f3dd819d84c.mp4?pkey=AAVOq3pXn2cUMhT5WPtpTs6MmEH5rbnCFjqcOmsHPzzOv4d_wn8ItljRE4wR5eYAOiJkEQMecpkvNsHA97CT6zGkBOvS4vVjqORlWSwcmsobWBIl5h_TK-XS4fqslOFqU4s&tag=1-1675502788-unknown-0-dlm0ux2rcq-2ba2128185d3f233&clientCacheKey=3xix3c9m4kbcyh4_hd15.mp4&di=24a1ee5e&bp=14944&tt=hd15&ss=vp" controls muted loop autoplay></audio>
</body>
</html>

View File

@@ -0,0 +1,12 @@
<!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>吧哈哈哈哈</title>
</head>
<body>
</body>
</html>

View File

@@ -0,0 +1,127 @@
Git 版本控制系统
作者: linus linux
系统windows普通用户 linux (服务器操作系统 + 硬件)
作用:
版本控制
回滚 (时光倒流)
代码仓库
没有界面的软件!!
Github 有界面的git
gitee
gitlab 需要部署运行在自己公司的电脑里面
全球最大的代码 仓库!!
代码仓库
远程仓库
本地仓库
分支
master 主分支
dev 开发
test 测试
prod 正式
终端环境
git clone 远程仓库地址 下载代码!!
上传代码到服务器 (先拉后推)
git add 文件名字(-A 选中文件
git commit -m "设置上传备注"
git pull
git push 上传代码
如何同步服务器最新版本的代码到本地
git pull
git init 初始一个本地的仓库
git init
git add -A
git commit -m "first commit"
git remote add origin https://gitee.com/bmycode/front-end-team-10.git
git push -u origin "master"
同步 更改
git pull 拉取服务器最新代码到本地
git push 提交上传代码到服务器
仓库的登录地址
账户密码
web开发
web 前端 开发 界面 特效 功能
web 后端 开发 数据 安全 服务器
后端开发有3p
jsp java
php
asp c#
go
python
nodejs
web 前端 开发
html 超文本标签标记语言 人的骨骼 支撑这个网站布局的核心骨架
语法:
<开始单词 属性名="属性数值" ....> 放其他内容 </结束单词>
属性:
私有属性
公共属性
刺头: <开始单词/>
html 告诉浏览器,这个文件是一个网页
head 给浏览器看的内容放在这里面
body 给用户看的内容放在这里面
p 段落,用来放文字的
img 图片
h1 ~ h6 标题标签 数字越大显示效果越小
meta 元数据 标签
注意index 网站 首页
注释
html 实体符
css 层叠样式表 人的外貌 css就是将丑陋的html进行美化让用户喜欢这个页面
javascriptjs 脚本语言 人的思想大脑 特效 功能
web 网页
手机 app开发app小程序
桌面应用开发
服务器应用开发 nodejs

View File

@@ -0,0 +1,82 @@
<!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>
</head>
<body>
<div class="top_menu">
<ul>
<li>
<a href="">新闻</a>
</li>
<li>
<a href="">新闻</a>
</li>
<li>
<a href="">新闻</a>
</li>
<li>
<a href="">新闻</a>
</li>
</ul>
<div class="tools">
<div class="setting">设置</div>
<div class="login">登录</div>
</div>
</div>
<div class="content">
<img src="" alt="">
<div class="search">
<input type="text">
<button>百度一下</button>
</div>
<div class="hot">
<div class="title">
<div class="left">
<img src="" alt="">
<img src="" alt="">
</div>
<div class="right">
<img src="" alt="">
<span>换一换</span>
</div>
</div>
<ul>
<li>
<span>1</span>
<a>狂飙带火鱼干店 老板:微信加烦了</a>
</li>
</ul>
</div>
</div>
<ul class="copyright">
<li>
<a href="">关于百度</a>
</li>
<li>
<a href="">关于百度</a>
</li>
<li>
<a href="">关于百度</a>
</li>
<li>
哈哈哈
</li>
</ul>
</body>
</html>

View File

@@ -0,0 +1,35 @@
<!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>
</head>
<body>
<div class="header">
<div class="top center">
<div class="left">
<img src="" alt="">
<img src="" alt="">
</div>
<ul class="right"></ul>
</div>
<ul class="bottom"></ul>
</div>
<div class="content">
<div class="center">
<img class="banner" src="" alt="">
<div class="list">
<ul class="left">
<li></li>
</ul>
<div class="right"></div>
</div>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,22 @@
div: 主要用来划分网页结构的 90%
span: 用来放文字的(划分网页结构的) 10%
p用来放文字的补充 段落
可以给标签取一个名字,这样好区分众多的标签
标签分类:
男(块标签):独占一行的标签 div p ul ol 可以 设置宽高
女(行标签):不独占一行的标签 span a img i 不可以设置宽高
如何画结构:
1: 网站都分三层(头,中间内容,版权)
2: 如果网站 中间如果有居中的部分那居中部分外面必须套个div
3按照位置来归纳
4按功能来归纳
5当div内部只有一个标签的时候外部的div的作用可以被内部标签替代

View File

@@ -0,0 +1,85 @@
<!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>菜鸟教程</title>
</head>
<body>
<div class="header">
<div class="center">
<ul class="left">
<li>
<a href=""></a>
<img src="" alt="">
</li>
<li>
<a href=""></a>
</li>
</ul>
<ul class="right">
<li>
<a href=""></a>
<img src="" alt="">
</li>
<li>
<a href=""></a>
</li>
</ul>
</div>
</div>
<div class="content">
<div class="center">
<div class="logo">
<div class="left">
<img src="" alt="">
<div class="search">
<select name="" id="">
<option value=""></option>
</select>
<input type="text">
<button></button>
</div>
</div>
<img src="" alt="">
</div>
<ul class="menu">
<li>
<ul>
<li>
<a href="">新闻</a>
</li>
<li>
<a href="">新闻</a>
</li>
</ul>
</li>
<li>
<ul>
<li>
<a href="">新闻</a>
</li>
<li>
<a href="">新闻</a>
</li>
</ul>
</li>
</ul>
<img src="" alt="">
</div>
</div>
<div class="copyright"></div>
</body>
</html>

View File

@@ -0,0 +1,4 @@
.two {
color: green !important;
}

View File

@@ -0,0 +1,39 @@
<!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>css 学习</title>
<link rel="stylesheet" href="index.css">
<style>
.two {
color: blue;
}
</style>
</head>
<body>
<p id="one">这是红色文字</p>
<p class="two" style="color: brown;">这是蓝色文字</p>
<h2 class="three">哈哈哈</h2>
<input type="text" placeholder="用户名">
<h1>你好</h1>
<p>你好少时诵诗书所</p>
<div class="test">
<p>你好</p>
</div>
</body>
</html>

View File

@@ -0,0 +1,141 @@
<!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>css 属性练习</title>
<style>
body {
height: 3000px;
}
@font-face {
font-family: "test";
src: url("./shangshouzhaocaimaoti.ttf");
}
.font {
font-size: 30px;
font-family: "test";
}
.demo {
width: 200px;
height: 200px;
background: red;
text-align: center;
line-height: 200px;
}
.demo2 {
width: 80px;
height: 80px;
background: blue;
vertical-align: middle;
display: inline-block;
box-shadow: 7px 4px 6px #000;
}
.demo2+p {
display: inline-block;
text-shadow: 13px 6px 2px #f00;
}
a {
text-decoration: none;
}
.back {
width: 300px;
height: 300px;
background-image: url("https://upload.jianshu.io/users/upload_avatars/301940/189d69dd-af7c-4290-9e2c-89e98acf3603.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp");
background-repeat: no-repeat;
background-color: #8d8d8d;
background-position: 31px 33px;
background-size: cover;
}
.banner {
height: 400px;
background-image: url("https://sqimg.qq.com/qq_product_operations/im/2015/fisrtbg.jpg");
background-attachment: fixed;
}
.roll {
height: 300px;
width: 400px;
background: #8d8d8d;
overflow-y: scroll;
}
</style>
</head>
<body>
<p class="font">你好 aaaa 00001123344</p>
<div class="demo">
你好啊
</div>
<a href="">你哈哈哈啊啊哈</a>
<div class="demo2"></div>
<p>用户昵称</p>
<div class="back"></div>
<div class="banner">
</div>
<div class="roll">
<p>文字1</p>
<p>文字2</p>
<p>文字3</p>
<p>文字4</p>
<p>文字5</p>
<p>文字6</p>
<p>文字7</p>
<p>文字8</p>
<p>文字9</p>
<p>文字10</p>
<p>文字11</p>
<p>文字12</p>
<p>文字13</p>
<p>文字14</p>
<p>文字15</p>
<p>文字16</p>
<p>文字17</p>
<p>文字18</p>
<p>文字19</p>
<p>文字20</p>
<p>文字21</p>
<p>文字22</p>
<p>文字23</p>
<p>文字24</p>
<p>文字25</p>
<p>文字26</p>
<p>文字27</p>
<p>文字28</p>
<p>文字29</p>
<p>文字30</p>
<p>文字31</p>
<p>文字32</p>
<p>文字33</p>
<p>文字34</p>
<p>文字35</p>
<p>文字36</p>
<p>文字37</p>
<p>文字38</p>
<p>文字39</p>
<p>文字40</p>
<p>文字41</p>
<p>文字42</p>
<p>文字43</p>
<p>文字44</p>
<p>文字45</p>
<p>文字46</p>
<p>文字47</p>
<p>文字48</p>
<p>文字49</p>
<p>文字50</p>
</div>
</body>
</html>

View File

@@ -0,0 +1,94 @@
css 写法
三种:
内部写法(写在开始标签内部的)
<p style="color: blue;">这是测试文字</p>
优先级最高
!important 提示css属性的优先级
内联写法写在head里面的
外链写法单独一个css文件
基本写法:
选择器 {
属性名: 属性值 (可选 !important
}
组合写法:
选择1 选择器2: 选择 标签1 中 的 标签2 简写:嵌套关系
选择1 > 选择器2: 选择 父标签为1 中 的 2标签 简写:嵌套关系
选择1,选择器2: 同时选中 标签1和2
选择1+选择器2: 选中 紧跟在 标签1 后面 的标签2
选择器: 找人的一种方式
标签选择器
给标签取个名字
类选择器 class (简写 .
id选择器 简写 #
这个名字是这个网页唯一的
* 通配符选择器
一般用来清除 标签 的 默认样式
伪类选择器
:hover
:focus
:before
:after
路径写法:
绝对路径
相对距离
./ 当前路径开始寻找
../ 从当前位置返回上一级开始寻找
/ 从当前路径的开始位置开始寻找
css属性学习
display: 可以隐藏显示元素,将块 和 行 进行 相互转换
inline-block 同时具有 行标签 放在一行的特性,还具有块标签可以设置宽高的特殊
inline 行标签
block 块标签
none 隐藏元素
text-decoration: none; 清除下划线
text-shadow13px 6px 2px #f00 文字加阴影
font-size: 30px; 设置字体大小
font-weight: bold; 加错
color: red; 设置颜色
background: red; 设置背景色
text-align: center; 文字在父元素的宽度内部居中
opacity: 0 ~ 1; 设置透明度
line-height 垂直居中 数值和父元素的高度一样
注意:只针对单行文字
父元素内部子元素的居中方式
vertical-align 垂直居中
letter-spacing: 3px; 字符之间的间距x轴

View File

@@ -0,0 +1,49 @@
<!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>下拉菜单</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.menu>li {
float: left;
position: relative;
}
.dorp_menu {
display: none;
position: absolute;
left: 0;
width: 76px;
}
.menu>li:hover .dorp_menu{
display: block;
}
</style>
</head>
<body>
<ul class="menu">
<li>菜单1</li>
<li>菜单2</li>
<li>
菜单3
<ul class="dorp_menu">
<li>菜单3-1</li>
<li>菜单3-2</li>
<li>菜单3-3</li>
</ul>
</li>
<li>菜单4</li>
<li>菜单5</li>
<li>菜单6</li>
</ul>
</body>
</html>

View File

@@ -0,0 +1,45 @@
<!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>盒子模型</title>
<style>
.main {}
.box {
width: 200px;
height: 200px;
}
.box1 {
background: red;
float: left;
}
.box2 {
background: blue;
float: left;
}
.box3 {
background: green;
clear: both;
}
</style>
</head>
<body>
<div class="main">
<div class="box box1">盒子1</div>
<div class="box box2">盒子2</div>
</div>
<div class="box box3">盒子2</div>
</body>
</html>

View File

@@ -0,0 +1,36 @@
<!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>盒子模型</title>
<style>
.box {
width: 200px;
height: 200px;
}
.box1 {
background: red;
border: 30px solid #050505;
padding: 10px;
}
.box2 {
background: blue;
}
</style>
</head>
<body>
<div class="box box1">测试</div>
<div class="box box2"></div>
</body>
</html>

View File

@@ -0,0 +1,60 @@
盒子 模型:
有 内边距(padding) ,外边距(margin),边框(border)内容content
padding 变大
padding 和 margin 写法一样
margin: 10px; /** 同时对 上右下左 四个方向设置一样的数值**/
margin: 10px 20px; /** 同时对 上下 左左右 设置数值 **/
margin: 10px 20px 30px; /** 对 上 左右 下 设置数值 **/
margin: 10px 20px 30px 40px; /** 上 右 下 左 **/
/* margin-bottom: 17px;
margin-left: 42px;
margin-top: 31px;
margin-right: 10px;*/
border: 10px solid #050505;
border-top: 10px solid #050505;
border-right: 10px solid #050505;
border-bottom: 10px solid #050505;
border-left: 10px solid #050505;
主要是为了方便将布局和现实映射
盒子模型的计算规则:
标准盒子模型:
元素真实宽高 = 你写的宽高content宽高 + padding & border
在你写的宽高 基础上向外拓张
怪异盒子模型 box-sizing: border-box;
content 宽高 = 你写的宽高(元素真实宽高) - padding & border
在你写的宽高 基础上向内缩减
浮动:
让元素(块)排一行,或者实现 左右布局
注意:
浮动会让元素从原本的位置删除(文档流中删除),下面的元素会钻下去
如何解决:
1clear: both; 加在受影响的那个元素上
2手动加高度
3overflow: hidden;
float: left right

View File

@@ -0,0 +1,59 @@
<!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>定位</title>
<style>
body {
height: 3000px;
}
.box {
width: 200px;
height: 200px;
float: left;
}
.box1 {
background: red;
position: relative;
left: 20px;
top: 20px;
}
.box2 {
background: green;
position: fixed;
right: 0;
bottom: 0;
}
.box3 {
background: yellow;
position: absolute;
}
.box4 {
background: plum;
}
.box_1_1 {
width: 100px;
height: 100px;
background: blue;
position: absolute;
left: 100px;
top: 100px;
}
</style>
</head>
<body>
<div class="box box1">
<div class="box_1_1"></div>
</div>
<div class="box box2"></div>
<div class="box box3"></div>
<div class="box box4"></div>
</body>
</html>

View File

@@ -0,0 +1,82 @@
<!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>定位案例</title>
<link rel="stylesheet" href="http://at.alicdn.com/t/c/font_3887737_znaz15du23n.css">
<style>
body,
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
.main {
width: 590px;
height: 470px;
background: url("https://img20.360buyimg.com/pop/s1180x940_jfs/t1/74001/5/24121/92985/63de1286F9b7604e3/068cbd26f08c101a.jpg");
background-size: cover;
}
.main {
position: relative;
}
.nav,
.main ul {
position: absolute;
}
.main ul {
bottom: 22px;
left: 26px;
}
.main ul li {
float: left;
width: 10px;
height: 10px;
border-radius: 100%;
background: #fff;
margin-right: 5px;
}
.nav {
top: 50%;
transform: translateY(-50%);
width: 100%;
}
.nav i {
font-size: 30px;
color: #fff;
}
.icon-zuojiantou-copy {
float: right;
}
</style>
</head>
<body>
<div class="main">
<div class="nav">
<i class="iconfont icon-zuojiantou"></i>
<i class="iconfont icon-zuojiantou-copy"></i>
</div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>

View File

@@ -0,0 +1,25 @@
定位 position
主要作用就是把元素放在任意你想放的位置
z-index: 调整元素z轴的浮动层级 取值无范围,数值越大,越靠前
如果都没设置z-index或者 z-index 都一样,那么按照顺序来堆叠,越靠后,堆的越高
相对定位 relative
当元素被设置 相对定位 后它原本的位置还在,没有被从网页上删除
它的定位参考对象是 它原本 的位置
绝对定位 absolute
当元素被设置 绝对定位 后它原本的位置不在了,从网页上被删除
它的定位参考对象:
1如果有父元素且设置了定位(三个定位的任意一个),那么参考父元素的位置(现在位置)来
2反之参考浏览器边框
固定定位 fixed
当元素被设置 绝对定位 后它原本的位置不在了,从网页上被删除
它的定位参考对象是 浏览器窗口

View File

@@ -0,0 +1,27 @@
<!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>css过渡动画</title>
<style>
.box {
width: 200px;
height: 200px;
background: red;
transition: all 2s;
}
.box:hover {
/* width: 400px;
height: 400px; */
transform: rotate(180deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

View File

@@ -0,0 +1,43 @@
<!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>动画</title>
<style>
.box {
width: 200px;
height: 200px;
background: red;
animation: sport 5s ease 2 alternate;
}
@keyframes sport {
from {}
to {}
/* 0% {
background: red;
}
50% {
background: yellow;
}
100% {
background: blue;
} */
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

View File

@@ -0,0 +1,20 @@
css过渡动画 transition
从开始到结束的变化过程
注意:谁发生变化,代码就加谁身上!!
css3 2d转换 属性:
transform
数值:
translate 让元素在 xy轴 产生偏移
translateX
translateY
rotateX 或 Y 让元素旋转起来数值单位deg
scale 让元素放大或者缩小

View File

@@ -0,0 +1,9 @@
/* 清除浏览器默认样式的css代码 */
body,ul,input,li,a{
margin: 0;
padding: 0;
border: none;
outline: none;
list-style: none;
text-decoration: none;
}

View File

@@ -0,0 +1,217 @@
.header_menu {
height: 26px;
background: #f2f2f2;
border-bottom: 1px solid #e5e5e5;
line-height: 25px;
}
.header_left>li,
.header_right>li {
float: left;
}
.header_left> li a,
.header_right >li a{
color: #999;
font-size: 12px;
}
.header_left> li:first-child {
margin-right: 20px;
}
.header_left> li:last-child {
margin-left: 20px;
}
.header_right> li {
margin-left: 10px;
margin-right: 14px;
position: relative;
}
.header_right> li i {
font-size: 12px;
color: #999;
transition: all 0.3s;
display: inline-block;
transform: scale(0.7);
}
.header_right> li:hover i {
transform: rotate(180deg) scale(0.7);
}
.header_right .li_hover:hover {
background: #fff;
}
.header_right .li_hover:hover .drop_menu {
display: block;
}
.header_right .drop_menu {
display: none;
position: absolute;
width: 96px;
height: 57px;
background: #fff;
border: 1px solid rgb(238,238,238);
padding: 8px 10px;
box-sizing: border-box;
line-height: 1.2;
z-index: 9;
}
.header_logo {
height: 120px;
border-bottom: 1px solid #7a45e5;
}
.header_logo .logo_left {
line-height: 120px;
}
.header_logo .logo_left img:first-child {
width: 116px;
height: 40px;
float: left;
margin-top: 36px;
margin-right: 20px;
}
.header_logo .logo_left img:last-child {
width: 175px;
height: 16px;
}
.header_logo .input {
width: 437px;
height: 30px;
box-sizing: border-box;
font-size: 0;
margin-top: 36px;
}
.header_logo .input input {
width: 347px;
height: 36px;
border: 3px solid #7a45e5;
box-sizing: border-box;
}
.header_logo .input .button {
width: 90px;
height: 36px;
text-align: center;
line-height: 36px;
color: #fff;
font-size: 16px;
background: linear-gradient(to right,#7a45e5 20%,#b23cef 80%);
}
.content .type {
height: 461px;
position: relative;
top: -39px;
}
.type_left {
width: 200px;
height: 100%;
}
.type_left .title {
height: 38px;
background: linear-gradient(90deg,#7a45e5 20%,#b23cef 80%);
padding-left: 20px;
box-sizing: border-box;
font-size: 14px;
color: #fff;
line-height: 38px;
}
.type_right {
width: calc(100% - 200px);
height: 100%;
}
.type_left ul{
height: 420px;
background: #333;
}
.type_left ul li {
height: 84px;
color: #fff;
width: 160px;
margin-left: 20px;
font-size: 0;
border-bottom: 1px dotted #545454;
box-sizing: border-box;
}
.type_left ul li .icon {
margin-bottom: 9px;
padding-top: 15.5px;
}
.type_left ul li .icon img{
width: 24px;
height: 24px;
margin-right: 10px;
}
.type_left ul li .text a {
color: #fff;
font-size: 12px;
}
.type_left ul li .icon span{
font-size: 16px;
color: #fff;
font-weight: 700;
}
.type_right {
height: 38px;
}
.type_right .title {
padding-left: 46px;
box-sizing: border-box;
line-height: 38px;
}
.type_right .title li {
float: left;
margin-right: 40px
}
.type_right .title li .active {
color: #7a45e5;
font-weight: 600;
}
.type_right .title li a{
font-size: 14px;
color: #333;
}
.banner .text {
text-align: center;
width: 250px;
}
.banner .text .tm_text{
margin-top: 30px;
font-size: 18px;
color: rgb(122, 69, 229);
font-weight: bold;
}
.banner .text .tm_desc{
font-size: 20px;
margin-top: 10px;
font-weight: bold;
color: rgb(122, 69, 229);
}
.banner .text .tm_fg{
margin: 20px 0;
}
.banner .text .code{
display: block;
margin: 0 auto;
}
.banner .text .tm_t{
font-size: 14px;
font-weight: bold;
color: rgb(51, 51, 51);
margin-bottom: 8px;
margin-top: 10px;
}
.banner .text .tm_s{
font-size: 12px;
color: rgb(165, 165, 165);
}

View File

@@ -0,0 +1,157 @@
<!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>天猫</title>
<link rel="stylesheet" href="https://at.alicdn.com/t/c/font_3887737_gjwdl9txkbg.css">
<link rel="stylesheet" href="./clear.css">
<link rel="stylesheet" href="./public.css">
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div class="header">
<div class="header_menu">
<div class="center">
<ul class="header_left left">
<li>
<i class="iconfont icon-zuojiantou"></i>
<a href="">天猫首页</a>
</li>
<li>
<a href="">喵,欢迎来天猫国际</a>
</li>
<li>
<a href="">请登录</a>
</li>
</ul>
<ul class="header_right right">
<li class="li_hover">
<a href="">我的淘宝</a>
<i class="iconfont icon-zuojiantou-copy-copy"></i>
<ul class="drop_menu">
<li><a href="">已买到的宝贝</a></li>
<li><a href="">已卖到的宝贝</a></li>
</ul>
</li>
<li>
<a href="">购物车</a>
</li>
<li>
<a href="">收藏夹</a>
</li>
<li>
<a href="">手机版</a>
</li>
</ul>
</div>
</div>
<div class="header_logo">
<div class="center">
<div class="logo_left left">
<img src="https://img.alicdn.com/tfs/TB1tSm3nzTpK1RjSZKPXXa3UpXa-109-40.png" alt="">
<img src="https://img.alicdn.com/tfs/TB138sZOpY7gK0jSZKzXXaikpXa-175-16.png" alt="">
</div>
<div class="input right">
<input type="text left"/>
<div class="button right">搜索</div>
</div>
</div>
</div>
</div>
<div class="content">
<div class="center">
<div class="type">
<div class="type_left left">
<div class="title">全部商品分类</div>
<ul>
<li>
<div class="icon">
<img src="https://img.alicdn.com/tps/TB1Bk97JpXXXXcVXFXXXXXXXXXX-48-48.png" alt="">
<span>美妆个护</span>
</div>
<div class="text">
<a href="">面膜</a> /
<a href="">面膜</a> /
<a href="">面膜</a>
</div>
</li>
<li>
<div class="icon">
<img src="https://img.alicdn.com/tps/TB1Bk97JpXXXXcVXFXXXXXXXXXX-48-48.png" alt="">
<span>美妆个护</span>
</div>
<div class="text">
<a href="">面膜</a> /
<a href="">面膜</a> /
<a href="">面膜</a>
</div>
</li>
<li>
<div class="icon">
<img src="https://img.alicdn.com/tps/TB1Bk97JpXXXXcVXFXXXXXXXXXX-48-48.png" alt="">
<span>美妆个护</span>
</div>
<div class="text">
<a href="">面膜</a> /
<a href="">面膜</a> /
<a href="">面膜</a>
</div>
</li>
<li>
<div class="icon">
<img src="https://img.alicdn.com/tps/TB1Bk97JpXXXXcVXFXXXXXXXXXX-48-48.png" alt="">
<span>美妆个护</span>
</div>
<div class="text">
<a href="">面膜</a> /
<a href="">面膜</a> /
<a href="">面膜</a>
</div>
</li>
<li>
<div class="icon">
<img src="https://img.alicdn.com/tps/TB1Bk97JpXXXXcVXFXXXXXXXXXX-48-48.png" alt="">
<span>美妆个护</span>
</div>
<div class="text">
<a href="">面膜</a> /
<a href="">面膜</a> /
<a href="">面膜</a>
</div>
</li>
</ul>
</div>
<div class="type_right left">
<ul class="title">
<li><a class="active" href="">首页</a></li>
<li><a href="">海外直购</a></li>
<li><a href="">海外直购</a></li>
<li><a href="">海外直购</a></li>
</ul>
<div class="banner">
<img class="left" src="https://gw.alicdn.com/imgextra/i2/O1CN01znABAz1pNQyILDeJ7_!!6000000005348-2-tps-740-420.png" alt="">
<div class="text left">
<div class="tm_text">天猫国际</div>
<div class="tm_desc">TMALL GLOBAL</div>
<img class="tm_fg" src="https://gw.alicdn.com/tps/TB1tQM6JXXXXXaeXXXXXXXXXXXX-38-11.jpg_Q75.jpg" alt="">
<img class="code" src="https://gw.alicdn.com/imgextra/i1/O1CN01g3E02H1JOkHYfqBix_!!6000000001019-0-tps-200-200.jpg_Q75.jpg" alt="">
<div class="tm_t">畅享全球好货</div>
<div class="tm_s">正品保障,破损无忧,晚到必赔!</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer"></div>
</body>
</html>

View File

@@ -0,0 +1,21 @@
/* 公共样式的css代码 */
.left {
float: left;
}
.right {
float: right;
}
.clear {
clear: both;
}
.hidden {
overflow: hidden;
}
.reset {
line-height: 1;
}
.center {
width: 1190px;
margin: 0 auto;
}

View File

@@ -0,0 +1,48 @@
<!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>flex</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
ul {
display: flex;
height: 45px;
align-items: center;
justify-content: space-around;
}
li {
}
</style>
</head>
<body>
<ul>
<li>测试1</li>
<li>测试2</li>
<li>测试3</li>
<li>测试4</li>
<li>测试5</li>
<li>测试6</li>
<li>测试7</li>
<li>测试8</li>
<li>测试9</li>
<li>测试10</li>
<li>测试11</li>
<li>测试12</li>
<li>测试13</li>
<li>测试14</li>
<li>测试15</li>
</ul>
</body>
</html>

View File

@@ -0,0 +1,55 @@
<!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>
<style>
body {
margin: 0;
}
html {
font-size: 100px;
}
.box {
width: 1.875rem;
height: 1.875rem;
float: left;
}
.box1 {
background: red;
}
.box2 {
background: yellow;
}
/* 320<?<=375 */
@media screen and (min-width: 320px) and (max-width: 375px) {
html {
font-size: 85.333px;
}
}
@media screen and (min-width: 375px) and (max-width: 413px) {
html {
font-size: 100px;
}
}
@media screen and (min-width: 414px) {
html {
font-size: 110.4px;
}
}
</style>
</head>
<body>
<div class="box box1"></div>
<div class="box box2"></div>
</body>
</html>

View File

@@ -0,0 +1,55 @@
<!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>
<script type="text/javascript">
(function (w, d) {
function setSize() {
// 获取屏幕的宽度 375px
var screenWidth = d.documentElement.clientWidth;
// 根据规则计算 html 的font-size数值
var currentFontSize = screenWidth * 100 / 750;
// 修改html上的font-size
d.documentElement.style.fontSize = currentFontSize + 'px';
}
w.addEventListener('resize', setSize);
w.addEventListener('pageShow', setSize)
w.addEventListener('DOMContentLoaded', setSize)
})(window, document)
</script>
<style>
body {
margin: 0;
}
.box {
width: 3.75rem;
height: 3.75rem;
float: left;
}
.box1 {
background: red;
}
.box2 {
background: yellow;
}
</style>
</head>
<body>
<div class="box box1"></div>
<div class="box box2"></div>
</body>
</html>

View File

@@ -0,0 +1,61 @@
<!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>媒体查询</title>
<style>
/* 320 375 414 */
body {
margin: 0;
}
.box {
width: 187.5px;
height: 187.5px;
float: left;
}
.box1 {
background: red;
}
.box2 {
background: yellow;
}
/* 320<?375 */
@media screen and (min-width: 320px) and (max-width: 375px) {
.box {
width: 160px;
height: 160px;
}
}
@media screen and (min-width: 375px) and (max-width: 414px) {
.box {
width: 187.5px;
height: 187.5px;
}
}
@media screen and (min-width: 414px) {
.box {
width: 207px;
height: 207px;
}
}
</style>
</head>
<body>
<div class="box box1"></div>
<div class="box box2"></div>
</body>
</html>

View File

@@ -0,0 +1,70 @@
1媒体查询响应式开发
2弹性盒子 + rem手机网站的尺寸单位
为什么需要????
以前的做法写一个pc网站然后通过 媒体查询 技术,来兼容 pc 和 手机
媒体查询实时检测屏幕的宽度变化然后显示或者隐藏网页上的元素让pc网站适配手机
现在的做法写两个网站一个pc一个手机网站
pc网站
手机网站
rem:
相对的尺寸单位,为了实现尺寸上的兼容
1.875rem 你写的尺寸rem * html上font-size = 真实的尺寸 160px
html上font-size 需要动态去变化的
那如何变化?
媒体查询
js
弹性盒子:
布局兼容
有两个轴 主轴x 和 交叉轴 y
13个css属性
7个在父元素上
display: flex 开启弹性盒子
flex-direction 改变默认的排列方向 row column注意 如果设置了 column那么 align-items 和
justify-content 作用相反
flex-wrap 排不下换行(注意,子元素自己加宽度)
justify-content 设置水平居中
align-items 垂直居中
align-content 设置多行结构的 垂直居中
flex-flow 是flex-direction属性和flex-wrap属性的简写形式
6个在子元素上
flex-grow 定义元素的放大比例,数值越大占比越大
flex 一般设置一个数值,实际作用约等于 flex-grow
flex-shrink 定义元素的缩小比例0 不缩放 1 默认缩放
order 排列顺序,数值越小越靠前
flex-basis
align-self 允许某个元素脱离 align-items 的规则来对齐

View File

@@ -0,0 +1,51 @@
<!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>Array</title>
</head>
<body>
</body>
<script>
// 1
// var arr = new Array()
// arr[0] = "刘兵"
// arr[1] = "18"
// arr[2] = "汽车"
// console.log(arr);
// 2
// var arr = new Array("刘兵", "18", '汽车')
// console.log(arr);
// 3
var arr = [
"刘兵",
"18",
'汽车',
[
[
"1"
]
],
{
test: [
{
name: '张三'
}
]
}
]
console.log(arr[3][0][0]);
console.log(arr[4].test[0].name);
arr[1] = "28"
console.log(arr);
</script>
</html>

View File

@@ -0,0 +1,56 @@
<!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>for</title>
</head>
<body>
</body>
<script>
// var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
// for (var i = 0; i < arr.length; i++) {
// console.log(arr[i]);
// }
// var i = 0;
// while (i < arr.length) {
// console.log(arr[i]);
// i++
// }
// var a = 10
// do {
// console.log(a);
// a++
// } while (a < 13)
// var total = 0;
// for (var i = 1; i<=100;i++) {
// total += i;
// }
// console.log(total);
var html = "1×1=1<br/>";
for (var i = 1; i <= 9; i++) {
for (var j = 1; j <= i; j++) {
// 1×1=1<br/>
html += `${j} x ${i} = ${i*j}&nbsp;&nbsp;`
}
html+= "<br/>"
}
document.write(html)
console.log(html);
</script>
</html>

View File

@@ -0,0 +1,81 @@
<!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>if</title>
</head>
<body>
<input type="number" placeholder="输入分数">
<button>检索</button>
<div class="result"></div>
</body>
<script>
// var money = 180;
// if (money > 100) {
// console.log("吃个好的");
// } else {
// console.log("吃个烧饼");
// }
// 60<=score<70
// document.querySelector("button").onclick = () => {
// var score = document.querySelector("input").value;
// var result = document.querySelector(".result")
// console.log(score);
// if (score < 60) {
// result.innerText = "考试不及格"
// } else if (score >= 60 && score < 70) {
// result.innerText = "普通"
// } else if (score >= 70 && score < 80) {
// result.innerText = "中等"
// } else if (score >= 80 && score < 90) {
// result.innerText = "良好"
// } else if (score >= 90 && score <= 100) {
// result.innerText = "优秀"
// } else {
// result.innerText = "分数有问题"
// }
// }
var score = 59;
// if (score < 60) {
// console.log("考试不及格");
// } else if (score >= 60 && score < 70) {
// console.log("普通");
// } else if (score >= 70 && score < 80) {
// console.log("中等");
// } else if (score >= 80 && score < 90) {
// console.log("良好");
// } else if (score >= 90 && score <= 100) {
// console.log("优秀");
// } else {
// console.log("分数有问题");
// }
// switch (score) {
// case 59:
// console.log("考试不及格");
// break;
// case 60:
// console.log("普通");
// break;
// case 61:
// console.log("普通");
// break;
// default:
// console.log("分数有问题");
// break;
// }
</script>
</html>

View File

@@ -0,0 +1,63 @@
<!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>js第一天</title>
<style>
</style>
<script>
// 你的注释 行注释 这里写你的js代码
/** 块注释 **/
// dqwdw
// qwdwqdwq
// 黄色 警告
// 红色 错误
// var abC = 200;
// const test = 200;
// // 打印
// console.log( (abC == test) == 0 )
// abC = 90;
// console.log(abC) // 90
// console.log(test)
// test = 1
// console.log(test);
var a = 1, b = 1, c = 3;
var f = null;
console.log(a===b); // a = a+b
// console.log(
// ( (c++) - (--b) + c ) - ( a-- ) + ( a+c+b ) + (c - 1) * (--c + a)
// );
// console.log(
// ( --a == (b++) - --a ) - ( c * ( b == a ) + c-- ) + ( a++ + c - b )
// );
// console.log(
// ( a + (--c) + c * b ) - (a++ + b - c) + ( a / c++ + b * true == b )
// );
</script>
</head>
<body>
</body>
</html>

View File

@@ -0,0 +1,65 @@
<!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>
</head>
<body>
</body>
<script>
// 1
// var obj = new Object();
// obj.name = "刘兵"
// obj.age = "18"
// obj.like = "汽车"
// console.log(obj);
// 2
// var obj = new Object({
// name: '刘兵',
// age: 18,
// like: '汽车'
// });
// console.log(obj);
// 3
var obj = {
name: '刘兵',
age: 18,
like: '汽车',
1111: "哈哈哈哈",
test: {
t1: 't1',
t2: 't2',
t3: 't3',
}
}
// console.log(obj.test.t1);
// console.log(obj["1111"]);
//
// js 以前是没有 面向对象的开发的
//
// 对象
var car = {
color: 'red',
speed: '4.4s',
weight: '1.8吨',
name: '领克',
start: function() {
console.log("汽车点火功能");
},
hud: function() {
console.log("汽车的抬头显示功能");
}
}
</script>
<!-- <script src="./object.js"></script> -->
</html>

View File

@@ -0,0 +1,311 @@
js (javascript)
作用:实现功能 & 交互的 (弱类型 & 强类型)
后面解释
不断发展 es5, es6es7....typescript
js 两个分支:
dom 用js 操作 网页htmlcss
bom 用 js 操作 浏览器(弹窗,打开关闭标签,前进后退)
js 语言的基础
1: 变量:在程序内部可变的存储数据的空间
6221xxxxxxxxx 100元
定义变量:
关键字(??)
varlet 变量名 = 变量的数值(可选);
变量名(常量)的命令规则:
1: 变量名必须字母开头
2: 不能使用特殊符号作为开头和中间的字符_ $
3: 变量名区分大小写
4: 变量命名尽量使用驼峰命名法
5: 变量命名一定要具有含义,一般使用英文翻过过来的单词,
不可以使用拼音或随手打的符号,不可以使用中文!!
简写:
var a = 1, b = 2, c = 3;
2: 常量: 在程序内部一旦被赋值后,就无法再被修改!
定义常量:
const 常量名 = 常量的数值(必须给默认数值);
类型:
就是变量里面能存储的数据种类
1 值类型(基本类型)
字符串String: 用双引号或者单引号包裹起来的
数字(Number): 0 ~ 9 的组合
布尔(Boolean)真1 true 或者 假0 false
Null 不存在就是 null
未定义Undefined 定义变量未赋值就是 undefined
2 引用数据类型(对象类型):对象(Object)、数组(Array)、
函数(Function)。
类型转换
运算符:
+ - * / %
++ 让变量自增 1
两种写法:
a++ 先使用变量a之后再+1
++a 先+1之后再使用变量a
-- 让变量自减 1
+= -= *= /- %=
= 赋值
== 判断是否相等
=== 判断数值和类型是否 都 相等
+
数学运算,条件 必须是数字
拼接字符串
es6 反引号 `我是字符串 ${变量}`
比较运算
==
===
!=
!==
> < >= <=
逻辑运算
|| 如果有一个多个为true则为true反之如果都为 false则为
false
&& 条件表达式两边都为 true才是 true登录
! 真假颠倒
Object对象 {}
1存储数据的一种方式
用什么格式存储数据:
对象名字key:对象数值value
2类似java中的class是一种编程的思想
1: 面向对象
后面讲解
封装
继承
多态性
里面包含了两种类型:属性(参数) & 方法(功能)
2: 面向过程
三种定义方式:
参考代码!!
Array 数组:
定义数组:
下标(数字0~无限):数值
// 控制(条件)语句,循环语句
控制(条件)语句
if (条件) {
// 符合 上面 条件,就运行这里写的代码
} else {
// 不符合 上面 条件,就运行这里的代码
}
三元(目)运算
2 < 10 ? console.log("小于10") : console.log("不小于10")
if () {
if () {
if () {
// kkk
}
}
}
n
if () {
} else if () {
} else if () {
} else {
}
switch (需要判断的变量) {
case 变量可能存在的值 1:
// 你的代码
break;
case 变量可能存在的值 2:
// 你的代码
break;
case 变量可能存在的值 3:
// 你的代码
break;
default:
// 上面所有情况都不满足的时候执行这个
break;
}
循环语句
for (循环起始变量;循环的结束条件;循环自增控制) {
}
do {
} while ()
while {
}
js function (函数,方法)
作用:实现代码的 封装 和 复用
怎么定义方法?
1 function 方法名(参数1,参数2,参数3....) {
}
2 var 变量名 = function () {
}
简写es6 里面更新的新的函数写法
var 变量名 = () => {
// 如果代码只有一行,花括号可以直接删除
}
参数: 必填参数,可选参数
默认值
参数的另外一种接受方式:
arguments array
适用于方法参数很多的情况,提高编写代码的销量
使用(调用)方法
方法名()
注意:先定义后使用
函数的返回值:
return 方法的运行结果
函数的作用域:
1全局
2局部
变量提升
闭包
什么是闭包?
函数内部的函数访问外部变量的过程
为什么需要闭包?
需要缓存数据
优点:可以缓存数据,避免重复计算,节省计算机内存资源
缺点: 如果存储的数据过多,而有未及时清理会导致内存泄漏
回调函数:
什么是回调函数?
为什么需要回调函数?
同步编程
异步编程
回调地狱
promise
事件:
由三个东西构成
事件源
事件类型
事件处理函数
三种方法连接:
虚拟dom
真实dom
影子dom

View File

@@ -0,0 +1,108 @@
<!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>js function</title>
</head>
<body>
</body>
<script>
// 大学室友帮你洗衣服的所有过程
// function GetName() {
// console.log(`张三收到了你的:${arguments[0]},还有洗衣服需要的钱:${arguments[1]}`);
// return "衣服洗完了,给你吧,收好衣服"
// }
// var result = GetName("脏衣服", 2)
// console.log("result: ", result);
// function js () {
// var res = 0
// for (var i = 0; i < arguments.length; i++) {
// res += arguments[i]
// }
// return res;
// }
// console.log( js(1,2,3,4) );
// var GetName = function (num1) {
// console.log("哈哈哈: ", num1)
// }
// var GetName = num1 => console.log("哈哈哈: ", num1)
// GetName("你好")
// 全局变量
// var a = 2;
// function test() {
// // 局部变量
// a = 1;
// }
// test();
// console.log(a);
// function js() {
// // 这个变量无法实现缓存上次的计算结果,在我们第二次调用的时候
// // 会无法实现累加
// var res = 0;
// function test() {
// for (var i = 0; i < arguments.length; i++) {
// res += arguments[i]
// }
// return res;
// }
// return test;
// }
// var sss = js()
// sss(1, 2)
// console.log( sss(3, 4) );
// console.log( eeee(5, 6) );
// var a = function () {
// console.log("a");
// }
// var c = a;
// function hello(callback) {
// var res = 10;
// setTimeout(() => {
// res = 20;
// callback(res)
// }, 3000)
// return res;
// }
// hello(function (tes) {
// console.log(tes);
// })
// function a(c) {
// c(10)
// }
// a( function(fff) {
// console.log(fff);
// } )
</script>
</html>

View File

@@ -0,0 +1,64 @@
<!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>事件</title>
</head>
<body>
<button onclick="test()">点我1</button>
<button class="btn2">点我2</button>
</body>
<script>
// var button = {
// tagName: 'button',
// className: 'btn2',
// idName: '',
// onClick: null,
// addEventListener: [ function(){}, function() {} ]
// innerText: '你好',
// children: [
// {
// tagName: 'span',
// className: '',
// idName: '',
// innerText: '点我2',
// }
// ]
// }
// document dom
// var button = document.querySelector(".btn2")
// button.onclick = function () {
// alert("你好1")
// }
// button.onclick = function () {
// alert("你好2")
// }
// button.onclick = function () {
// alert("你好3")
// }
// button.addEventListener("click", function() {
// alert(1)
// })
// button.addEventListener("click", function() {
// alert(2)
// })
// button.innerText = "哈哈哈哈哈"
// button.className = "btnhaahah"
// function test() {
// alert("你好")
// }
</script>
</html>

View File

@@ -0,0 +1,54 @@
class Http {
constructor() {
this.xhr = new XMLHttpRequest();
}
/**
* url : 请求地址
*/
get(params) {
var par = ""
for (const key in params.data) {
par += `&${key}=${params.data[key]}`
}
par = par.replace("&", "?")
this.xhr.open("GET", `${params.url}${par}`)
this.xhr.send()
this.ReadyState(params)
}
post(params) {
this.xhr.open("POST", `${params.url}`)
// POST 一般发送两种格式的数据
// 表单类型 FormData 数据格式 name=value&name=value
// json数据类型 数据格式就是 JSON.stringify() 后的字符串对象
// json 用的多
// var par = ""
// for (const key in params.data) {
// par += `&${key}=${params.data[key]}`
// }
// par = par.replace("&", "")
this.xhr.setRequestHeader('Content-Type', 'application/json');
this.xhr.send(JSON.stringify(params.data))
this.ReadyState(params)
}
ReadyState(params) {
this.xhr.onreadystatechange = () => {
if (this.xhr.readyState == 4) {
if (this.xhr.status == 200) {
var data = JSON.parse(this.xhr.response);
params.success(data)
} else {
params.error(this.xhr)
}
}
}
}
}
var http = new Http();

View File

@@ -0,0 +1,58 @@
class Http {
constructor() {
this.xhr = new XMLHttpRequest();
}
/**
* url : 请求地址
*/
get(params) {
return new Promise((success, error) => {
var par = ""
for (const key in params.data) {
par += `&${key}=${params.data[key]}`
}
par = par.replace("&", "?")
this.xhr.open("GET", `${params.url}${par}`)
this.xhr.send()
this.ReadyState(success, error)
})
}
post(params) {
return new Promise((success, error) => {
this.xhr.open("POST", `${params.url}`)
// POST 一般发送两种格式的数据
// 表单类型 FormData 数据格式 name=value&name=value
// json数据类型 数据格式就是 JSON.stringify() 后的字符串对象
// json 用的多
// var par = ""
// for (const key in params.data) {
// par += `&${key}=${params.data[key]}`
// }
// par = par.replace("&", "")
this.xhr.setRequestHeader('Content-Type', 'application/json');
this.xhr.send(JSON.stringify(params.data))
this.ReadyState(success, error)
})
}
ReadyState(success, error) {
this.xhr.onreadystatechange = () => {
if (this.xhr.readyState == 4) {
if (this.xhr.status == 200) {
var data = JSON.parse(this.xhr.response);
success(data)
} else {
error(this.xhr)
}
}
}
}
}
var http = new Http();

View File

@@ -0,0 +1,90 @@
<!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>ajax封装</title>
<script src="./ajaxV2.js"></script>
</head>
<body>
</body>
<script>
// callback 回调函数
// 解决:获取异步代码返回值
// 问题:回调地狱
// http.post({
// url: 'http://127.0.0.1:3000/api/json/test_post',
// data: {
// id: 82,
// page: 1
// },
// success: (res) => {
// console.log(res);
// },
// error: (err) => {
// console.log("请求失败:",err);
// },
// })
// promise
// 主要获取异步编程返回值,避免和解决了回调函数的问题
// 让我们可以用同步的方式来编写异步代码
// 三种状态:
// 进行中 成功 失败
// 两种写法
// then catch 导致回调地狱
// async await 强制把异步转化为同步来执行
// promise 是异步还是同步?
// 1 promise 里面放的是异步代码
// 2 promise 里面的异步代码会被同步执行
// 3 then catch 是异步执行的
// 4 async await 同步执行
// http.get({
// url: 'http://127.0.0.1:3000/api/json/mechanismList',
// data: {
var getdata = async () => {
var result = await http.get({
url: 'http://127.0.0.1:3000/api/json/mechanismList',
data: { id: 82, page: 1 }
})
console.log(result);
}
getdata()
// async await
// a().b().c()
// 链式调用
// class a {
// test = 0;
// a1(){
// this.test = 1;
// return this;
// }
// a2(){
// this.test = 2
// return this;
// }
// a3(){
// this.test = 3
// }
// }
// var c = new a()
// c.a1().a2().a3()
// console.log(c.test);
</script>
</html>

View File

@@ -0,0 +1,89 @@
<!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>
</head>
<body>
<ul>
</ul>
</body>
<script>
// 1 拿出电话, 创建一个 ajax 类实例
var xhr = new XMLHttpRequest();
// 2 设置拨号的号码 设置请求方式和请求的地址
xhr.open("GET", "http://127.0.0.1/index.php")
// 3 拨打电话 发送请求
xhr.send()
// 4 10086 的语音提示 状态监听
xhr.onreadystatechange = () => {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var data = JSON.parse(xhr.response);
console.log(data);
// console.log(data.result.list);
// data.result.list.forEach(v => {
// document.querySelector("ul").innerHTML += `
// <li>
// <div class="title">${v.title}</div>
// <img src="${v.img_src}" alt="">
// </li>
// `
// });
} else {
alert("当前网络不佳,请稍后再试!")
}
}
}
var a = {
id: 1,
name: '张三',
age: 18
}
var c = JSON.stringify(a)
console.log(c);
// console.log(window);
// xml -> json txt
// json 就是数组和对象的各种组合
// JSON.stringify 把对象或者数组转 string
// JSON.parse 把string 格式的对象,数组,转为对象数组
// var userLogin = {
// userName: '',
// userPwd: ''
// }
// var result = {
// status: 200,
// data: 'error'
// }
// var data = {
// title: '你好',
// newsArray: [
// { item: '新闻1' },
// { item: '新闻2' },
// { item: '新闻3' },
// ]
// }
</script>
</html>

View File

@@ -0,0 +1,71 @@
<!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>
<style>
img {
width: 100px;
}
</style>
</head>
<body>
<div class="img">
</div>
</body>
<script>
function getData() {
var xhr = new XMLHttpRequest();
xhr.open("GET", `http://127.0.0.1:3000/api/json/info?id=${query("id")}&quantity=${query("sl")}`)
xhr.send()
xhr.onreadystatechange = () => {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var data = JSON.parse(xhr.response);
rendList(data)
} else {
alert("当前网络不佳,请稍后再试!")
}
}
}
}
function rendList(list) {
console.log("详情:", list);
list.result.forEach(v => {
$(".img").innerHTML += `
<img src="${v}" alt="">
`
});
}
getData()
function query(name) {
let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
let r = window.location.search.substr(1).match(reg);
if (r != null) {
return unescape(r[2]);
};
return null;
}
function $(className) {
return document.querySelector(className)
}
function _(className) {
return document.querySelectorAll(className)
}
</script>
</html>

View File

@@ -0,0 +1,18 @@
<!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>
</head>
<body>
</body>
<script>
function getData(val) {
console.log("数据为:", val);
}
</script>
<script src="http://127.0.0.1/index.php?cb=getData"></script>
</html>

View File

@@ -0,0 +1,73 @@
<!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>
</head>
<body>
<ul>
</ul>
<button>下一页</button>
</body>
<script>
var page = 1;
function getData() {
var xhr = new XMLHttpRequest();
xhr.open("GET", `http://127.0.0.1:3000/api/json/mechanismList?id=82&page=${page}`)
xhr.send()
xhr.onreadystatechange = () => {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var data = JSON.parse(xhr.response);
rendList(data)
} else {
alert("当前网络不佳,请稍后再试!")
}
}
}
}
function rendList(list) {
console.log(list.result.data);
list.result.data.forEach(v => {
$("ul").innerHTML += `
<li>
<a href="./info.html?id=${v.id}&sl=${v.total}">
<div class="title">${v.title}</div>
<img src="${v.preview}" alt="">
</a>
</li>
`;
});
}
$("button").onclick = () => {
page += 1;
getData()
}
function $(className) {
return document.querySelector(className)
}
function _(className) {
return document.querySelectorAll(className)
}
getData()
</script>
</html>

View File

@@ -0,0 +1,88 @@
ajaxXML Http Request
理解:是前后端数据交互的一种沟通方式(打电话)
官方:网页无刷新的一种数据交互方式
web网站开发模式
1服务端渲染
前端10% ~ 30% 主要就是用htmlcss写页面三四千
后端90% ~ 70%
缺点:
1开发速度慢效率不平衡
2代码冗余屎山
2前后端分离
前端50% ~ 60% htmlcss写页面需要用js实现各种复杂功能和特效交互
|
沟通? ajax
|
后端50% ~ 40% 写代码后端代码,数据库,维护服务器,做安全
HTTP:
前后端数据通讯的方式
包含:
请求方式
GET 要数据的过程
http://www.1.com?name=刘兵&pwd=1234
POST 给数据的过程
PUT 更新数据的过程
DELETE 删除数据的过程
GET 和 POST 有什么差别??
https://www.oschina.net/news/77354/http-get-post-different#:~:text=%E6%9C%80%E7%9B%B4%E8%A7%82%E7%9A%84%E5%8C%BA%E5%88%AB%E5%B0%B1%E6%98%AFGET%E6%8A%8A%E5%8F%82%E6%95%B0%E5%8C%85%E5%90%AB%E5%9C%A8URL%E4%B8%AD%EF%BC%8CPOST%E9%80%9A%E8%BF%87request%20body%E4%BC%A0%E9%80%92%E5%8F%82%E6%95%B0%E3%80%82%20...,GET%E8%AF%B7%E6%B1%82%E4%BC%9A%E8%A2%AB%E6%B5%8F%E8%A7%88%E5%99%A8%E4%B8%BB%E5%8A%A8cache%EF%BC%8C%E8%80%8CPOST%E4%B8%8D%E4%BC%9A%EF%BC%8C%E9%99%A4%E9%9D%9E%E6%89%8B%E5%8A%A8%E8%AE%BE%E7%BD%AE%E3%80%82%20GET%E8%AF%B7%E6%B1%82%E5%8F%AA%E8%83%BD%E8%BF%9B%E8%A1%8Curl%E7%BC%96%E7%A0%81%EF%BC%8C%E8%80%8CPOST%E6%94%AF%E6%8C%81%E5%A4%9A%E7%A7%8D%E7%BC%96%E7%A0%81%E6%96%B9%E5%BC%8F%E3%80%82%20GET%E8%AF%B7%E6%B1%82%E5%8F%82%E6%95%B0%E4%BC%9A%E8%A2%AB%E5%AE%8C%E6%95%B4%E4%BF%9D%E7%95%99%E5%9C%A8%E6%B5%8F%E8%A7%88%E5%99%A8%E5%8E%86%E5%8F%B2%E8%AE%B0%E5%BD%95%E9%87%8C%EF%BC%8C%E8%80%8CPOST%E4%B8%AD%E7%9A%84%E5%8F%82%E6%95%B0%E4%B8%8D%E4%BC%9A%E8%A2%AB%E4%BF%9D%E7%95%99%E3%80%822016%E5%B9%B49%E6%9C%8822%E6%97%A5
请求状态 200 404
请求头(请求体) request
响应头(响应体) response
ajax 跨域CORS
偷偷请求别人家的数据接口
判断标准(同源策略):
1协议
2域名
3端口
http 协议默认端口80
https 443
前端http://www.abc.com
|
浏览器
|
后端http://127.0.0.1:3000/index
解决跨域
1cors
2jsonp
把ajax请求伪装成 js 文件请求 (请求)
回调函数的方式,拿回数据(响应)
3服务端代理
A(前端) ----> B后端
A(前端 我的) ---> C后端 (我的)
C后端我的 ---> B后端别人的

View File

@@ -0,0 +1,3 @@
module.exports = {
url: '哈哈哈哈'
}

View File

@@ -0,0 +1,12 @@
<!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>服务端渲染的网站</title>
</head>
<body>
<h2>服务端渲染的网站</h2>
</body>
</html>

View File

@@ -0,0 +1,32 @@
// var fs = require("fs");
// var http = require("axios");
// var { test } = require("./utils")
// test()
// http.get('https://www.cnblogs.com/yominhi/p/7039795.html')
// .then(function (response) {
// console.log(response.data);
// })
// .catch(function (error) {
// console.log(error);
// })
// var data = fs.readFileSync("./笔记.txt");
// console.log(data.toString());
const http = require('http');
const fs = require("fs");
// Create a local server to receive data from
const server = http.createServer((req, res) => {
res.writeHead(200, { 'Content-Type': 'text/html; charset=UTF-8' });
var data = fs.readFileSync("./index.html");
res.end(data.toString());
});
server.listen(8080);

View File

@@ -0,0 +1,69 @@
{
"name": "2023-03-20",
"version": "1.0.1",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
"asynckit": {
"version": "0.4.0",
"resolved": "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz",
"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
},
"axios": {
"version": "1.3.4",
"resolved": "https://registry.npmmirror.com/axios/-/axios-1.3.4.tgz",
"integrity": "sha512-toYm+Bsyl6VC5wSkfkbbNB6ROv7KY93PEBBL6xyDczaIHasAiv4wPqQ/c4RjoQzipxRD2W5g21cOqQulZ7rHwQ==",
"requires": {
"follow-redirects": "^1.15.0",
"form-data": "^4.0.0",
"proxy-from-env": "^1.1.0"
}
},
"combined-stream": {
"version": "1.0.8",
"resolved": "https://registry.npmmirror.com/combined-stream/-/combined-stream-1.0.8.tgz",
"integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
"requires": {
"delayed-stream": "~1.0.0"
}
},
"delayed-stream": {
"version": "1.0.0",
"resolved": "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz",
"integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ=="
},
"follow-redirects": {
"version": "1.15.2",
"resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.2.tgz",
"integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA=="
},
"form-data": {
"version": "4.0.0",
"resolved": "https://registry.npmmirror.com/form-data/-/form-data-4.0.0.tgz",
"integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
"requires": {
"asynckit": "^0.4.0",
"combined-stream": "^1.0.8",
"mime-types": "^2.1.12"
}
},
"mime-db": {
"version": "1.52.0",
"resolved": "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz",
"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg=="
},
"mime-types": {
"version": "2.1.35",
"resolved": "https://registry.npmmirror.com/mime-types/-/mime-types-2.1.35.tgz",
"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
"requires": {
"mime-db": "1.52.0"
}
},
"proxy-from-env": {
"version": "1.1.0",
"resolved": "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
}
}
}

View File

@@ -0,0 +1,14 @@
{
"name": "2023-03-20",
"version": "1.0.1",
"description": "nodejs第一天学习",
"main": "index.js",
"scripts": {
"start": "node-dev index.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"axios": "^1.3.4"
}
}

View File

@@ -0,0 +1,9 @@
var config = require("./config")
class Utils {
test() {
console.log("工具函数test", config.url);
}
}
module.exports = new Utils()

View File

@@ -0,0 +1,69 @@
nodejs
是JavaScript在 服务器 端的一个 运行环境
作用:
js 就会 成为 后端编程语言
js可以开发桌面端应用
php
java
c#(asp.net)
python
go
c++
js 必须 依赖浏览器才能运行
nodejs 实现核心:
v8 内核js引擎
c++ (实现 js 控制操作系统)
能操作数据库mysql能提供接口
自带 npm (包[插件]管理工具) 全球最大的插件市场
npm init 初始化一个nodejs新项目
cnpm install(i) 插件名 插件安装的环境
cnpm i 根据package.json 里面 的 devDependencies 和 dependencies进行
安装依赖
安装的环境
dev devDependencies 开发阶段 --save-dev -D
dep dependencies 正式阶段 --save -S
全局安装 -g
npm uninstall 插件名
npm update 插件名
npm run 你的启动命令
nodejs 做项目的时候:
package.json
保存项目的一些基本信息(例如 项目名,版本号,作者,启动命令,依赖信息 这些)
插件:
系统提供
你下载
dns 解析服务器
网络上的dns
本地的dns

View File

@@ -0,0 +1,113 @@
<!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>component</title>
</head>
<body>
<div class="app">
<v_header :t="header_title" @change="getChildren"></v_header>
<div class="content">
<swiper></swiper>
这是vue组件
</div>
<v_footer>
<template v-slot:back>
<h3 >哈哈哈</h3>
</template>
<template v-slot:icon>
<a href="">测试</a>
</template>
</v_footer>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
var swiper = {
template: `
<div class="swiper">
公共轮播图
</div>
`,
data() {
return {}
},
methods: {
}
}
// 为什么组件内部的data必须是一个方法
// 组件名称 即 标签名
// 注意组件名不能和html的标签名一样
Vue.component('v_header', {
template: `
<div class="header">
<h1 @click="test">我是公共头部: {{ t }}</h1>
</div>
`,
// props: ["t"],
props: {
t: {
default: '默认数值',
type: String
}
},
data() {
return {
text: '子组件给父组件的数据'
}
},
methods: {
test() {
console.log("头部被点击");
this.$emit('change', this.text)
}
},
components: {
// swiper: swiperComponent
swiper
}
});
Vue.component('v_footer', {
template: `
<div class="footer">
<slot name="back"></slot>
<h1>{{ text }}</h1>
<slot name="icon"></slot>
</div>
`,
data() {
return {
text: '我是公共底部'
}
},
methods: {}
});
new Vue({
el: '.app',
data: {
header_title: '父组件传给子组件的标题'
},
methods: {
getChildren(res) {
console.log(res);
}
},
components: {
// swiper: swiperComponent
swiper
}
})
</script>
</html>

View File

@@ -0,0 +1,129 @@
<!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>vue.js</title>
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div class="app" v-cloak>
<h1 ref="fff">测试 {{ demos }}</h1>
<h2> {{ message }} </h2>
<a :href="aParams.href"> {{ aParams.title }} </a>
<ul>
<li v-for="v,i in newsList" :key="i" v-text="v.content">
</li>
</ul>
<div v-show="isVip"> 广告 </div>
<div v-if="vip == 0">普通</div>
<div v-else-if="vip == 1">会员</div>
<div v-else>超级会员</div>
<input v-model="userName" type="text" placeholder="输入用户名">
<input v-model="userPwd" type="password" placeholder="输入密码">
<div @click="Login">
<div class="test" @click.stop.right="test">登录</div>
</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
// data 是用来存放变量
// el
// 指令vue自定义标签属性全局
// v-bind: 简写 :
// v-for
// 注意循环需要加key来标注 唯一性
// v-show 结果为true显示为false因此
// v-if
// 区别v-show不符合条件不会删除元素只是对元素进行 display none
// v-if 把不符合条件的元素直接删除
// v-html v-text
// v-model 只能用户输入框input textarea section
// v-on 简写 @
// created ajax 请求
// mounted 用来获取或者操作网页元素的
// computed 会进行计算缓存
var vm = new Vue({
el: '.app',
beforeCreate() {
console.log("beforeCreate: ", this.message);
},
created() {
console.log("created: ", this.message);
console.log("created: ", this.$refs.fff);
},
mounted() {
console.log("mounted: ", this.message);
console.log("created: ", this.$refs.fff);
},
beforeUpdate() {
console.log("beforeUpdate");
},
updated() {
console.log("updated");
},
destroyed() {
alert("destroyed")
},
data: {
message: '我的第一个vue程序',
vip: 0, // 0普通 1会员 2超级会员
isVip: false,
userPwd: '',
userName: '',
aParams: {
title: '点击我',
href: 'https://www.baidu.com/'
},
newsList: [
{ id: 1, title: '新闻1', content: '<h2>你好1</h2>' },
{ id: 2, title: '新闻3', content: '<h2>你好2</h2>' },
{ id: 3, title: '新闻4', content: '<h2>你好3</h2>' }
]
},
watch: {
// aParams() {},
aParams: {
handler(newVal, oldVal) {
console.log(newVal, oldVal);
},
deep: true
}
},
methods: {
Login() {
console.log("登录");
// console.log("用户登录:", this.userPwd, this.userName);
},
test() {
console.log("test");
}
},
computed: {
demos() {
return 1 + 2
}
}
})
</script>
</html>

View File

@@ -0,0 +1,84 @@
<!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>
</head>
<body>
<div class="app">
<swiper :arr="swiper" @change="goInfo">
<template v-slot:default="{ item }">
<img :src="item.img" alt="">
</template>
</swiper>
<h2>父组件</h2>
<swiper :arr="swiper" @change="fangda">
<template v-slot:default="{ item }">
<p>{{ item.id }}</p>
</template>
</swiper>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
var swiper = {
template: `
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="item,index in arr" @click="typeClick(item,index)">
<slot :item="item"></slot>
</div>
</div>
</div>
`,
props: {
arr: {
default: () => [],
type: Array
}
},
data() {
return {}
},
methods: {
typeClick(item,index) {
item.index = index;
this.$emit("change", item)
}
}
}
new Vue({
el: '.app',
data: {
swiper: [
{ id: 1, img: 'https://img.alicdn.com/imgextra/i4/6000000000247/O1CN016OonHt1DhAeHc2POy_!!6000000000247-2-octopus.png' },
{ id: 2, img: 'https://img.alicdn.com/imgextra/i4/6000000004607/O1CN01iyHGBo1ju3Ueo5MZr_!!6000000004607-0-octopus.jpg' },
{ id: 3, img: 'https://img.alicdn.com/imgextra/i1/6000000002571/O1CN011s3nON1UrZ6i7EyPo_!!6000000002571-0-octopus.jpg' },
]
},
methods: {
goInfo(res) {
console.log("进详情:",res);
},
fangda(res) {
console.log("放大:",res);
}
},
components: {
// swiper: swiperComponent
swiper
}
})
</script>
</html>

View File

@@ -0,0 +1,86 @@
<!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>tabs切换</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.title {
display: flex;
}
.title li {
margin-right: 20px;
}
.title .active {
color: red;
}
.content li {
display: none;
}
.content .active {
display: block;
}
</style>
</head>
<body>
<div class="app">
<ul class="title">
<li v-for="v,i in tabList"
:class=" i == index ? 'active' : '' "
@click=" index = i "
>{{ v.title }}</li>
</ul>
<ul class="content">
<li v-for="v,i in tabList" :class="i == index ? 'active' : '' ">{{ v.content }}</li>
</ul>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
new Vue({
el: '.app',
data: {
index: 0,
tabList: [
{
title: '社会',
content: "社会 的内容"
},
{
title: '体育',
content: "体育 的内容"
},
{
title: '军事',
content: "军事 的内容"
},
{
title: '科技',
content: "科技 的内容"
},
]
},
methods: {
// changeActive(index) {
// this.index = index
// }
}
})
</script>
</html>

View File

@@ -0,0 +1,131 @@
<!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>tabs切换</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.title {
display: flex;
}
.title li {
margin-right: 20px;
}
.title .active {
color: red;
}
.content li {
display: none;
}
.content .active {
display: block;
}
</style>
</head>
<body>
<div class="app">
<ul class="title">
<li v-for="v,i in tabList"
:class=" i == index ? 'active' : '' "
@click=" index = i "
>{{ v.title }}</li>
</ul>
<ul class="content">
<li v-for="v,i in tabList" :class="i == index ? 'active' : '' ">
<p v-for="val,idx in v.content">{{ val.title }}</p>
</li>
</ul>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
new Vue({
el: '.app',
data: {
index: 0,
tabList: [
{
title: '社会',
content: [
{
title: '社会新闻1',
time: '2023',
text: '主体内容部分'
},
]
},
{
title: '娱乐',
content: [
{
title: '娱乐新闻1',
time: '2023',
text: '主体内容部分'
},
{
title: '娱乐新闻2',
time: '2023',
text: '主体内容部分'
},
]
},
{
title: '体育',
content: [
{
title: '体育新闻1',
time: '2023',
text: '主体内容部分'
}
]
},
{
title: '军事',
content: [
{
title: '军事新闻1',
time: '2023',
text: '主体内容部分'
},
{
title: '军事新闻2',
time: '2023',
text: '主体内容部分'
},
{
title: '军事新闻3',
time: '2023',
text: '主体内容部分'
},
]
},
{
title: '科技',
content: [
{
title: '科技新闻1',
time: '2023',
text: '主体内容部分'
}
]
},
]
}
})
</script>
</html>

View File

@@ -0,0 +1,183 @@
<!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>VueRouter</title>
<style>
.router-link-exact-active {
color: red;
}
.slide-fade-enter-active {
transition: all .3s ease;
}
.slide-fade-leave-active {
transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter,
.slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */
{
transform: translateX(10px);
opacity: 0;
}
</style>
</head>
<body>
<div id="app">
<h1>Hello App!</h1>
<p>
<router-link to="/">首页</router-link>
<router-link to="/car">购物车</router-link>
<router-link to="/my">我的</router-link>
</p>
<transition name="slide-fade">
<router-view></router-view>
</transition>
</div>
</body>
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3/dist/vue-router.js"></script>
<script>
const Home = {
template: `
<div class="home">
<ul>
<li v-for="item,index in newList"
@click="enterInfo(item.id)"
:key="index">
{{ item.title }}
</li>
</ul>
</div>
`,
data() {
return {
newList: [
{ id: 1, title: '新闻1' },
{ id: 2, title: '新闻2' },
{ id: 3, title: '新闻3' },
]
}
},
methods: {
enterInfo(id) {
this.$router.push({
name: 'info',
query: { page: 2, id: id }
})
}
}
}
const Info = {
template: `
<div class="info">详情</div>
`,
data() {
return {
id: null
}
},
created() {
this.id = this.$route.query.id
this.getData();
},
methods: {
async getData() {
console.log("使用参数:", this.id, " 发送ajax请求获取数据");
}
}
}
const My = {
template: `
<div class="my">我的</div>
`
}
const Car = {
template: `
<div class="car">购物车</div>
`
}
const Login = {
template: `
<div class="login" @click="login">
登录页面
</div>
`,
methods: {
async login() {
localStorage.setItem("token", "wjdhfbiwebv")
if (this.$route.query.hasOwnProperty("source")) {
this.$router.replace({ path: this.$route.query.source })
} else {
this.$router.replace({ path: "/" })
}
}
}
}
// my
const routes = [
{ path: '/', name: 'home', component: Home, meta: { isLogin: false } },
{ path: '/info', name: 'info', component: Info, meta: { isLogin: false } },
{ path: '/my', name: 'my', component: My, meta: { isLogin: true } },
{ path: '/car', name: 'car', component: Car, meta: { isLogin: true } },
{
path: '/login', name: 'login', component: Login, meta: { isLogin: false },
beforeEnter: (to, from, next) => {
console.log(to);
if (localStorage.getItem("token") != null) {
router.back()
} else {
next()
}
}
},
]
const router = new VueRouter({
// mode: 'history',
routes
});
router.beforeEach((to, from, next) => {
if (to.meta.isLogin) {
if (localStorage.getItem("token") != null) {
next()
} else {
next({
path: '/login',
query: {
source: to.fullPath
}
})
}
} else {
next()
}
})
const app = new Vue({
el: '#app',
router
})
</script>
</html>

View File

@@ -0,0 +1,97 @@
<!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>VueRouter</title>
</head>
<body>
<div id="app">
<h1>Hello App!</h1>
<p>
<router-link to="/">首页</router-link>
<router-link to="/my">我的</router-link>
</p>
<router-view></router-view>
</div>
</body>
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3/dist/vue-router.js"></script>
<script>
const Home = {
template: `
<div class="home">
<ul>
<router-link
tag="li"
v-for="item,index in newList"
:key="index"
:to="{ path: '/info', query: { id: item.id } }">
{{ item.title }}
</router-link>
</ul>
</div>
`,
data() {
return {
newList: [
{ id: 1, title: '新闻1' },
{ id: 2, title: '新闻2' },
{ id: 3, title: '新闻3' },
]
}
},
}
const Info = {
template: `
<div class="info">详情</div>
`,
data() {
return {
id: null
}
},
created() {
this.id = this.$route.query.id
this.getData();
},
methods: {
async getData() {
console.log("使用参数:",this.id," 发送ajax请求获取数据");
}
}
}
const My = {
template: `
<div class="my">我的</div>
`
}
const routes = [
{ path: '/', component: Home },
{ path: '/info', component: Info },
{ path: '/my', component: My },
]
const router = new VueRouter({
routes
})
const app = new Vue({
el: '#app',
router
})
</script>
</html>

View File

@@ -0,0 +1,61 @@
<!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>混入</title>
</head>
<body>
<div class="app">
<input type="text" autofocus="true" placeholder="输入账户名">
<button @click="load">加载更多</button>
<p>{{text | slh}}</p>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
var loadMore = {
data() {
return {
page: 0,
totalPage: 0
}
},
methods: {
load() {
console.log("加载更多...");
}
}
}
Vue.directive('focus', {
inserted: function (el) {
el.focus()
}
})
new Vue({
el: '.app',
mixins: [loadMore],
data: {
text: '你好这是测试的文字,哈哈哈'
},
created() {
console.log(this.page);
},
methods: {
},
filters: {
slh(val) {
return val.substring(0,4) + '...'
}
}
})
</script>
</html>

View File

@@ -0,0 +1,161 @@
mmodel 数据vview 页面ccontroller 控制器
vue
原生js阶段
jquery 对原生js进行二次封装
nodejs
mmodel 数据vview 页面) vm view and model
angular
react
vue
使用js链接
基于nodejs来使用
vue 1.x
vue 2.x 全球 60% ~ 70%
option api 选项式api
typescript
class api (类 api
vue 3.x 30% ~ 40%
composition api组合式api (function api)
vue 4.x 网传筹备
核心:
组件系统
数据双向绑定,响应式(数据)
生命周期
计算属性
侦听器
https://v2.cn.vuejs.org/v2/guide/class-and-style.html
组件
什么叫组件?
把公共,或者通用的布局拆分成独立的文件,提高页面的复用率
全局组件
局部组件
父组件 向 子组件 传递数据
props
子组件 向 父组件 传递数据
$emit
动态组件
插槽
别名插槽
作用域插槽
干什么用的?
混入
自定义指令
过滤器
指令
生命周期
组件全部
vue-cli
vuex
vue-router
4.x 和 vue3.x 版本组合的
3.x 和 vue2.x 版本组合的
路由:访问网址,页面跳转 的综合(很多功能)插件
原生js阶段a 或者js
解决a标签的问题使用ajax请求页面的代码然后innerHTML到当前页面上并完全遮住上一个页面
传参:
query
www.baidu.com?id=1&page=3
:to="{ path (name): '/info', query: { id: item.id } }"
this.$route.query.xxx
params
www.baidu.com/1/3
:to="{ name: 'info', params: { page: 2, id: item.id } }"
{ path: '/info/:id/:page', name: 'info', component: Info },
this.$route.params.xxx
注意:
this.$route 是获取地址,参数这些东西
this.$router 是获取 new VueRouter 实例的
vue-router 实现原理
hash#
www.baidu.com#/info?id=2
www.baidu.com#/my
file:///C:/Users/bmy/Desktop/fontend10/每天课程/2023-03-21/vueRouter.html#/car
http://127.0.0.1:5500/每天课程/2023-03-21/vueRouter.html
http://127.0.0.1:5500/car
file:///C:/Users/bmy/Desktop/fontend10/my
http://127.0.0.1:5500 ---> file:///C:/Users/bmy/Desktop/fontend10/每天课程/2023-03-21/vueRouter.html
history
www.baidu.com/car
www.baidu.com/info?id=2
file:///C/car
导航守卫:
全局守卫
前置
后置
路由独享的守卫
组件内的守卫
todo 路由懒加载

View File

@@ -0,0 +1,12 @@
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-2"
],
"plugins": ["transform-vue-jsx", "transform-runtime"]
}

View File

@@ -0,0 +1,9 @@
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

View File

@@ -0,0 +1,4 @@
/build/
/config/
/dist/
/*.js

View File

@@ -0,0 +1,29 @@
// https://eslint.org/docs/user-guide/configuring
module.exports = {
root: true,
parserOptions: {
parser: 'babel-eslint'
},
env: {
browser: true,
},
extends: [
// https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
// consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
'plugin:vue/essential',
// https://github.com/standard/standard/blob/master/docs/RULES-en.md
'standard'
],
// required to lint *.vue files
plugins: [
'vue'
],
// add your custom rules here
rules: {
// allow async-await
'generator-star-spacing': 'off',
// allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
}
}

View File

@@ -0,0 +1,14 @@
.DS_Store
node_modules/
/dist/
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln

View File

@@ -0,0 +1,14 @@
// https://github.com/michael-ciniawsky/postcss-load-config
module.exports = {
"plugins": {
"postcss-import": {},
"postcss-url": {},
// to edit target browsers: use "browserslist" field in package.json
"autoprefixer": {},
'postcss-pxtorem': {
rootValue: 37.5,
propList: ['*']
}
}
}

View File

@@ -0,0 +1,21 @@
# vuecli2x
> A Vue.js project
## Build Setup
``` bash
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# build for production and view the bundle analyzer report
npm run build --report
```
For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).

View File

@@ -0,0 +1,41 @@
'use strict'
require('./check-versions')()
process.env.NODE_ENV = 'production'
const ora = require('ora')
const rm = require('rimraf')
const path = require('path')
const chalk = require('chalk')
const webpack = require('webpack')
const config = require('../config')
const webpackConfig = require('./webpack.prod.conf')
const spinner = ora('building for production...')
spinner.start()
rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
if (err) throw err
webpack(webpackConfig, (err, stats) => {
spinner.stop()
if (err) throw err
process.stdout.write(stats.toString({
colors: true,
modules: false,
children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build.
chunks: false,
chunkModules: false
}) + '\n\n')
if (stats.hasErrors()) {
console.log(chalk.red(' Build failed with errors.\n'))
process.exit(1)
}
console.log(chalk.cyan(' Build complete.\n'))
console.log(chalk.yellow(
' Tip: built files are meant to be served over an HTTP server.\n' +
' Opening index.html over file:// won\'t work.\n'
))
})
})

View File

@@ -0,0 +1,54 @@
'use strict'
const chalk = require('chalk')
const semver = require('semver')
const packageConfig = require('../package.json')
const shell = require('shelljs')
function exec (cmd) {
return require('child_process').execSync(cmd).toString().trim()
}
const versionRequirements = [
{
name: 'node',
currentVersion: semver.clean(process.version),
versionRequirement: packageConfig.engines.node
}
]
if (shell.which('npm')) {
versionRequirements.push({
name: 'npm',
currentVersion: exec('npm --version'),
versionRequirement: packageConfig.engines.npm
})
}
module.exports = function () {
const warnings = []
for (let i = 0; i < versionRequirements.length; i++) {
const mod = versionRequirements[i]
if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
warnings.push(mod.name + ': ' +
chalk.red(mod.currentVersion) + ' should be ' +
chalk.green(mod.versionRequirement)
)
}
}
if (warnings.length) {
console.log('')
console.log(chalk.yellow('To use this template, you must update following to modules:'))
console.log()
for (let i = 0; i < warnings.length; i++) {
const warning = warnings[i]
console.log(' ' + warning)
}
console.log()
process.exit(1)
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.7 KiB

View File

@@ -0,0 +1,101 @@
'use strict'
const path = require('path')
const config = require('../config')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const packageConfig = require('../package.json')
exports.assetsPath = function (_path) {
const assetsSubDirectory = process.env.NODE_ENV === 'production'
? config.build.assetsSubDirectory
: config.dev.assetsSubDirectory
return path.posix.join(assetsSubDirectory, _path)
}
exports.cssLoaders = function (options) {
options = options || {}
const cssLoader = {
loader: 'css-loader',
options: {
sourceMap: options.sourceMap
}
}
const postcssLoader = {
loader: 'postcss-loader',
options: {
sourceMap: options.sourceMap
}
}
// generate loader string to be used with extract text plugin
function generateLoaders (loader, loaderOptions) {
const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}
// https://vue-loader.vuejs.org/en/configurations/extract-css.html
return {
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders('less'),
sass: generateLoaders('sass', { indentedSyntax: true }),
scss: generateLoaders('sass'),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
}
}
// Generate loaders for standalone style files (outside of .vue)
exports.styleLoaders = function (options) {
const output = []
const loaders = exports.cssLoaders(options)
for (const extension in loaders) {
const loader = loaders[extension]
output.push({
test: new RegExp('\\.' + extension + '$'),
use: loader
})
}
return output
}
exports.createNotifierCallback = () => {
const notifier = require('node-notifier')
return (severity, errors) => {
if (severity !== 'error') return
const error = errors[0]
const filename = error.file && error.file.split('!').pop()
notifier.notify({
title: packageConfig.name,
message: severity + ': ' + error.name,
subtitle: filename || '',
icon: path.join(__dirname, 'logo.png')
})
}
}

View File

@@ -0,0 +1,22 @@
'use strict'
const utils = require('./utils')
const config = require('../config')
const isProduction = process.env.NODE_ENV === 'production'
const sourceMapEnabled = isProduction
? config.build.productionSourceMap
: config.dev.cssSourceMap
module.exports = {
loaders: utils.cssLoaders({
sourceMap: sourceMapEnabled,
extract: isProduction
}),
cssSourceMap: sourceMapEnabled,
cacheBusting: config.dev.cacheBusting,
transformToRequire: {
video: ['src', 'poster'],
source: 'src',
img: 'src',
image: 'xlink:href'
}
}

View File

@@ -0,0 +1,103 @@
'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')
function resolve (dir) {
return path.join(__dirname, '..', dir)
}
const createLintingRule = () => ({
test: /\.(js|vue)$/,
loader: 'eslint-loader',
enforce: 'pre',
include: [resolve('src'), resolve('test')],
options: {
formatter: require('eslint-friendly-formatter'),
emitWarning: !config.dev.showEslintErrorsInOverlay
}
})
module.exports = {
context: path.resolve(__dirname, '../'),
entry: {
app: './src/main.js'
},
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},
resolve: {
extensions: ['.js', '.vue', '.json', '.less'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'@less': resolve('src/assets/less/page/'),
'@c': resolve('src/components/'),
'@page': resolve('src/page/'),
'@config': resolve('src/config/'),
'@http': resolve('src/http/'),
'@service': resolve('src/service/'),
'@utils': resolve('src/utils/'),
}
},
module: {
rules: [
...(config.dev.useEslint ? [createLintingRule()] : []),
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('media/[name].[hash:7].[ext]')
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
},
{
test: /\.less$/,
loader: "style-loader!css-loader!less-loader"
}
]
},
node: {
// prevent webpack from injecting useless setImmediate polyfill because Vue
// source contains it (although only uses it if it's native).
setImmediate: false,
// prevent webpack from injecting mocks to Node native modules
// that does not make sense for the client
dgram: 'empty',
fs: 'empty',
net: 'empty',
tls: 'empty',
child_process: 'empty'
}
}

View File

@@ -0,0 +1,95 @@
'use strict'
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const path = require('path')
const baseWebpackConfig = require('./webpack.base.conf')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
const portfinder = require('portfinder')
const HOST = process.env.HOST
const PORT = process.env.PORT && Number(process.env.PORT)
const devWebpackConfig = merge(baseWebpackConfig, {
module: {
rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
},
// cheap-module-eval-source-map is faster for development
devtool: config.dev.devtool,
// these devServer options should be customized in /config/index.js
devServer: {
clientLogLevel: 'warning',
historyApiFallback: {
rewrites: [
{ from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
],
},
hot: true,
contentBase: false, // since we use CopyWebpackPlugin.
compress: true,
host: HOST || config.dev.host,
port: PORT || config.dev.port,
open: config.dev.autoOpenBrowser,
overlay: config.dev.errorOverlay
? { warnings: false, errors: true }
: false,
publicPath: config.dev.assetsPublicPath,
proxy: config.dev.proxyTable,
quiet: true, // necessary for FriendlyErrorsPlugin
watchOptions: {
poll: config.dev.poll,
}
},
plugins: [
new webpack.DefinePlugin({
'process.env': require('../config/dev.env')
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
new webpack.NoEmitOnErrorsPlugin(),
// https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true
}),
// copy custom static assets
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../static'),
to: config.dev.assetsSubDirectory,
ignore: ['.*']
}
])
]
})
module.exports = new Promise((resolve, reject) => {
portfinder.basePort = process.env.PORT || config.dev.port
portfinder.getPort((err, port) => {
if (err) {
reject(err)
} else {
// publish the new Port, necessary for e2e tests
process.env.PORT = port
// add port to devServer config
devWebpackConfig.devServer.port = port
// Add FriendlyErrorsPlugin
devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
compilationSuccessInfo: {
messages: [`前端运行在这: http://${devWebpackConfig.devServer.host}:${port}`],
},
onErrors: config.dev.notifyOnErrors
? utils.createNotifierCallback()
: undefined
}))
resolve(devWebpackConfig)
}
})
})

View File

@@ -0,0 +1,145 @@
'use strict'
const path = require('path')
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.conf')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const env = require('../config/prod.env')
const webpackConfig = merge(baseWebpackConfig, {
module: {
rules: utils.styleLoaders({
sourceMap: config.build.productionSourceMap,
extract: true,
usePostCSS: true
})
},
devtool: config.build.productionSourceMap ? config.build.devtool : false,
output: {
path: config.build.assetsRoot,
filename: utils.assetsPath('js/[name].[chunkhash].js'),
chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
},
plugins: [
// http://vuejs.github.io/vue-loader/en/workflow/production.html
new webpack.DefinePlugin({
'process.env': env
}),
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false
}
},
sourceMap: config.build.productionSourceMap,
parallel: true
}),
// extract css into its own file
new ExtractTextPlugin({
filename: utils.assetsPath('css/[name].[contenthash].css'),
// Setting the following option to `false` will not extract CSS from codesplit chunks.
// Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
// It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`,
// increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
allChunks: true,
}),
// Compress extracted CSS. We are using this plugin so that possible
// duplicated CSS from different components can be deduped.
new OptimizeCSSPlugin({
cssProcessorOptions: config.build.productionSourceMap
? { safe: true, map: { inline: false } }
: { safe: true }
}),
// generate dist index.html with correct asset hash for caching.
// you can customize output by editing /index.html
// see https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: config.build.index,
template: 'index.html',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
// more options:
// https://github.com/kangax/html-minifier#options-quick-reference
},
// necessary to consistently work with multiple chunks via CommonsChunkPlugin
chunksSortMode: 'dependency'
}),
// keep module.id stable when vendor modules does not change
new webpack.HashedModuleIdsPlugin(),
// enable scope hoisting
new webpack.optimize.ModuleConcatenationPlugin(),
// split vendor js into its own file
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks (module) {
// any required modules inside node_modules are extracted to vendor
return (
module.resource &&
/\.js$/.test(module.resource) &&
module.resource.indexOf(
path.join(__dirname, '../node_modules')
) === 0
)
}
}),
// extract webpack runtime and module manifest to its own file in order to
// prevent vendor hash from being updated whenever app bundle is updated
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest',
minChunks: Infinity
}),
// This instance extracts shared chunks from code splitted chunks and bundles them
// in a separate chunk, similar to the vendor chunk
// see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
new webpack.optimize.CommonsChunkPlugin({
name: 'app',
async: 'vendor-async',
children: true,
minChunks: 3
}),
// copy custom static assets
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../static'),
to: config.build.assetsSubDirectory,
ignore: ['.*']
}
])
]
})
if (config.build.productionGzip) {
const CompressionWebpackPlugin = require('compression-webpack-plugin')
webpackConfig.plugins.push(
new CompressionWebpackPlugin({
asset: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp(
'\\.(' +
config.build.productionGzipExtensions.join('|') +
')$'
),
threshold: 10240,
minRatio: 0.8
})
)
}
if (config.build.bundleAnalyzerReport) {
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}
module.exports = webpackConfig

View File

@@ -0,0 +1,7 @@
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
NODE_ENV: '"development"'
})

View File

@@ -0,0 +1,77 @@
'use strict'
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation.
const path = require('path')
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
// 代理
proxyTable: {},
// Various Dev Server settings
host: 'localhost', // can be overwritten by process.env.HOST
port: 1314, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: false,
errorOverlay: true,
notifyOnErrors: true,
poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
// Use Eslint Loader?
// If true, your code will be linted during bundling and
// linting errors and warnings will be shown in the console.
useEslint: false,
// If true, eslint errors and warnings will also be shown in the error overlay
// in the browser.
showEslintErrorsInOverlay: false,
/**
* Source Maps
*/
// https://webpack.js.org/configuration/devtool/#development
devtool: 'cheap-module-eval-source-map',
// If you have problems debugging vue-files in devtools,
// set this to false - it *may* help
// https://vue-loader.vuejs.org/en/options.html#cachebusting
cacheBusting: true,
cssSourceMap: true
},
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './',
/**
* Source Maps
*/
productionSourceMap: false,
// https://webpack.js.org/configuration/devtool/#production
devtool: '#source-map',
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
}
}

View File

@@ -0,0 +1,4 @@
'use strict'
module.exports = {
NODE_ENV: '"production"'
}

View File

@@ -0,0 +1,12 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>vuecli2x</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>

View File

@@ -0,0 +1,79 @@
{
"name": "vuecli2x",
"version": "1.0.0",
"description": "A Vue.js project",
"author": "zhangsan <www.2271608011@qq.com>",
"private": true,
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"lint": "eslint --ext .js,.vue src",
"build": "node build/build.js"
},
"dependencies": {
"amfe-flexible": "^2.2.1",
"axios": "^0.19.0",
"vant": "^2.12.54",
"vue": "^2.5.2",
"vue-router": "^3.0.1"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-eslint": "^8.2.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-loader": "^7.1.1",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"chalk": "^2.0.1",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.0",
"eslint": "^4.15.0",
"eslint-config-standard": "^10.2.1",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^1.7.1",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-node": "^5.2.0",
"eslint-plugin-promise": "^3.4.0",
"eslint-plugin-standard": "^3.0.1",
"eslint-plugin-vue": "^4.0.0",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1",
"less": "^4.1.3",
"less-loader": "^4.1.0",
"node-notifier": "^5.1.2",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"portfinder": "^1.0.13",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"postcss-pxtorem": "^5.1.1",
"postcss-url": "^7.2.1",
"rimraf": "^2.6.0",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^0.5.8",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2",
"webpack": "^3.6.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-server": "^2.9.1",
"webpack-merge": "^4.1.0"
},
"engines": {
"node": ">= 6.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}

View File

@@ -0,0 +1,17 @@
<template>
<div id="app">
<router-link to="/">首页</router-link>
<router-link to="/about">我的</router-link>
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style lang="less" scoped>
</style>

View File

@@ -0,0 +1,4 @@
@import "./common/normalize.less";
@import "./mixins/index.less";
@import "./variable/colors.less";
@import "./variable/size.less";

View File

@@ -0,0 +1,422 @@
/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */
/**
* 1. Change the default font family in all browsers (opinionated).
* 2. Prevent adjustments of font size after orientation changes in IE and iOS.
*/
html {
font-family: sans-serif; /* 1 */
-ms-text-size-adjust: 100%; /* 2 */
-webkit-text-size-adjust: 100%; /* 2 */
}
/**
* Remove the margin in all browsers (opinionated).
*/
body,h1,h2,h3,h4,h5,h6,ul,li,p{
margin: 0;
padding: 0;
list-style: none;
}
/* HTML5 display definitions
========================================================================== */
/**
* Add the correct display in IE 9-.
* 1. Add the correct display in Edge, IE, and Firefox.
* 2. Add the correct display in IE.
*/
article,
aside,
details, /* 1 */
figcaption,
figure,
footer,
header,
main, /* 2 */
menu,
nav,
section,
summary { /* 1 */
display: block;
}
/**
* Add the correct display in IE 9-.
*/
audio,
canvas,
progress,
video {
display: inline-block;
}
/**
* Add the correct display in iOS 4-7.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
vertical-align: baseline;
}
/**
* Add the correct display in IE 10-.
* 1. Add the correct display in IE.
*/
template, /* 1 */
[hidden] {
display: none;
}
/* Links
========================================================================== */
/**
* 1. Remove the gray background on active links in IE 10.
* 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
*/
a {
background-color: transparent; /* 1 */
-webkit-text-decoration-skip: objects; /* 2 */
text-decoration: none;
}
/**
* Remove the outline on focused links when they are also active or hovered
* in all browsers (opinionated).
*/
a:active,
a:hover {
outline-width: 0;
}
/* Text-level semantics
========================================================================== */
/**
* 1. Remove the bottom border in Firefox 39-.
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none; /* 1 */
text-decoration: underline; /* 2 */
text-decoration: underline dotted; /* 2 */
}
/**
* Prevent the duplicate application of `bolder` by the next rule in Safari 6.
*/
b,
strong {
font-weight: inherit;
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* Add the correct font style in Android 4.3-.
*/
dfn {
font-style: italic;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/**
* Add the correct background and color in IE 9-.
*/
mark {
background-color: #ff0;
color: #000;
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Embedded content
========================================================================== */
/**
* Remove the border on images inside links in IE 10-.
*/
img {
border-style: none;
}
/**
* Hide the overflow in IE.
*/
svg:not(:root) {
overflow: hidden;
}
/* Grouping content
========================================================================== */
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
pre,
samp {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/**
* Add the correct margin in IE 8.
*/
figure {
margin: 1em 40px;
}
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box; /* 1 */
height: 0; /* 1 */
overflow: visible; /* 2 */
}
/* Forms
========================================================================== */
/**
* 1. Change font properties to `inherit` in all browsers (opinionated).
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
select,
textarea {
font: inherit; /* 1 */
margin: 0; /* 2 */
}
/**
* Restore the font weight unset by the previous rule.
*/
optgroup {
font-weight: bold;
}
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input { /* 1 */
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select { /* 1 */
text-transform: none;
}
/**
* 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
* controls in Android 4.
* 2. Correct the inability to style clickable types in iOS and Safari.
*/
button,
html [type="button"], /* 1 */
[type="reset"],
[type="submit"] {
-webkit-appearance: button; /* 2 */
}
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* Change the border, margin, and padding in all browsers (opinionated).
*/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box; /* 1 */
color: inherit; /* 2 */
display: table; /* 1 */
max-width: 100%; /* 1 */
padding: 0; /* 3 */
white-space: normal; /* 1 */
}
/**
* Remove the default vertical scrollbar in IE.
*/
textarea {
overflow: auto;
}
/**
* 1. Add the correct box sizing in IE 10-.
* 2. Remove the padding in IE 10-.
*/
[type="checkbox"],
[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/**
* Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
*/
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* Correct the text style of placeholders in Chrome, Edge, and Safari.
*/
::-webkit-input-placeholder {
color: inherit;
opacity: 0.54;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}

View File

@@ -0,0 +1,310 @@
.transition(@d) {
-webkit-transition-duration: @d;
transition-duration: @d;
}
.delay(@d) {
-webkit-transition-delay: @d;
transition-delay: @d;
}
.transform(@t) {
-webkit-transform: @t;
transform: @t;
}
.transform-origin(@to) {
-webkit-transform-origin: @to;
transform-origin: @to;
}
.translate3d(@x:0, @y:0, @z:0) {
-webkit-transform: translate3d(@x,@y,@z);
transform: translate3d(@x,@y,@z);
}
.animation (@a) {
-webkit-animation: @a;
animation: @a;
}
.scrollable() {
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.flex-shrink(@fs) {
-webkit-box-flex: @fs;
-webkit-flex-shrink: @fs;
-ms-flex: 0 @fs auto;
flex-shrink: @fs;
}
.clearfix() {
&:after,
&:before {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
.hairline(@position, @color) when (@position = top) {
&:before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: auto;
right: auto;
height: 1px;
width: 100%;
background-color: @color;
display: block;
z-index: 15;
// .transform-origin(50% 0%);
html.pixel-ratio-2 & {
.transform(scaleY(0.5));
}
html.pixel-ratio-3 & {
.transform(scaleY(0.33));
}
}
}
.hairline(@position, @color) when (@position = left) {
&:before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: auto;
right: auto;
width: 1px;
height: 100%;
background-color: @color;
display: block;
z-index: 15;
// .transform-origin(0% 50%);
html.pixel-ratio-2 & {
.transform(scaleX(0.5));
}
html.pixel-ratio-3 & {
.transform(scaleX(0.33));
}
}
}
.hairline(@position, @color) when (@position = bottom) {
&:after {
content: '';
position: absolute;
left: 0;
bottom: 0;
right: auto;
top: auto;
height: 1px;
width: 100%;
background-color: @color;
display: block;
z-index: 15;
html.pixel-ratio-2 & {
.transform(scaleY(0.5));
}
html.pixel-ratio-3 & {
.transform(scaleY(0.33));
}
}
}
.hairline(@position, @color) when (@position = right) {
&:after {
content: '';
position: absolute;
right: 0;
top: 0;
left: auto;
bottom: auto;
width: 1px;
height: 100%;
background-color: @color;
display: block;
z-index: 15;
// .transform-origin(100% 50%);
html.pixel-ratio-2 & {
.transform(scaleX(0.5));
}
html.pixel-ratio-3 & {
.transform(scaleX(0.33));
}
}
}
// For right and bottom
.hairline-remove(@position) when not (@position = left) and not (@position = top) {
&:after {
display: none;
}
}
// For left and top
.hairline-remove(@position) when not (@position = right) and not (@position = bottom) {
&:before {
display: none;
}
}
// For right and bottom
.hairline-color(@position, @color) when not (@position = left) and not (@position = top) {
&:after {
background-color: @color;
}
}
// For left and top
.hairline-color(@position, @color) when not (@position = right) and not (@position = bottom) {
&:before {
background-color: @color;
}
}
// Encoded SVG Background
.encoded-svg-background(@svg) {
@url: `encodeURIComponent(@{svg})`;
background-image: url("data:image/svg+xml;charset=utf-8,@{url}");
}
// Preserve3D
.preserve3d() {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}
// Shadow
.depth(@level:1) {
& when (@level = 0) {
box-shadow: none;
}
& when (@level = 1) {
box-shadow: 0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);
}
& when (@level = 2) {
box-shadow: 0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);
}
& when (@level = 3) {
box-shadow: 0 3px 3px -2px rgba(0,0,0,.2),0 3px 4px 0 rgba(0,0,0,.14),0 1px 8px 0 rgba(0,0,0,.12);
}
& when (@level = 4) {
box-shadow: 0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12);
}
& when (@level = 5) {
box-shadow: 0 3px 5px -1px rgba(0,0,0,.2),0 5px 8px 0 rgba(0,0,0,.14),0 1px 14px 0 rgba(0,0,0,.12);
}
& when (@level = 6) {
box-shadow: 0 3px 5px -1px rgba(0,0,0,.2),0 6px 10px 0 rgba(0,0,0,.14),0 1px 18px 0 rgba(0,0,0,.12);
}
& when (@level = 7) {
box-shadow: 0 4px 5px -2px rgba(0,0,0,.2),0 7px 10px 1px rgba(0,0,0,.14),0 2px 16px 1px rgba(0,0,0,.12);
}
& when (@level = 8) {
box-shadow: 0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12);
}
& when (@level = 9) {
box-shadow: 0 5px 6px -3px rgba(0,0,0,.2),0 9px 12px 1px rgba(0,0,0,.14),0 3px 16px 2px rgba(0,0,0,.12);
}
& when (@level = 10) {
box-shadow: 0 6px 6px -3px rgba(0,0,0,.2),0 10px 14px 1px rgba(0,0,0,.14),0 4px 18px 3px rgba(0,0,0,.12);
}
& when (@level = 11) {
box-shadow: 0 6px 7px -4px rgba(0,0,0,.2),0 11px 15px 1px rgba(0,0,0,.14),0 4px 20px 3px rgba(0,0,0,.12);
}
& when (@level = 12) {
box-shadow: 0 7px 8px -4px rgba(0,0,0,.2),0 12px 17px 2px rgba(0,0,0,.14),0 5px 22px 4px rgba(0,0,0,.12);
}
& when (@level = 13) {
box-shadow: 0 7px 8px -4px rgba(0,0,0,.2),0 13px 19px 2px rgba(0,0,0,.14),0 5px 24px 4px rgba(0,0,0,.12);
}
& when (@level = 14) {
box-shadow: 0 7px 9px -4px rgba(0,0,0,.2),0 14px 21px 2px rgba(0,0,0,.14),0 5px 26px 4px rgba(0,0,0,.12);
}
& when (@level = 15) {
box-shadow: 0 8px 9px -5px rgba(0,0,0,.2),0 15px 22px 2px rgba(0,0,0,.14),0 6px 28px 5px rgba(0,0,0,.12);
}
& when (@level = 16) {
box-shadow: 0 8px 10px -5px rgba(0,0,0,.2),0 16px 24px 2px rgba(0,0,0,.14),0 6px 30px 5px rgba(0,0,0,.12);
}
& when (@level = 17) {
box-shadow: 0 8px 11px -5px rgba(0,0,0,.2),0 17px 26px 2px rgba(0,0,0,.14),0 6px 32px 5px rgba(0,0,0,.12);
}
& when (@level = 18) {
box-shadow: 0 9px 11px -5px rgba(0,0,0,.2),0 18px 28px 2px rgba(0,0,0,.14),0 7px 34px 6px rgba(0,0,0,.12);
}
& when (@level = 19) {
box-shadow: 0 9px 12px -6px rgba(0,0,0,.2),0 19px 29px 2px rgba(0,0,0,.14),0 7px 36px 6px rgba(0,0,0,.12);
}
& when (@level = 20) {
box-shadow: 0 10px 13px -6px rgba(0,0,0,.2),0 20px 31px 3px rgba(0,0,0,.14),0 8px 38px 7px rgba(0,0,0,.12);
}
& when (@level = 21) {
box-shadow: 0 10px 13px -6px rgba(0,0,0,.2),0 21px 33px 3px rgba(0,0,0,.14),0 8px 40px 7px rgba(0,0,0,.12);
}
& when (@level = 22) {
box-shadow: 0 10px 14px -6px rgba(0,0,0,.2),0 22px 35px 3px rgba(0,0,0,.14),0 8px 42px 7px rgba(0,0,0,.12);
}
& when (@level = 23) {
box-shadow: 0 11px 14px -7px rgba(0,0,0,.2),0 23px 36px 3px rgba(0,0,0,.14),0 9px 44px 8px rgba(0,0,0,.12);
}
& when (@level = 24) {
box-shadow: 0 11px 15px -7px rgba(0,0,0,.2),0 24px 38px 3px rgba(0,0,0,.14),0 9px 46px 8px rgba(0,0,0,.12);
}
// & when (@level = 1) {
// box-shadow: rgba(0, 0, 0, 0.117647) 0px 1px 6px, rgba(0, 0, 0, 0.117647) 0px 1px 4px;
// }
// & when (@level = 2) {
// box-shadow: rgba(0, 0, 0, 0.156863) 0px 3px 10px, rgba(0, 0, 0, 0.227451) 0px 3px 10px;
// }
// & when (@level = 3) {
// box-shadow: rgba(0, 0, 0, 0.188235) 0px 10px 30px, rgba(0, 0, 0, 0.227451) 0px 6px 10px;
// }
// & when (@level = 4) {
// box-shadow: rgba(0, 0, 0, 0.247059) 0px 14px 45px, rgba(0, 0, 0, 0.219608) 0px 10px 18px;
// }
// & when (@level = 5) {
// box-shadow: rgba(0, 0, 0, 0.298039) 0px 19px 60px, rgba(0, 0, 0, 0.219608) 0px 15px 20px;
// }
}
// Highlighted Links
.active-highlight(@color:rgba(255, 255, 255, 0.15)){
&:before {
content: '';
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background-color: @color;
background-repeat: no-repeat;
background-position: center;
background-size: 100% 100%;
opacity: 0;
pointer-events: none;
.transition(600ms);
}
&.active-state:before,
html:not(.watch-active-state) &:active:before {
opacity: 1;
.transition(150ms);
}
}
.active-highlight-color(@color) {
&:before {
background-image: -webkit-radial-gradient(center, circle cover, @color 66%, rgba(red(@color),green(@color),blue(@color),0) 66%);
background-image: radial-gradient(circle at center, @color 66%, rgba(red(@color),green(@color),blue(@color),0) 66%);
}
}
// No Scrollbar
.no-scrollbar() {
&::-webkit-scrollbar {
display: none !important;
width: 0 !important;
height: 0 !important;
-webkit-appearance: none;
opacity: 0 !important;
}
}
.ellipsis() {
white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden;
word-wrap: break-word;
}

View File

@@ -0,0 +1,5 @@
@import "../_.less";
.about {
}

View File

@@ -0,0 +1,8 @@
@import "../_.less";
.home {
width: @s16 * 10;
h2 {
color: @red200;
}
}

View File

@@ -0,0 +1,304 @@
@red50: #ffebee;
@red100: #ffcdd2;
@red200: #ef9a9a;
@red300: #e57373;
@red400: #ef5350;
@red500: #f44336;
@red600: #e53935;
@red700: #d32f2f;
@red800: #c62828;
@red900: #b71c1c;
@redA100: #ff8a80;
@redA200: #ff5252;
@redA400: #ff1744;
@redA700: #d50000;
@red: @red500;
@pink50: #fce4ec;
@pink100: #f8bbd0;
@pink200: #f48fb1;
@pink300: #f06292;
@pink400: #ec407a;
@pink500: #e91e63;
@pink600: #d81b60;
@pink700: #c2185b;
@pink800: #ad1457;
@pink900: #880e4f;
@pinkA100: #ff80ab;
@pinkA200: #ff4081;
@pinkA400: #f50057;
@pinkA700: #c51162;
@pink: @pink500;
@purple50: #f3e5f5;
@purple100: #e1bee7;
@purple200: #ce93d8;
@purple300: #ba68c8;
@purple400: #ab47bc;
@purple500: #9c27b0;
@purple600: #8e24aa;
@purple700: #7b1fa2;
@purple800: #6a1b9a;
@purple900: #4a148c;
@purpleA100: #ea80fc;
@purpleA200: #e040fb;
@purpleA400: #d500f9;
@purpleA700: #aa00ff;
@purple: @purple500;
@deepPurple50: #ede7f6;
@deepPurple100: #d1c4e9;
@deepPurple200: #b39ddb;
@deepPurple300: #9575cd;
@deepPurple400: #7e57c2;
@deepPurple500: #673ab7;
@deepPurple600: #5e35b1;
@deepPurple700: #512da8;
@deepPurple800: #4527a0;
@deepPurple900: #311b92;
@deepPurpleA100: #b388ff;
@deepPurpleA200: #7c4dff;
@deepPurpleA400: #651fff;
@deepPurpleA700: #6200ea;
@deepPurple: @deepPurple500;
@indigo50: #e8eaf6;
@indigo100: #c5cae9;
@indigo200: #9fa8da;
@indigo300: #7986cb;
@indigo400: #5c6bc0;
@indigo500: #3f51b5;
@indigo600: #3949ab;
@indigo700: #303f9f;
@indigo800: #283593;
@indigo900: #1a237e;
@indigoA100: #8c9eff;
@indigoA200: #536dfe;
@indigoA400: #3d5afe;
@indigoA700: #304ffe;
@indigo: @indigo500;
@blue50: #e3f2fd;
@blue100: #bbdefb;
@blue200: #90caf9;
@blue300: #64b5f6;
@blue400: #42a5f5;
@blue500: #2196f3;
@blue600: #1e88e5;
@blue700: #1976d2;
@blue800: #1565c0;
@blue900: #0d47a1;
@blueA100: #82b1ff;
@blueA200: #448aff;
@blueA400: #2979ff;
@blueA700: #2962ff;
@blue: @blue500;
@lightBlue50: #e1f5fe;
@lightBlue100: #b3e5fc;
@lightBlue200: #81d4fa;
@lightBlue300: #4fc3f7;
@lightBlue400: #29b6f6;
@lightBlue500: #03a9f4;
@lightBlue600: #039be5;
@lightBlue700: #0288d1;
@lightBlue800: #0277bd;
@lightBlue900: #01579b;
@lightBlueA100: #80d8ff;
@lightBlueA200: #40c4ff;
@lightBlueA400: #00b0ff;
@lightBlueA700: #0091ea;
@lightBlue: @lightBlue500;
@cyan50: #e0f7fa;
@cyan100: #b2ebf2;
@cyan200: #80deea;
@cyan300: #4dd0e1;
@cyan400: #26c6da;
@cyan500: #00bcd4;
@cyan600: #00acc1;
@cyan700: #0097a7;
@cyan800: #00838f;
@cyan900: #006064;
@cyanA100: #84ffff;
@cyanA200: #18ffff;
@cyanA400: #00e5ff;
@cyanA700: #00b8d4;
@cyan: @cyan500;
@teal50: #e0f2f1;
@teal100: #b2dfdb;
@teal200: #80cbc4;
@teal300: #4db6ac;
@teal400: #26a69a;
@teal500: #009688;
@teal600: #00897b;
@teal700: #00796b;
@teal800: #00695c;
@teal900: #004d40;
@tealA100: #a7ffeb;
@tealA200: #64ffda;
@tealA400: #1de9b6;
@tealA700: #00bfa5;
@teal: @teal500;
@green50: #e8f5e9;
@green100: #c8e6c9;
@green200: #a5d6a7;
@green300: #81c784;
@green400: #66bb6a;
@green500: #4caf50;
@green600: #43a047;
@green700: #388e3c;
@green800: #2e7d32;
@green900: #1b5e20;
@greenA100: #b9f6ca;
@greenA200: #69f0ae;
@greenA400: #00e676;
@greenA700: #00c853;
@green: @green500;
@lightGreen50: #f1f8e9;
@lightGreen100: #dcedc8;
@lightGreen200: #c5e1a5;
@lightGreen300: #aed581;
@lightGreen400: #9ccc65;
@lightGreen500: #8bc34a;
@lightGreen600: #7cb342;
@lightGreen700: #689f38;
@lightGreen800: #558b2f;
@lightGreen900: #33691e;
@lightGreenA100: #ccff90;
@lightGreenA200: #b2ff59;
@lightGreenA400: #76ff03;
@lightGreenA700: #64dd17;
@lightGreen: @lightGreen500;
@lime50: #f9fbe7;
@lime100: #f0f4c3;
@lime200: #e6ee9c;
@lime300: #dce775;
@lime400: #d4e157;
@lime500: #cddc39;
@lime600: #c0ca33;
@lime700: #afb42b;
@lime800: #9e9d24;
@lime900: #827717;
@limeA100: #f4ff81;
@limeA200: #eeff41;
@limeA400: #c6ff00;
@limeA700: #aeea00;
@lime: @lime500;
@yellow50: #fffde7;
@yellow100: #fff9c4;
@yellow200: #fff59d;
@yellow300: #fff176;
@yellow400: #ffee58;
@yellow500: #ffeb3b;
@yellow600: #fdd835;
@yellow700: #fbc02d;
@yellow800: #f9a825;
@yellow900: #f57f17;
@yellowA100: #ffff8d;
@yellowA200: #ffff00;
@yellowA400: #ffea00;
@yellowA700: #ffd600;
@yellow: @yellow500;
@amber50: #fff8e1;
@amber100: #ffecb3;
@amber200: #ffe082;
@amber300: #ffd54f;
@amber400: #ffca28;
@amber500: #ffc107;
@amber600: #ffb300;
@amber700: #ffa000;
@amber800: #ff8f00;
@amber900: #ff6f00;
@amberA100: #ffe57f;
@amberA200: #ffd740;
@amberA400: #ffc400;
@amberA700: #ffab00;
@amber: @amber500;
@orange50: #fff3e0;
@orange100: #ffe0b2;
@orange200: #ffcc80;
@orange300: #ffb74d;
@orange400: #ffa726;
@orange500: #ff9800;
@orange600: #fb8c00;
@orange700: #f57c00;
@orange800: #ef6c00;
@orange900: #e65100;
@orangeA100: #ffd180;
@orangeA200: #ffab40;
@orangeA400: #ff9100;
@orangeA700: #ff6d00;
@orange: @orange500;
@deepOrange50: #fbe9e7;
@deepOrange100: #ffccbc;
@deepOrange200: #ffab91;
@deepOrange300: #ff8a65;
@deepOrange400: #ff7043;
@deepOrange500: #ff5722;
@deepOrange600: #f4511e;
@deepOrange700: #e64a19;
@deepOrange800: #d84315;
@deepOrange900: #bf360c;
@deepOrangeA100: #ff9e80;
@deepOrangeA200: #ff6e40;
@deepOrangeA400: #ff3d00;
@deepOrangeA700: #dd2c00;
@deepOrange: @deepOrange500;
@brown50: #efebe9;
@brown100: #d7ccc8;
@brown200: #bcaaa4;
@brown300: #a1887f;
@brown400: #8d6e63;
@brown500: #795548;
@brown600: #6d4c41;
@brown700: #5d4037;
@brown800: #4e342e;
@brown900: #3e2723;
@brown: @brown500;
@blueGrey50: #eceff1;
@blueGrey100: #cfd8dc;
@blueGrey200: #b0bec5;
@blueGrey300: #90a4ae;
@blueGrey400: #78909c;
@blueGrey500: #607d8b;
@blueGrey600: #546e7a;
@blueGrey700: #455a64;
@blueGrey800: #37474f;
@blueGrey900: #263238;
@blueGrey: @blueGrey500;
@grey50: #fafafa;
@grey100: #f5f5f5;
@grey200: #eeeeee;
@grey300: #e0e0e0;
@grey400: #bdbdbd;
@grey500: #9e9e9e;
@grey600: #757575;
@grey700: #616161;
@grey800: #424242;
@grey900: #212121;
@grey: @grey500;
@black: #000000;
@white: #ffffff;
@transparent: rgba(0, 0, 0, 0);
@fullBlack: rgba(0, 0, 0, 1);
@darkBlack: rgba(0, 0, 0, 0.87);
@lightBlack: rgba(0, 0, 0, 0.54);
@minBlack: rgba(0, 0, 0, 0.26);
@faintBlack: rgba(0, 0, 0, 0.12);
@fullWhite: rgba(255, 255, 255, 1);
@darkWhite: rgba(255, 255, 255, 0.87);
@lightWhite: rgba(255, 255, 255, 0.54);

View File

@@ -0,0 +1,5 @@
@s12: 12px;
@s13: 13px;
@s14: 14px;
@s15: 15px;
@s16: 16px;

View File

@@ -0,0 +1,13 @@
<template>
<div class="header">头部</div>
</template>
<script>
export default {
}
</script>
<style>
</style>

View File

@@ -0,0 +1,39 @@
import Vant from 'vant';
import 'vant/lib/index.css';
import service from './../service/_'
import utils from './../utils'
export default {
devBaseUrl: 'http://127.0.0.1:3000/api/json',
testBaseUrl: 'http://127.0.0.1:3000/test/api/json',
prodBaseUrl: 'http://127.0.0.1:3000/prod/api/json',
apiList: {
home: '/index'
},
checkStage: function () {
switch (process.env.NODE_ENV) {
case "development":
return this.devBaseUrl;
break;
case "test":
return this.testBaseUrl;
break;
case "production":
return this.prodBaseUrl;
break;
default:
break;
}
},
VuePlugs: [ Vant ],
NotVuePlugs: [
{ n: '$http', v: service },
{ n: '$util', v: utils },
]
}

View File

@@ -0,0 +1,75 @@
import http from "axios";
import config from "@config/"
import { Toast } from 'vant';
class HTTP {
constructor() {
this.instance = http.create({
baseURL: config.checkStage(),
timeout: 3000,
headers: {
'Content-Type': 'application/json;charset:utf-8;'
}
});
this.interceptors()
}
async get(par) {
return await this.instance.get(par.url, {
params: par.data,
headers: Object.assign({
token: `${localStorage.getItem("token")}`
}, par.headers)
})
}
async post() {
return await this.instance.post(par.url, par.data, {
headers: Object.assign({
token: `${localStorage.getItem("token")}`
}, par.headers)
})
}
interceptors() {
// 添加请求拦截器
this.instance.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
Toast.loading({
duration: 0,
forbidClick: true,
message: '加载中..',
});
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
this.instance.interceptors.response.use(function (response) {
// 对响应数据做点什么
Toast.clear();
switch (response.data.status) {
case 200:
return response.data.result;
break;
case 404:
Toast.fail(response.data.msg);
throw new Error(response.data.msg);
break;
default:
break;
}
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
}
}
export default HTTP

View File

@@ -0,0 +1,17 @@
import 'amfe-flexible'
import Vue from 'vue'
import App from './App'
import router from './router'
import config from './config'
config.VuePlugs.forEach(v => Vue.use(v))
config.NotVuePlugs.forEach(v => Vue.prototype[v.n] = v.v )
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})

View File

@@ -0,0 +1,27 @@
<template>
<div class="about">
<VHeader></VHeader>
<h2>{{ title }}</h2>
</div>
</template>
<script>
import VHeader from '@c/header'
export default {
data() {
return {
title: '我的'
}
},
methods: {
},
components: {
VHeader
}
}
</script>
<style scoped lang="less">
@import "~@less/about";
</style>

View File

@@ -0,0 +1,29 @@
<template>
<div class="home">
<h2>{{ title }}</h2>
</div>
</template>
<script>
export default {
data() {
return {
title: "首页"
};
},
created() {
console.log(this.$util.test());
this.getData()
},
methods: {
async getData() {
let res = await this.$http.index.home();
console.log(res);
}
}
};
</script>
<style scoped lang="less">
@import "~@less/home";
</style>

View File

@@ -0,0 +1,18 @@
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'home',
component: () => import(/* webpackChunkName: "home" */ '@page/home')
},
{
path: '/about',
name: 'about',
component: () => import(/* webpackChunkName: "about" */ '@page/about')
}
]
})

Some files were not shown because too many files have changed in this diff Show More