1、配置less和ant
yarn add webpack@4.44.2：注意版本，高版本出现问题
yarn add less-loader：less解析插件
yarn ejcet：暴露配置信息
yarn add antd
config/webpack.config.js设置参考：https://blog.csdn.net/yoonerloop/article/details/115361998
2、Promise
是异步编程的一种解决方案，其实是一个构造函数，自己身上有all、reject、resolve这几个方法，原型上有then、catch等方法。
（1）当new Promise()执行之后，promise对象的状态会被初始化为pending，这个状态是初始化状态。new Promise()这行代码，括号里的内容是同步执行的。括号里定义一个function，function有两个参数：resolve和reject。如下：
如果请求成功了，则执行resolve()，此时，promise的状态会被自动修改为fullfilled。
如果请求失败了，则执行reject()，此时，promise的状态会被自动修改为rejected
（2）promise.then()方法，括号里面有两个参数，分别代表两个函数 function1 和 function2：
如果promise的状态为fullfilled（意思是：如果请求成功），则执行function1里的内容
如果promise的状态为rejected（意思是，如果请求失败），则执行function2里的内容
另外，resolve()和reject()这两个方法，是可以给promise.then()传递参数的。
-
//设置Promise
-
let promise =
new
Promise(
(resolve, reject) => {
-
if (!err) {
-
resolve(data)
-
}
else {
-
reject(err)
-
}
-
})
-
})
-
-
//回调Promise
-
promise.then(
(res) => {
-
console.log(
JSON.stringify(res)+
'----1--')
-
},
(error)=>{
-
console.log(
JSON.stringify(error)+
'-----2---')
-
}).catch(
(error) => {
-
console.log(
JSON.stringify(error)+
'------3---')
-
})
其他常用API：
Promise 自带的API提供了如下对象方法。
Promise.all()：并发处理多个异步任务，所有任务都执行成功，才能得到结果。
-
Promise.all([promise1, promise2, promise3]).then(
result => {
-
console.log(result);
-
});
Promise.race(): 并发处理多个异步任务，只要有一个任务执行成功，就能得到结果。
-
Promise.race([promise1, promise2, promise3]).then(
result => {
-
console.log(result);
-
});
3、配置jsonp
jsonp一般进行二次封装，写成工具类使用。
yarn add jsonp
-
import JsonP
from
'jsonp'
-
-
export
default
class request {
-
static jsonp(options) {
-
return
new
Promise(
(resolve, reject) => {
-
JsonP(options.url, {
-
param:
'callback',
-
},
(err, data) => {
-
if (!err) {
-
resolve(data)
-
}
else {
-
reject(err)
-
}
-
})
-
})
-
}
-
}
使用：
-
import request
from
"../../request/index";
-
-
getWeather() {
-
request.jsonp({
-
url:
'http://api.k780.com/?app=weather.today&weaid=1&appkey=10003&sign=b59bc3ef6191eb9f747dd4e83c99f2a4&format=json',
-
}).then(
(res) => {
-
console.log(
JSON.stringify(res)+
'----1--')
-
},
(error)=>{
-
console.log(
JSON.stringify(error)+
'-----2---')
-
}).catch(
(error) => {
-
console.log(
JSON.stringify(error)+
'------3---')
-
})
-
}
4、时间显示
-
export
default {
-
formatDate(time) {
-
if (!time) {
-
return
'';
-
}
-
let data =
new
Date(time)
-
return data.getFullYear()
-
+
'-' + (data.getMonth() +
1)
-
+
'-' + data.getDate()
-
+
' ' + data.getHours()
-
+
':' + data.getMinutes()
-
+
':' + data.getSeconds();
-
}
-
}
-
componentWillMount() {
-
setInterval(
() => {
-
let systemTime = Util.formatDate(
new
Date().getTime())
-
this.setState({systemTime})
-
},
1000);
-
}
5、倒三角实现
使用css3伪类选择器实现
-
.title {
-
text-align: center;
-
font-size:
18px;
-
&:after {
-
position: absolute;
-
content:
'';
-
left:
50px;
-
border-top:
9px solid red;
-
border-left:
12px solid transparent;;
-
border-right:
12px solid transparent;;
-
top:
39px;
-
left:
96px;
-
}
-
}
6、全局资源设置
定义default.less：
-
/** 常用色值 **/
-
@color1: #f9c700;
-
@color2: #ff5400;
-
-
/** 常用字体大小 **/
-
@font1:
34px;
-
@font2:
20px;
使用：
-
@
import
"../../style/default";
-
-
.home {
-
height:calc(
70vh);
-
width: calc(
100%);
-
display: flex;
-
align-items: center;
-
justify-content: center;
-
font-size: @font2;
-
background-color: @color1;
-
}
7、项目源码
https://download.csdn.net/download/yoonerloop/16725861
8、效果图
转载：https://blog.csdn.net/yoonerloop/article/details/115786114