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

Binary file not shown.

After

Width:  |  Height:  |  Size: 71 KiB

View File

@@ -0,0 +1,40 @@
<!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>
<button>点我</button>
<div style="display: block;" class="text">哈哈哈哈</div>
</body>
<script>
// 1 点击显示(block)和隐藏(display: none)元素
// 思路:
// 1 给button 绑定 点击事件
// 2
// 2 显示的时候随机变化颜色
// hsla 来实现的
var button = $("button"), text = $(".text");
button.onclick = function () {
if (text.style.display == "block") {
text.style.display = "none"
} else {
text.style.display = "block"
text.style.color = `hsl(${Math.random() * 360},100%,50%)`
}
}
function $(className) {
return document.querySelector(className)
}
</script>
</html>

View File

@@ -0,0 +1,91 @@
<!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>tab</title>
<style>
ul,li {
margin: 0;
padding: 0;
list-style: none;
}
.title {
display: flex;
}
.title li {
margin-right: 10px;
}
.title .active {
color: red;
}
.content li {
display: none;
}
.content .active {
display: block;
}
</style>
</head>
<body>
<ul class="title">
<li class="active">首页</li>
<li>社会</li>
<li>军事</li>
<li>科技</li>
</ul>
<ul class="content">
<li class="active">首页 的内容</li>
<li>社会 的内容</li>
<li>军事 的内容</li>
<li>科技 的内容</li>
</ul>
</body>
<script>
var titleLi = _(".title li"), contentLi = _(".content li");
// for (var i = 0; i < titleLi.length; i++) {
// console.log(titleLi[i]);
// }
// NodeList.prototype.forLb = function(callback) {
// for (let i = 0; i < this.length; i++) {
// callback(this[i], i, this)
// }
// }
titleLi.forEach(function(v, i) {
v.onclick = function () {
titleLi.forEach(function(item, index) {
item.className = ""
contentLi[index].className = ""
})
v.className = "active"
contentLi[i].className = "active"
}
})
function $(className) {
return document.querySelector(className)
}
function _(className) {
return document.querySelectorAll(className)
}
</script>
</html>

View File

@@ -0,0 +1,154 @@
<!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>tab</title>
<style>
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
.title {
display: flex;
}
.title li {
margin-right: 10px;
}
.title .active {
color: red;
}
.content li {
display: none;
}
.content .active {
display: block;
}
</style>
</head>
<body>
<ul class="title">
</ul>
<ul class="content">
</ul>
</body>
<script>
var titleLi = _(".title li"), contentLi = _(".content li");
// json
// js object + array 的组合
var tabs = [
{
title: '首页',
content: [
{ text: '首页的内容1' },
{ text: '首页的内容2' },
{ text: '首页的内容3' },
{ text: '首页的内容4' },
{ text: '首页的内容5' },
]
},
{
title: '社会',
content: [
{ text: '社会 的内容1' },
{ text: '社会 的内容2' },
{ text: '社会 的内容3' },
]
},
{
title: '军事',
content: [
{ text: '军事 的内容1' },
{ text: '军事 的内容2' },
{ text: '军事 的内容3' },
]
},
{
title: '科技',
content: [
{ text: '科技 的内容1' },
{ text: '科技 的内容2' },
{ text: '科技 的内容3' },
]
}
]
function renderTitle() {
tabs.forEach((v, i) => {
$(".title").innerHTML += `<li class="${i == 0 ? 'active' : ''}">${v.title}</li>`
})
renderContent();
var titleLi = _(".title li"), contentLi = _(".content li");
titleLi.forEach(function (v, i) {
v.onclick = function () {
titleLi.forEach(function (item, index) {
item.className = ""
contentLi[index].className = ""
})
v.className = "active"
contentLi[i].className = "active"
}
})
}
function renderContent() {
tabs.forEach((v, i) => {
$(".content").innerHTML += `
<li class="${i == 0 ? 'active' : ''}">
<li class="${i == 0 ? 'active' : ''}"
${v.content.map(j => {
return `<p>${j.text}</p>`
}).toString().replaceAll(",", "")
}
</li>
`
})
}
renderTitle();
function $(className) {
return document.querySelector(className)
}
function _(className) {
return document.querySelectorAll(className)
}
// map
var a = [1, 2, 3, 4, 5, 6].map(v => {
return v
})
console.log(a);
</script>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 424 B

View File

