1.0 創(chuàng)建
npm init
- 初始化
npm install jquery --save
-
--save 會(huì)把信息保存到package.json里面
INIT
如果有package.json, npm init會(huì)安裝package里面的依賴
*這里想起來vscode如何調(diào)試html，直接搭建服務(wù)器既们，使用live-server
微信截圖_20180107164539.png
1.3結(jié)構(gòu)說明
*創(chuàng)建目錄舆吮，創(chuàng)建js/base.js
···
;(function(){
'use strict';
alert(1);
})();
···
不污染windows對(duì)象
微信截圖_20180107165437.png
- index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>TODO</title>
<link rel="stylesheet" href="css/base.css">
</head>
<body>
<div class="container">
<div class="add-task">
<input type="text">
<button>submit</button>
</div>
<div class="task-list">
<div class="task-item">
<span>
<input type="checkbox">
</span>
<span class="task-content">item content 1</span>
<span>delete</span>
<span>detail</span>
</div>
</div>
<div class="task-list">
<div class="task-item">
<span>
<input type="checkbox">
</span>
<span class="task-content">item content 1</span>
<span>delete</span>
<span>detail</span>
</div>
</div>
<div class="task-list">
<div class="task-item">
<span>
<input type="checkbox">
</span>
<span class="task-content">item content 1</span>
<span>delete</span>
<span>detail</span>
</div>
</div>
<div class="task-detail">
<div class="content"></div>
<div>
<div class="remind">
<input type="date">
<button type="submit">submit</button>
</div>
</div>
</div>
</div>
<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="js/base.js"></script>
</body>
</html>
- base.css
* {
background: rgba(0,0,0, 0.1)
}
body {
/* background: #000000; */
}
.container {
max-width: 900px;
margin: 0 auto;
}
成果：
微信截圖_20180107195220.png
3.1 細(xì)節(jié)完善
- css初始化,去掉默認(rèn)瀏覽器添加的CSS,常規(guī)化，該去掉的去掉。
normalize.css
npm install normalize.css --save
微信截圖_20180107195909.png
- 1月8號(hào)開始
微信截圖_20180108112213.png
