通用UI布局，样式开发

新建CSS文件

在common文件夹中新建CSS文件，layout.css

在common/index.js中引用一下：

require('./layout.css');

重写通用头文件

view/layout/html-head重命名为head-common.html,内容修改为：

 <meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="keywords" content="happymall,电商">
<meta name="description" content="happhappymall电商开发教程">

同时index.html也做相应修改：

 <!doctype html>
  <html lang="en">
    <head>
  	   <%= require('html-loader!./layout/head-common.html')  %>
  	 <title>我的第一个 HTML 页面</title>

    </head>
  
  	<body>
  		hello 123456
  		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  	
  	</body>
  </html>

Ctrl+Shift+ P :setsyntax:html可设置自动补全

新建通用尾文件

我们发现上文中的script代码也是各个网页通用的，把它放在新建的通用尾文件中。

view/layout/footer.html:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

index.html:

 <!doctype html>
  <html lang="en">
    <head>
  	   <%= require('html-loader!./layout/head-common.html')  %>
  	   <title>我的第一个 HTML 页面</title>
    </head>
  
  	<body>
  		 <%= require('html-loader!./layout/footer.html')  %>
  	</body>
  </html>

全局通用样式

layout.css中添加：

/*css reset */
*{
	margin:0;
	padding:0;

}
body{
	background: #f6f6f6;
	font:12px/1.5 tahoma,arial,Microsoft Yahei,sans-serif;

}

li{
	list-style: none;

}
img{
	display: block;
	border:none;
}
label{
	cursor:pointer;
}
input[type='checkbox']{
	cursor:pointer;
}

/*定宽布局*/

.w {
	width:1080px;
	margin:0 auto;
	position: relative;
	overflow:hidden;
}
/*全局通用样式*/
/* 隐藏类 */
.hide{
	display:none;
}
/* 超链样式 */
.link {
	color:#999;
	cursor:pointer;
	text-decoration: none;
}
.link:hover {
	color:#e80012;
}
.link-text{
	color:#999;
	text-decoration: none;
}

index.html中添加：

<a class="link">test</a>
<a class="link-text">test</a>

添加按钮和等待图片

在image中新建icon目录，

在icon目录中添加图片loading.gif

layout.css中添加：

/* btn */
.btn{
	display: inline-block;
	padding:0 20px;
	height:40px;
	line-height:40px;
	vertical-align: middle;
	border:none;
	background: #c60023;
	font-size:17px;
	font-weight: bold;
	color:#fff; 
	outline:none;
	cursor:pointer;
	text-decoration: none;
}
.btn-mini{
	height: 25px;
	line-height: 25px;
	font-size: 12px;
	padding:0 10px;
}
/* loading */
.loading{
	margin: 10px auto;
	display: block;
	width: 65px;
	height: 65px;
	border: 1px solid #ddd;
	border-radius: 5px;
	background:url(../../image/icon/loading.gif) no-repeat;
	opacity:.6;

}

index.html中添加：

<div>
  			<a class="btn">test</a>
  	        <a class="btn btn-mini">test</a>
  		</div>
  		<div>
  			<a class="loading">test</a>
  	        
  		</div>

添加font-awesome

(这一节尚未做成功。）

执行命令：

$ npm install font-awesome@4.7.0 --save

在webpack.config.js中alias添加：

node_modules : __dirname + '/node_modules',

重启服务

npm run dev

在common/index.js中添加：

require('node_modules/font-awesome/css/font-awesome.min.css');

在index.html中添加:

<div>
  			<i class="fa fa-user"></i>
  		</div>

能看到一个小人。