@@ -0,0 +1,219 @@
<!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,
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
.header {
width: 100%;
height: 45px;
position: fixed;
left: 0;
right: 0;
top: 0;
background: #fff;
z-index: 999;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 10px;
box-sizing: border-box;
border-bottom: 1px solid #dadada;
}
.header img {
width: 20px;
height: 20px;
}
.content {
margin-top: 45px;
}
.content li {
height: 40px;
display: flex;
align-items: center;
border-bottom: 1px solid #dadada;
padding: 0 10px;
}
.refresh {
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
position: fixed;
left: 50%;
z-index: 998;
background: #fff;
border-radius: 100%;
box-shadow: 0px 0px 9px #858585;
margin-left: -15px;
transition: all 0.1s;
}
.refresh img {
width: 100%;
height: 100%;
}
.rotate {
animation: rotateAction 1s linear infinite;
}
@keyframes rotateAction {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="header">
<img src="./back.png" alt="">
<span>热门视频</span>
<span></span>
</div>
<ul class="content">
<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>
<li>列表16</li>
<li>列表17</li>
<li>列表18</li>
<li>列表19</li>
<li>列表20</li>
<li>列表21</li>
<li>列表22</li>
<li>列表23</li>
<li>列表24</li>
<li>列表25</li>
<li>列表26</li>
<li>列表27</li>
<li>列表28</li>
<li>列表29</li>
<li>列表30</li>
<li>列表31</li>
<li>列表32</li>
<li>列表33</li>
<li>列表34</li>
<li>列表35</li>
<li>列表36</li>
<li>列表37</li>
<li>列表38</li>
<li>列表39</li>
<li>列表40</li>
</ul>
<div class="refresh" style="top: 10px;">
<img src="./refresh.png" alt="">
</div>
</body>
<script>
var startY = 0, moveY = 0, endY = 0;
if (isTop()) {
addMove();
} else {
window.addEventListener('scroll', () => isTop() ? addMove() : '')
}
function addMove() {
$(".content").addEventListener('touchstart', (e) => {
startY = e.targetTouches[0].pageY
});
$(".content").addEventListener('touchmove', (e) => {
if (isTop()) {
moveY = e.targetTouches[0].pageY;
if (moveY > startY) {
// 必须要阻止默认事件,如果不阻止会和页面的滚动相互冲突
e.preventDefault();
var sTop = moveY - startY;
if (sTop <= 120) {
$(".refresh").style = `
top: ${sTop}px;
transform: rotate(${sTop * 3}deg);
`;
}
}
}
});
$(".content").addEventListener('touchend', (e) => {
endY = e.changedTouches[0].pageY;
var eTop = endY - startY;
if (eTop <= 60) {
$(".refresh").style = `
top: 10px;
transform: rotate(0deg);
`;
} else {
$(".refresh").className = "refresh rotate"
$(".refresh").style = `
top: 80px;
transform: rotate(0}deg);
`;
setTimeout(() => {
$(".refresh").style = `
top: 10px;
transform: rotate(0deg);
`;
$(".refresh").className = "refresh"
}, 2000)
}
});
}
function isTop() {
return document.documentElement.scrollTop === 0 ? true : false
}
function $(className) {
return document.querySelector(className)
}
</script>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 KiB

View File

@@ -0,0 +1,179 @@
<!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,
ul,
li {
margin: 0;
padding: 0;
}
.main {}
.main ul {
overflow: hidden;
}
.main ul li {
display: flex;
height: 45px;
align-items: center;
position: relative;
padding: 0 15px;
border-bottom: 1px solid #f4f0f0;
transition-duration: 0.3s;
}
.main .item {
width: 100%;
}
.main .action {
display: flex;
align-items: center;
height: 100%;
position: absolute;
right: -180px;
}
.main .action .item {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 0 14px;
color: #fff;
}
.action .top {
background: #c8c7cd;
}
.action .read {
background: #ff9c00;
}
.action .delete {
background: #ff3a31;
}
</style>
</head>
<body>
<div class="main">
<ul>
<li>
<div class="item">新闻1</div>
<div class="action">
<div class="item top">置顶</div>
<div class="item read">未读</div>
<div class="item delete">删除</div>
</div>
</li>
<li>
<div class="item">新闻2</div>
<div class="action">
<div class="item top">置顶</div>
<div class="item read">未读</div>
<div class="item delete">删除</div>
</div>
</li>
<li>
<div class="item">新闻3</div>
<div class="action">
<div class="item top">置顶</div>
<div class="item read">未读</div>
<div class="item delete">删除</div>
</div>
</li>
</ul>
</div>
</body>9
<script>
var startX = 0;
_(".main li").forEach((v, i) => {
// v.open = false
v.addEventListener('touchstart', (e) => {
startX = e.targetTouches[0].screenX;
_(".main li").forEach((j, index) => {
if (index != i) {
j.style.transform = `translateX(0px)`;
}
})
console.log("startX: ", startX);
})
v.addEventListener('touchmove', (e) => {
var moveX = e.targetTouches[0].screenX;
console.log('moveX',moveX);
// 左滑
if (startX > moveX) {
if (!v.open) {
var x = moveX - startX
console.log("左滑:",);
v.style.transform = `translateX(${x < -180 ? -180 : x}px)`;
v.open = true
}
} else {
if (v.open) {
var newX = -180 + (moveX - startX)
v.style.transform = `translateX(${newX <= 0 ? newX : 0}px)`;
console.log("右滑");
}
}
})
v.addEventListener('touchend', (e) => {
var endX = e.changedTouches[0].screenX;
var ox = endX - startX;
console.log('endX',endX,);
// 左滑
if (startX > endX) {
if (ox > -60) {
v.style.transform = `translateX(0px)`;
v.open = false
} else {
v.style.transform = `translateX(-180px)`;
}
// 右滑
} else {
console.log("ox: ", ox);
if (ox > 60) {
v.style.transform = `translateX(0px)`;
v.open = false
} else {
v.style.transform = `translateX(-180px)`;
}
}
})
})
function $(className) {
return document.querySelector(className)
}
function _(className) {
return document.querySelectorAll(className)
}
</script>
</html>

View File

@@ -0,0 +1,94 @@
<!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: 100vh;
}
body,
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
ul {
width: 152px;
border-radius: 6px;
box-shadow: 2px 2px 9px #d7d7d7;
display: none;
position: fixed;
}
li {
height: 40px;
padding: 0 15px;
box-sizing: border-box;
line-height: 40px;
}
</style>
</head>
<body>
<ul>
<li>新建文件夹</li>
<li>上传文件</li>
<li>上传文件夹</li>
<li>刷新网页</li>
</ul>
</body>
<script>
$("body").oncontextmenu = function (e) {
e.preventDefault();
var { x, y } = e;
var { clientWidth, clientHeight } = document.body;
if (clientWidth - x < 152 && clientHeight - y < 160) {
$("ul").style = `
top: ${y - 160}px;
left: ${x - 152}px;
display: block;
`
} else if (clientWidth - x < 152) {
$("ul").style = `
top: ${y}px;
left: ${x - 152}px;
display: block;
`
} else if (clientHeight - y < 160) {
$("ul").style = `
top: ${y - 160}px;
left: ${x}px;
display: block;
`
} else {
$("ul").style = `
top: ${y}px;
left: ${x}px;
display: block;
`
}
}
function $(className) {
return document.querySelector(className)
}
</script>
</html>

View File

@@ -0,0 +1,71 @@
@font-face {
font-family: "iconfont"; /* Project id 3445167 */
src: url('iconfont.woff2?t=1655693871496') format('woff2'),
url('iconfont.woff?t=1655693871496') format('woff'),
url('iconfont.ttf?t=1655693871496') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-close:before {
content: "\e6a7";
}
.icon-yulanxuanzhuan:before {
content: "\e627";
}
.icon-quanping:before {
content: "\e626";
}
.icon-suoxiao:before {
content: "\ec13";
}
.icon-fangda:before {
content: "\ec14";
}
.icon-beijingyibiyi:before {
content: "\e64f";
}
.icon-fanhui:before {
content: "\e601";
}
.icon-yunshangchuan:before {
content: "\e600";
}
.icon-xiazai:before {
content: "\e668";
}
.icon-sousuo:before {
content: "\e752";
}
.icon-z044:before {
content: "\e630";
}
.icon-jiahao:before {
content: "\eaf3";
}
.icon-gengduo:before {
content: "\e620";
}
.icon-shuaxin:before {
content: "\e631";
}

View File

@@ -0,0 +1,83 @@
.preview {
position: fixed;
z-index: 999;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.preview_task {
width: 100%;
height: 100%;
background: #0000008a;
position: absolute;
z-index: -1;
}
.preview_wrap {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.preview_img {
height: 100%;
position: relative;
z-index: 10;
}
.preview_close {
position: absolute;
right: 20px;
top: 20px;
color: #fff;
z-index: 9;
font-size: 28px;
}
.navigation {
position: absolute;
z-index: 9;
top: 50%;
transform: translateY(-50%);
color: #fff;
font-size: 27px;
background: #939090;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 100%;
}
.navigation_left {
left: 10px;
}
.navigation_right {
right: 10px;
}
.preview_list {
width: 282px;
height: 44px;
position: absolute;
z-index: 11;
left: 50%;
bottom: 30px;
display: flex;
align-items: center;
justify-content: space-between;
transform: translateX(-50%);
padding: 0 23px;
background-color: #606266;
box-sizing: border-box;
border-radius: 22px;
color: #fff
}
.preview_list .preview_list_item {
cursor: pointer;
}
.preview_list .right {
transform: rotateY(180deg);
}

View File

@@ -0,0 +1,67 @@
<!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">
<link rel="stylesheet" href="./css/iconfont.css">
<link rel="stylesheet" href="./css/preview.css">
<title>图片预览</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.main img {
width: 200px;
}
</style>
</head>
<body>
<div class="main"></div>
</body>
<script src="./index.js"></script>
<script>
var img = [
'https://img1.baidu.com/it/u=2863108920,4275403644&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281',
'https://img2.baidu.com/it/u=3395582942,4228440123&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
'https://img1.baidu.com/it/u=2638231904,4072091792&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281',
'https://img2.baidu.com/it/u=2311492523,2796016539&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281'
];
img.forEach(v => {
$(".main").innerHTML += ` <img src="${v}" alt="">`
})
_(".main img").forEach((v, i) => {
v.onclick = () => {
console.log(v);
new PicturePreview({
index: i,
arr: img
})
}
})
function $(className) {
return document.querySelector(className)
}
function _(className) {
return document.querySelectorAll(className)
}
</script>
</html>

View File

@@ -0,0 +1,195 @@
// class 类
// 其实就是现实生活中具体事物在编程中的表现
// 莫一个事物具体的属性(变量)和功能(方法)
// 构造函数 constructor
// 类被初始化(new)的时候,第一个默认执行的方法
// 做参数的接受和保存
// 本质上就是 object
// 语法糖
class PicturePreview {
scale = 1;
rotate = 0;
constructor(params) {
this.params = params;
this.initHtml();
}
initHtml () {
this.$("body").insertAdjacentHTML('beforeend', `
<div class="preview">
<div class="preview_task"></div>
<div class="preview_wrap">
<img style="transform: scale(${this.scale}) rotate(${this.rotate}deg);margin-left: 0px;margin-top: 0px;" class="preview_img" src="${this.params.arr[this.params.index]}" alt="">
</div>
<div class="preview_close iconfont icon-close"></div>
<div class="navigation navigation_left iconfont icon-fanhui"></div>
<div class="navigation navigation_right iconfont icon-gengduo"></div>
<div class="preview_list">
<div class="iconfont icon-suoxiao preview_list_item"></div>
<div class="iconfont icon-fangda preview_list_item"></div>
<div class="iconfont icon-quanping sf preview_list_item"></div>
<div class="iconfont icon-yulanxuanzhuan left preview_list_item"></div>
<div class="iconfont icon-yulanxuanzhuan right preview_list_item"></div>
</div>
</div>
`)
this.bindEvents()
}
bindEvents() {
this.$(".preview_wrap img").onmousedown = (e) => {
e.preventDefault();
this.startX = e.x;
this.startY = e.y;
this.status = true
this.oldLeft = parseInt(this.$(".preview_wrap img").style.marginLeft)
this.oldTop = parseInt(this.$(".preview_wrap img").style.marginTop)
this.moveEl(".preview_wrap img")
this.$(".preview_wrap img").onmouseout = (e) => {
this.$(".preview_wrap img").onmousemove = null
if ( this.status) {
this.moveEl(".preview_wrap")
}
}
}
this.$(".preview_wrap img").onmouseup = (e) => {
this.status = false
this.$(".preview_wrap img").onmousemove = null
}
this.$(".preview_wrap").onmouseup = (e) => {
this.status = false
this.$(".preview_wrap").onmousemove = null
}
this.$(".preview_close").onclick = () => {
this.$("body").removeChild(this.$(".preview"))
}
// 上一页
this.$(".icon-fanhui").onclick = () => {
this.params.index -= 1
if (this.params.index < 0) {
this.params.index = 0
}
this.$(".preview_img").src = this.params.arr[this.params.index]
}
// 下一页
this.$(".icon-gengduo").onclick = () => {
this.params.index += 1
if (this.params.index > (this.params.arr.length -1)) {
this.params.index = this.params.arr.length -1
}
this.$(".preview_img").src = this.params.arr[this.params.index]
}
this.$(".icon-suoxiao").onclick = () => {
this.scale -= 0.2;
if (this.scale <= 0.2) {
this.scale = 0.2
}
this.transform()
}
this.$(".icon-fangda").onclick = () => {
this.scale += 0.2;
this.transform()
}
this.$(".left").onclick = () => {
this.rotate -= 90
this.transform()
}
this.$(".right").onclick = () => {
this.rotate += 90
this.transform()
}
this.$(".sf").onclick = () => {
this.scale = 1
this.rotate = 0
this.transform()
if (this.$(".sf").classList.contains("icon-quanping")) {
this.$(".preview_wrap img").style.height = "auto"
this.$(".sf").classList.replace("icon-quanping", "icon-beijingyibiyi")
} else {
this.$(".preview_wrap img").style.height = "100%"
this.$(".sf").classList.replace("icon-beijingyibiyi", "icon-quanping")
}
}
}
transform() {
this.$(".preview_wrap img").style = `
transform: scale(${this.scale}) rotate(${this.rotate}deg);
margin-left: ${parseInt(this.$(".preview_wrap img").style.marginLeft)}px;
margin-top: ${parseInt(this.$(".preview_wrap img").style.marginTop)}px;
`
}
moveEl(className) {
this.$(className).onmousemove = (e) => {
e.stopPropagation();
e.preventDefault();
var endX = e.x - this.startX;
var endY = e.y - this.startY;
this.$(".preview_wrap img").style.marginLeft = `${endX + this.oldLeft}px`
this.$(".preview_wrap img").style.marginTop = `${endY + this.oldTop}px`
}
}
$(className) {
return document.querySelector(className)
}
}
// 箭头函数会解绑(释放) this 执行
// bind call apply
// var PicturePreview = {
// init (test) {
// console.log(this);
// this.a = test;
// },
// getA: function() {
// console.log(this.a);
// }
// }
// window.PicturePreview.init()

View File

@@ -0,0 +1,139 @@
<!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: 100vh;
}
body,
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
span {
position: fixed;
}
</style>
</head>
<body>
</body>
<script>
// 1:在鼠标点击的位置,依次显示字
// 1 为body绑定点击事件,然后拿到 x,y坐标,设置到 span(使用js创建) 标签上
// 2 把做好的span 放到body上
// 2: 让文字运动起来
var textArr = ['富强', '民主', '文明', '和谐', '自由', '平等', '公正', '法治', '爱国', '敬业', '诚信', '友善'];
var index = 0;
$("body").onclick = function (e) {
var time = null;
var { x, y } = e;
var span = document.createElement("span");
span.innerText = textArr[index];
span.style = `
left: ${x}px;
top: ${y}px;
`;
index++
index > 11 ? index = 0 : ''
span.move = 0
$("body").appendChild(span)
function motion() {
span.move += 4;
console.log("span.move: ", span.move);
if (span.move > 100) {
setTimeout(() => $("body").removeChild(span), 300)
// clearTimeout(time)
cancelAnimationFrame(time)
} else {
span.style.top = `${y - span.move}px`
time = requestAnimationFrame(motion)
}
}
motion()
}
function motion(el, y) {
// time = setTimeout(function fn() {
// el.move+=4;
// console.log("el.move: ", el.move);
// if (el.move > 100) {
// setTimeout(() => $("body").removeChild(el),300)
// clearTimeout(time)
// } else {
// el.style.top = `${y - el.move}px`
// time = setTimeout(fn, 1000/60)
// }
// }, 1000/60)
// setTimeout(function () {
// $("body").removeChild(el)
// }, 800)
}
function $(className) {
return document.querySelector(className)
}
// 箭头函数
// var a = test => console.log("test")
// a(1)
// 闭包
// 函数内部的函数访问外部变量的过程
// 为了解决:变量缓存的问题
function a() {
var c = 1
function test() {
c++
return c;
}
return test
}
var t = a();
console.log(t());
console.log(t());
var c = a();
console.log(c());
</script>
</html>

View File

@@ -0,0 +1,62 @@
<!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>
</style>
</head>
<body>
<input type="text" placeholder="请输入搜索关键字">
<ul>
</ul>
</body>
<script>
// 1 给输入框绑定 oninput 输入事件,实时获取输入的数值
// 2 拿到用户输入的 关键字,去搜索建议的数组中,找到包含这个关键字的数据
// 3 拿到匹配的数据后,需要保存到 新的数组 中
// 4 渲染 新数组 ,显示到 ul 中
// 5 实现 匹配的 关键词 加红色突出显示
// 天气
var arr = ['今天天气真好', 'html学习', '不喜欢html', '热爱学习', '天气不好,是阴天', '不喜欢学习'];
var searchList = [];
$("input").oninput = function () {
searchList = []
if ($("input").value.length != 0) {
arr.forEach(function (v, i) {
if (v.includes($("input").value)) {
var span = `<span style="color: red;">${ $("input").value }</span>`
searchList.push(v.replace($("input").value, span))
}
});
renderLi();
} else {
$("ul").innerHTML = ""
}
}
function renderLi() {
$("ul").innerHTML = ""
searchList.forEach(function (v, i) {
$("ul").innerHTML += `<li>${v}</li>`
})
}
function $(className) {
return document.querySelector(className)
}
</script>
</html>

View File

@@ -0,0 +1,190 @@
* {
margin: 0;
padding: 0;
list-style: none;
}
body {
width: 100%;
height: 100vh;
background-image: url("../img/back.png");
background-size: contain;
position: relative;
overflow: hidden;
user-select: none;
}
.result {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 30px;
z-index: 999;
}
.ground {
position: absolute;
width: 100%;
height: 112px;
left: 0;
right: 0;
bottom: 0;
z-index: 1000;
}
.ground img {
position: absolute;
width: 100%;
height: 100%;
}
.bird {
width: 34px;
height: 24px;
position: absolute;
left: 100px;
transition: all linear 0.15s;
z-index: 999;
}
.up {
transform: rotate(-38deg);
}
.down {
transform: rotate(90deg);
}
.sg {
width: 55px;
position: absolute;
}
@keyframes birdShake {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(10px);
}
100% {
transform: translateY(0px);
}
}
@keyframes birdMotion {
0% {
background: url("../img/hn1.png");
}
50% {
background: url("../img/hn2.png");
}
100% {
background: url("../img/hn3.png");
}
}
@keyframes birdBlueMotion {
0% {
background: url("../img/hn_blue_1.png");
}
50% {
background: url("../img/hn_blue_2.png");
}
100% {
background: url("../img/hn_blue_3.png");
}
}
@keyframes birdRedMotion {
0% {
background: url("../img/hn_red_1.png");
}
50% {
background: url("../img/hn_red_2.png");
}
100% {
background: url("../img/hn_red_3.png");
}
}
.start {
position: absolute;
left: 50%;
top: 40%;
transform: translate(-50%, -40%);
display: flex;
flex-direction: column;
align-items: center;
z-index: 999;
}
.start .play {
width: 60px;
margin-top: 20px;
cursor: pointer;
}
.start .bird_list {
display: flex;
align-items: center;
justify-content: space-between;
}
.start .bird_list img {
cursor: pointer;
}
.start .bird_list img:nth-child(2){
margin: 0 30px;
}
.start .menu {
margin: 20px 0;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
background: #00000038;
color: #fff;
border-radius: 6px;
}
.start .menu .item {
width: 100%;
height: 100%;
text-align: center;
height: 40px;
line-height: 40px;
cursor: pointer;
}
.start .menu .item:first-child {
border-bottom: 0.5px solid #b9b9b9;
}
.pause {
position: absolute;
left: 20px;
top: 20px;
cursor: pointer;
z-index: 999;
}
.show {
display: block !important;
}
.hidden {
display: none !important;
}
audio {
display: none;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

View File

@@ -0,0 +1,47 @@
<!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="./css/index.css">
</head>
<body>
<audio class="hit" src="./sounds/sfx_hit.ogg"></audio>
<audio class="point" src="./sounds/sfx_point.ogg"></audio>
<div class="result hidden">
</div>
<img class="pause hidden" src="./img/pause.png" alt="">
<div class="start">
<img class="logo" src="./img/title.png" alt="">
<div class="menu">
<div class="item simple">普通难度</div>
<div class="item Infernal">地狱难度</div>
</div>
<div class="bird_list">
<img src="./img/hn1.png" alt="">
<img src="./img/hn_blue_1.png" alt="">
<img src="./img/hn_red_1.png" alt="">
</div>
<img class="play hidden" src="./img/start.png" alt="">
</div>
<div class="bird" style="top: 0px; animation: birdMotion 0.4s linear infinite;"></div>
<div class="ground">
<img class="groundOne" src="./img/diban.png" alt="">
<img class="groundTwo" src="./img/diban.png" alt="">
</div>
</body>
<script src="./js/utils.js"></script>
<script src="./js/index.js"></script>
</html>

View File

@@ -0,0 +1,310 @@
class bird {
// 游戏的默认状态 false 未开始 true 开始游戏
gameStatus = false;
innerHeight = window.innerHeight;
innerWidth = window.innerWidth;
// 鸟的下落速度
birdDownSpeed = 8;
// 鸟的下落速度
birdUpSpeed = 40;
// 地板的移动速度
groundSpeed = 5;
// 上下水管的间隙
WaterPipeClearance = 150
// 水管的左右间隙
WaterPipeLeftRightClearance = 300
// 生成水管的X轴位置
WaterPipeX = 0
// 一秒创建多少个水管
createdWaterPipeXTime = 1000
// 总分
TotalScore = 0
// 鸟的默认主题
birdTheme = "birdMotion";
constructor() {
this.settingAction();
this.bindEvent();
this.birdAction();
this.groundAction();
this.resultAction()
setInterval(() => {
if (this.gameStatus) {
this.createdWaterPipe();
}
}, this.createdWaterPipeXTime)
// this.createdWaterPipe();
}
settingAction() {
// 换鸟主题的功能
_(".bird_list img").forEach((v, i) => {
v.onclick = () => {
switch (i) {
case 0:
this.birdTheme = "birdMotion"
break;
case 1:
this.birdTheme = "birdBlueMotion"
break;
case 2:
this.birdTheme = "birdRedMotion"
break;
default:
break;
}
$(".bird").style.animation = `${this.birdTheme} 0.4s linear infinite, birdShake 0.4s linear infinite`;
}
})
click(".menu .simple", () => {
this.startGame()
})
click(".menu .Infernal", () => {
this.startGame()
})
}
startGame() {
_(".sg").forEach(v => {
this.WaterPipeMove(v)
})
this.changeGameStatus()
}
bindEvent() {
click(".play", () => this.startGame())
click(".pause", () => {
this.changeGameStatus()
_(".sg").forEach(v => clearInterval(v.time))
})
}
changeGameStatus() {
if (this.gameStatus) {
// 暂停游戏
$(".start").remove("hidden")
$(".pause").add("hidden")
$(".menu").add("hidden")
$(".bird_list").add("hidden")
$(".play").remove("hidden")
this.gameStatus = false
} else {
// 开始游戏
$(".result").remove("hidden")
$(".bird").style.animation = `${this.birdTheme} 0.4s linear infinite`
$(".start").add("hidden")
$(".pause").remove("hidden")
this.gameStatus = true
}
}
resultAction() {
var TotalScoreArr = String(this.TotalScore).split("")
$(".result").innerHTML = ""
TotalScoreArr.forEach(v => {
$(".result").innerHTML += `<img src="./img/${v}.png" alt="">`
})
}
BumpGround(type) {
var GroundYStart = this.innerHeight - 112;
if (type = 1) {
GroundYStart -= 34
}
var birdBTop = $(".bird").offsetTop + $(".bird").offsetHeight;
if (birdBTop >= GroundYStart) {
console.log("碰到地板了");
this.gameOver();
}
}
birdAction() {
var clcikTime = 0, currentTime = 0;
// 设置鸟的初始位置
$(".bird").style.top = `${this.innerHeight / 2 - 12}px`;
$(".bird").style.animation = `${this.birdTheme} 0.4s linear infinite, birdShake 0.4s linear infinite`;
setInterval(() => {
if (this.gameStatus) {
this.BumpGround("1")
$(".bird").style.top = `${parseInt($(".bird").style.top) + this.birdDownSpeed}px`;
}
}, 1000 / 16)
click("body", () => {
if (this.gameStatus) {
this.BumpGround("2")
clcikTime = (new Date()).getTime()
$(".bird").add("up")
$(".bird").remove("down")
$(".bird").style.top = `${parseInt($(".bird").style.top) - this.birdUpSpeed}px`
}
})
setInterval(() => {
if (this.gameStatus) {
currentTime = (new Date()).getTime();
if (currentTime - clcikTime > 300) {
$(".bird").add("down")
$(".bird").remove("up")
}
}
}, 300)
}
groundAction() {
$(".groundOne").style.left = '0px';
$(".groundTwo").style.left = `${this.innerWidth}px`;
setInterval(() => {
$(".groundOne").style.left = `${parseInt($(".groundOne").style.left) - this.groundSpeed}px`
$(".groundTwo").style.left = `${parseInt($(".groundTwo").style.left) - this.groundSpeed}px`
if (parseInt($(".groundOne").style.left) <= -this.innerWidth) {
$(".groundOne").style.left = `${this.innerWidth}px`
}
if (parseInt($(".groundTwo").style.left) <= -this.innerWidth) {
$(".groundTwo").style.left = `${this.innerWidth}px`
}
}, 1000 / 16)
}
createdWaterPipe() {
var totalWaterPipeHeight = this.innerHeight - 112 - this.WaterPipeClearance;
var TopWaterPipeHeight = Math.random() * totalWaterPipeHeight;
if (TopWaterPipeHeight) {
TopWaterPipeHeight = Math.random() * (totalWaterPipeHeight * 0.667)
}
var BottomWaterPipeHeight = totalWaterPipeHeight - TopWaterPipeHeight;
if (this.WaterPipeX == 0) {
this.WaterPipeX = this.innerWidth
} else {
this.WaterPipeX += this.WaterPipeLeftRightClearance
}
var cretedImg = (type) => {
var img = document.createElement("img");
img.src = `./img/${type == "top" ? 'sg_t' : 'sg_b'}.png`;
img.className = "sg"
img.style = `
${type}: ${type == "top" ? 0 : 112}px;
height: ${type == "top" ? TopWaterPipeHeight : BottomWaterPipeHeight}px;
left: ${this.WaterPipeX}px
`;
return img
}
var TopWaterPipe = cretedImg("top")
var BottomWaterPipe = cretedImg("bottom")
$("body").appendChild(TopWaterPipe)
$("body").appendChild(BottomWaterPipe)
this.WaterPipeMove(TopWaterPipe)
this.WaterPipeMove(BottomWaterPipe)
}
WaterPipeMove(img) {
img.time = setInterval(() => {
img.style.left = `${parseInt(img.style.left) - this.groundSpeed}px`
if (parseInt(img.style.left) <= -55) {
try {
clearInterval(img.time)
$("body").removeChild(img)
} catch (error) { }
} else {
this.collision($(".bird"), img)
}
}, 1000 / 30)
}
/**
* 碰撞检测
* @param {*} el1 鸟
* @param {*} el2 水管
*/
collision(el1, el2) {
if (el1.offsetLeft < el2.offsetLeft + el2.offsetWidth &&
el1.offsetLeft + el1.offsetWidth > el2.offsetLeft &&
el1.offsetTop < el2.offsetTop + el2.offsetHeight &&
el1.offsetHeight + el1.offsetTop > el2.offsetTop
) {
this.gameOver();
} else {
if ((el2.offsetLeft + el2.offsetWidth) == 100) {
this.TotalScore += 0.5
if (!String(this.TotalScore).includes(".")) {
$(".point").play()
this.resultAction()
if (this.TotalScore >= 10) {
$("body").style.backgroundImage = `
url("./img/back_dark.png")
`
}
}
}
}
}
gameOver() {
$(".hit").play()
this.changeGameStatus()
_(".sg").forEach(v => clearInterval(v.time))
var gameOver = document.createElement("img")
gameOver.src = "./img/gameover.png"
$(".start").replaceChild(gameOver, $(".logo"))
click(".play", () => location.reload())
}
}
new bird()

View File

@@ -0,0 +1,29 @@
class Util {
inject() {
Element.prototype.remove = function (removeClassName) {
this.classList.remove(removeClassName);
}
Element.prototype.add = function (addClassName) {
this.classList.add(addClassName);
}
}
click(className,callback) {
$(className).onclick = () => {
callback()
}
}
$(className) {
return document.querySelector(className)
}
_(className) {
return document.querySelectorAll(className)
}
}
var { $, _, click, inject } = new Util()
inject()

View File

@@ -0,0 +1 @@
作业之一 换鸟的主题

View File

@@ -0,0 +1,50 @@
<!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: 30000px;
}
.header {
width: 100%;
height: 50px;
background: red;
}
.fixed {
position: fixed;
width: 100%;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div class="header"></div>
</body>
<script>
var header = $(".header");
$("body").onscroll = function () {
if (document.documentElement.scrollTop > 100) {
header.className = "header fixed"
} else {
header.className = "header"
}
console.log("页面被滚动了");
}
function $(className) {
return document.querySelector(className)
}
</script>
</html>

View File

@@ -0,0 +1,193 @@
<!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 {
margin: 0;
padding: 0;
width: 100%;
height: 100vh;
}
img {
width: 80px;
height: 96px;
position: fixed;
top: -96px;
}
.dialog {
position: fixed;
width: 100%;
height: 100%;
background: #0000008c;
z-index: 9999;
display: none;
}
.center {
width: 40%;
background: #fff;
padding: 15px 10px;
border-radius: 4px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.title {
height: 40px;
line-height: 40px;
border-bottom: 1px solid #ebe9e9;
}
.content {
padding: 20px 0;
text-align: center;
}
.footer {
display: flex;
justify-content: flex-end;
}
.footer .ok {
padding: 3px 15px;
background: #2a6bf4;
color: #fff;
font-size: 13px;
border-radius: 4px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="dialog">
<div class="center">
<div class="title">提示</div>
<div class="content"></div>
<div class="footer">
<div class="ok">确定</div>
</div>
</div>
</div>
</body>
<script>
// 1 随机创建 红包
// 获取屏幕宽度(x),减去 红包的宽度,高度-
// 2 红包运动
//
// 3 点击开红包
//
var { clientWidth, clientHeight } = document.body;
var createdNumber = null, clickImg = null, count = 0;
// 创建红包
function CreatedHb() {
var img = document.createElement("img");
var x = Math.random() * (clientWidth - 80)
img.src = "./hb.png";
img.move = 0;
img.style.left = `${x}px`;
img.onclick = () => {
count += 1;
if (count <= 3) {
clickImg = img;
clearInterval(createdNumber)
_("img").forEach(v => {
clearTimeout(v.time)
})
WinPrize();
} else {
$(".content").innerText = "三次抽奖已经用完"
$(".dialog").style.display = "block"
}
}
$("body").appendChild(img)
motion(img, -96)
}
function WinPrize() {
$(".dialog").style.display = "block"
var num = Math.random();
if (num > 0 && num <= 0.5) {
$(".content").innerText = "恭喜您中了九折"
} else if (num > 0.51 && num <= 0.995) {
$(".content").innerText = "恭喜您中了八折"
} else {
$(".content").innerText = "恭喜您中了五折"
}
}
// 关闭按钮
$(".footer .ok").onclick = () => {
$(".dialog").style.display = "none"
$("body").removeChild(clickImg)
clearTimeout(clickImg.time)
_("img").forEach(v => {
motion(v, -96)
})
auto();
}
function motion(el, top) {
el.time = setTimeout(function fn() {
el.move += 4;
if (el.move > (clientHeight + 96)) {
$("body").removeChild(el)
clearTimeout(el.time)
} else {
el.style.top = `${top + el.move}px`
el.time = setTimeout(fn, 1000 / 60)
}
}, 1000 / 60)
}
function $(className) {
return document.querySelector(className)
}
function _(className) {
return document.querySelectorAll(className)
}
function auto() {
createdNumber = setInterval(() => {
CreatedHb()
}, 500)
}
auto()
</script>
</html>

View File

@@ -0,0 +1,81 @@
const request = require('request');
const iconv = require('iconv-lite');
const cheerio = require('cheerio');
const fs = require('fs');
// var Iconv = require('iconv').Iconv;
var baseUrl = 'https://pic.netbian.com';
// 1034 页,主要存放 页面地址的
var pageArr = [];
var pageIndex = 0
var hrefArr = [];
var hrefIndex = 0;
for (var i = 1; i <= 100; i++) {
if (i == 1) {
pageArr.push(baseUrl)
} else {
pageArr.push(`${baseUrl}/index_${i}.html`)
}
}
console.log("pageArr: ", pageArr);
function requestPage() {
getHtml(pageArr[pageIndex], ($) => {
$(".slist li").each(function (index, ele) {
if (!$(this).hasClass("nextpage")) {
hrefArr.push(
`${baseUrl}${$(this).find("a").attr("href")}`
)
}
})
requestInfo()
console.log("hrefArr: ", hrefArr);
})
}
function requestInfo() {
getHtml(hrefArr[hrefIndex], ($) => {
request(`${baseUrl}${$(".photo-pic img").attr("src")}`)
.pipe(
fs.createWriteStream(`./img/${ Math.random() * 1000000 + `${Date.now()}` }.jpg`)
)
hrefIndex += 1;
if (hrefIndex < hrefArr.length) {
requestInfo()
} else {
pageIndex += 1
if (pageIndex < pageArr.length) {
requestPage()
}
}
})
}
function getHtml(url, callback) {
request({
uri: url,
method: 'GET',
encoding: 'binary'
}, function (error, response, body) {
var str2 = iconv.decode(new Buffer(body, 'binary'), 'gbk');
const $ = cheerio.load(str2);
callback($)
});
}
requestPage()

View File

@@ -0,0 +1,17 @@
{
"name": "pc",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "node index.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"cheerio": "^1.0.0-rc.12",
"iconv-lite": "^0.6.3",
"request": "^2.88.2"
}
}

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 @@
# vuecli2study
> 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
```
[百度](https://github.com/postcss/postcss-load-config)

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,98 @@
'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'),
'@page': resolve('src/assets/less/page'),
'@mixins': resolve('src/assets/less/mixins'),
}
},
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: /\.less$/,
loader: "style-loader!css-loader!less-loader"
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 100,
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]')
}
}
]
},
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: [`Your application is running here: 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,76 @@
'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: 8080, // 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,38 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>vuecli2study</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
<script>
class car {
red = "颜色";
big = "大小"
start() {
console.log("car 启动");
}
stop() {
console.log("car 停止");
}
}
class minCar extends car {
red = "白色";
start() {
console.log("minCar 启动");
}
}
var a = new minCar()
a.start()
</script>
</html>

View File

@@ -0,0 +1,79 @@
{
"name": "vuecli2study",
"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": {
"axios": "^0.27.2",
"vant": "^2.12.48",
"vue": "^2.5.2",
"vue-router": "^3.0.1",
"amfe-flexible": "^2.2.1"
},
"devDependencies": {
"less": "^4.1.2",
"less-loader": "^4.1.0",
"postcss-pxtorem": "^5.1.1",
"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",
"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-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,18 @@
<template>
<div id="app">
<img src="../static/logo.png">
<router-link to="/">首页</router-link>
<router-link to="/about">我的</router-link>
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style lang="less">
@import "~@mixins/clear";
</style>

View File

@@ -0,0 +1,75 @@
import { Axios } from "axios";
import config from "@/config";
import { Toast } from 'vant';
class Api extends Axios {
constructor() {
super({
baseURL: config.checkBaseUrl(),
timeout: 10000,
headers: {
"Content-Type": "application/json; charset=utf-8;"
}
})
this.inter()
}
async getRequest(params) {
return await this.get(params.url, {
params: params.data,
headers: params.header
})
}
async postRequest(params) {
return await this.post(params.url, params.data, {
headers: params.header
})
}
inter() {
// 添加请求拦截器
this.interceptors.request.use(function (config) {
Toast.loading({
duration: 0,
message: '加载中..'
});
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
this.interceptors.response.use(function (response) {
Toast.clear();
response.data = JSON.parse(response.data)
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;
}
// 2xx 范围内的状态码都会触发该函数。
// 对响应数据做点什么
return response;
}, function (error) {
// 超出 2xx 范围的状态码都会触发该函数。
// 对响应错误做点什么
return Promise.reject(error);
});
}
}
export default new Api()

View File

@@ -0,0 +1,4 @@
@import "./color.less";
@import "./size.less";

View File

@@ -0,0 +1,73 @@
@black: #000;
@white: #fff;
@gray-1: #f7f8fa;
@gray-2: #f2f3f5;
@gray-3: #ebedf0;
@gray-4: #dcdee0;
@gray-5: #c8c9cc;
@gray-6: #969799;
@gray-7: #646566;
@gray-8: #323233;
@red: #ee0a24;
@blue: #1989fa;
@orange: #ff976a;
@orange-dark: #ed6a0c;
@orange-light: #fffbe8;
@green: #07c160;
// Gradient Colors
@gradient-red: linear-gradient(to right, #ff6034, #ee0a24);
@gradient-orange: linear-gradient(to right, #ffd01e, #ff8917);
// Component Colors
@primary-color: var(--van-blue);
@success-color: var(--van-green);
@danger-color: var(--van-red);
@warning-color: var(--van-orange);
@text-color: var(--van-gray-8);
@text-color-2: var(--van-gray-6);
@text-color-3: var(--van-gray-5);
@text-link-color: #576b95;
@active-color: var(--van-gray-2);
@active-opacity: 0.6;
@disabled-opacity: 0.5;
@background-color: var(--van-gray-1);
@background-color-light: var(--van-white);
// Padding
@padding-base: 4px;
@padding-xs: @padding-base * 2;
@padding-sm: @padding-base * 3;
@padding-md: @padding-base * 4;
@padding-lg: @padding-base * 6;
@padding-xl: @padding-base * 8;
// Font
@font-size-xs: 10px;
@font-size-sm: 12px;
@font-size-md: 14px;
@font-size-lg: 16px;
@font-weight-bold: 500;
@line-height-xs: 14px;
@line-height-sm: 18px;
@line-height-md: 20px;
@line-height-lg: 22px;
@base-font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue',
Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB',
'Microsoft Yahei', sans-serif;
@price-integer-font-family: Avenir-Heavy, PingFang SC, Helvetica Neue, Arial,
sans-serif;
// Animation
@animation-duration-base: 0.3s;
@animation-duration-fast: 0.2s;
@animation-timing-function-enter: ease-out;
@animation-timing-function-leave: ease-in;
// Border
@border-color: var(--van-gray-3);
@border-width-base: 1px;
@border-radius-sm: 2px;
@border-radius-md: 4px;
@border-radius-lg: 8px;
@border-radius-max: 999px;

View File

@@ -0,0 +1,19 @@
@f12: 12px;
@f13: 13px;
@f14: 14px;
@f15: 15px;
@f16: 16px;
@f17: 17px;
@f18: 18px;
@f19: 19px;
@f20: 20px;
@f21: 21px;
@f22: 22px;
@f23: 23px;
@f24: 24px;
@f25: 25px;
@f26: 26px;
@f27: 27px;
@f28: 28px;
@f29: 29px;
@f30: 30px;

View File

@@ -0,0 +1,111 @@
@import "../config/color.less";
:root {
// Color Palette
--van-black: @black;
--van-white: @white;
--van-gray-1: @gray-1;
--van-gray-2: @gray-2;
--van-gray-3: @gray-3;
--van-gray-4: @gray-4;
--van-gray-5: @gray-5;
--van-gray-6: @gray-6;
--van-gray-7: @gray-7;
--van-gray-8: @gray-8;
--van-red: @red;
--van-blue: @blue;
--van-orange: @orange;
--van-orange-dark: @orange-dark;
--van-orange-light: @orange-light;
--van-green: @green;
// Gradient Colors
--van-gradient-red: @gradient-red;
--van-gradient-orange: @gradient-orange;
// Component Colors
--van-primary-color: @primary-color;
--van-success-color: @success-color;
--van-danger-color: @danger-color;
--van-warning-color: @warning-color;
--van-text-color: @text-color;
--van-text-color-2: @text-color-2;
--van-text-color-3: @text-color-3;
--van-text-link-color: @text-link-color;
--van-active-color: @active-color;
--van-active-opacity: @active-opacity;
--van-disabled-opacity: @disabled-opacity;
--van-background-color: @background-color;
--van-background-color-light: @background-color-light;
// Padding
--van-padding-base: @padding-base;
--van-padding-xs: @padding-xs;
--van-padding-sm: @padding-sm;
--van-padding-md: @padding-md;
--van-padding-lg: @padding-lg;
--van-padding-xl: @padding-xl;
// Font
--van-font-size-xs: @font-size-xs;
--van-font-size-sm: @font-size-sm;
--van-font-size-md: @font-size-md;
--van-font-size-lg: @font-size-lg;
--van-font-weight-bold: @font-weight-bold;
--van-line-height-xs: @line-height-xs;
--van-line-height-sm: @line-height-sm;
--van-line-height-md: @line-height-md;
--van-line-height-lg: @line-height-lg;
--van-base-font-family: @base-font-family;
--van-price-integer-font-family: @price-integer-font-family;
// Animation
--van-animation-duration-base: @animation-duration-base;
--van-animation-duration-fast: @animation-duration-fast;
--van-animation-timing-function-enter: @animation-timing-function-enter;
--van-animation-timing-function-leave: @animation-timing-function-leave;
// Border
--van-border-color: @border-color;
--van-border-width-base: @border-width-base;
--van-border-radius-sm: @border-radius-sm;
--van-border-radius-md: @border-radius-md;
--van-border-radius-lg: @border-radius-lg;
--van-border-radius-max: @border-radius-max;
}
body,h1,h2,h3,h4,h5,h6,ul,li,p {
margin: 0;
padding: 0;
}
body {
/* font-size: 0; */
}
li {
list-style: none;
}
input {
border: none;
outline: none;
padding: 0;
flex: 1;
margin: 0 10px;
border-radius: 20px;
height: 32px;
}
a {
text-decoration: none;
color: #333;
}
::-webkit-scrollbar {
width: 0;
height: 0;
}
img {
width: 100%;
}

View File

@@ -0,0 +1,68 @@
@import "../config/_.less";
.clearfix() {
&:after,
&:before {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
.ellipsis() {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.no-scrollbar() {
&::-webkit-scrollbar {
display: none !important;
width: 0 !important;
height: 0 !important;
-webkit-appearance: none;
opacity: 0 !important;
}
}
.hairline-common() {
position: absolute;
box-sizing: border-box;
content: ' ';
pointer-events: none;
}
.hairline(@color: var(--van-border-color)) {
.hairline-common();
top: -50%;
right: -50%;
bottom: -50%;
left: -50%;
border: 0 solid @color;
transform: scale(0.5);
}
.hairline-top(@color: var(--van-border-color), @left: 0, @right: 0) {
.hairline-common();
top: 0;
right: @right;
left: @left;
border-top: 1px solid @color;
transform: scaleY(0.5);
}
.hairline-bottom(@color: var(--van-border-color), @left: 0, @right: 0) {
.hairline-common();
right: @right;
bottom: 0;
left: @left;
border-bottom: 1px solid @color;
transform: scaleY(0.5);
}

View File

@@ -0,0 +1,9 @@
@import "../config/_.less";
@import "../mixins/index.less";
.home {
h2 {
color: @green;
font-size: @f20;
.ellipsis();
}
}

View File

@@ -0,0 +1,21 @@
export default {
devBaseUrl: 'http://127.0.0.1:3000/api/json',
prodBaseUrl: 'http://127.0.0.1:3000/api/json/prod',
apiList: {
mechanismList: '/mechanismList'
},
checkBaseUrl() {
switch (process.env.NODE_ENV) {
case "development":
return this.devBaseUrl
break;
case "production":
return this.prodBaseUrl
break;
default:
break;
}
}
}

View File

@@ -0,0 +1,20 @@
import 'amfe-flexible'
import Vue from 'vue'
import App from './App'
import router from './router'
import _ from './serve/_'
import Vant from 'vant'
import 'vant/lib/index.css'
Vue.prototype.$http = _
Vue.config.productionTip = false
Vue.use(Vant);
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})

View File

@@ -0,0 +1,13 @@
<template>
<div class="about">我的</div>
</template>
<script>
export default {
}
</script>
<style lang="less" scoped>
@import "~@page/About";
</style>

View File

@@ -0,0 +1,33 @@
<template>
<div class="home">
<h2>首页</h2>
<van-button type="info">信息按钮</van-button>
</div>
</template>
<script>
export default {
data() {
return {
}
},
created() {
this.getData()
},
methods: {
async getData() {
var res = await this.$http.index.getMechanismList({
page: 1,
id: 82
});
console.log(res);
}
}
}
</script>
<style lang="less" scoped>
@import "~@page/Home";
</style>

View File

@@ -0,0 +1,19 @@
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.vue')
},
{
path: '/about',
name: 'About',
component: () => import(/* webpackChunkName: "About" */ '@/page/About.vue')
}
]
})

View File

@@ -0,0 +1,5 @@
import HomeServe from "./home";
export default {
index: new HomeServe()
}

View File

@@ -0,0 +1,11 @@
import api from "@/api/api";
import config from "@/config";
export default class HomeServe {
async getMechanismList(data = {}, header = {}) {
return await api.getRequest({
url: config.apiList.mechanismList,
data, header
})
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.7 KiB

View File

@@ -0,0 +1,34 @@
build/ vuecli 脚手架的核心配置文件之一,主要用来实现项目的基础配置,和打包配置
config/ vuecli脚手架的配置文件
dist/ 项目打包后产生的文件,一般上线到服务器给用户访问用的
node_modules/ 项目的依赖文件夹
src/ 项目的核心源码
assets/ 需要webpack处理才可以运行的文件(小文件),例如 css 文件
components/ 组件
page/ 存放被用户访问到的页面
router/ vue-router 路径配置文件
App.vue 网站最顶级的父组件
main.js 项目的入口(启动)文件
static/ 存放静态资源(css,图片,等...)
.babelrc 插件babel的配置文件
js es5 es6,7,8,9... 高版本
.editorconfig 编辑器的配置文件
.eslintignore eslint 的忽略文件
.eslintrc.js eslint 的配置文件
.gitignore git的忽略文件
.postcssrc.js postcss 的插件
index.html 网站唯一的html
package.json 项目配置文件
README.md 帮助文档 markdown
webpack 来打包构建项目
map sourceMap 源码地图
vue 插件
非vue插件 vue-resource axios // TODO 明天讲解
// TODO 带你们手动搭建vue的运行环境

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