关于前端工程化工具feikit的使用以及小案例

首先大家可以去下面网站去下载一些环境

https://github.com/rinh/fekit

fekit的前端工程化模板大概简单的如下图所示

首先我们需要在index.html中引入js和css文件，fekit可以实现scss自编译，所以我们采用scss编写样式文件

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>webapp</title>
		<link rel="stylesheet" type="text/css" href="/webapp/prd/styles/app.css"/>
	</head>
	<body>
	 <script src="/webapp/prd/scripts/app.js"></script>
		
	</body>
</html>

其次我们需要配置一下fekit.config配置文件

1
2
3
4
5
6
7
8
9
10
11
{
    "compiler": "modular",
    "name": "webapp",
    "version": "0.0.0",
    "dependencies": {},
    "alias": {},
    "export": [
    	"styles/app.scss",
    	"scripts/app.js"
    ]
}

styles下的文件保存的是我们的样式，我们的结构和js等文件保存在scripts文件夹下 我们需要在index.string文件中编写我们的结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<div class="container">
    <header>
        <ul>
            <li class="iconfont">&#xe619;</li>
            <li>
                <span class="active">膳食</span>
                <span>服装</span>
            </li>
            <li class="iconfont">&#xe619;</li>
        </ul>
    </header>
    <nav>
        <ul>
            <li class="active">足球小姐</li>
            <li>足球小姐</li>
            <li>足球小姐</li>
        </ul>
    </nav>
    <section>
    	<ul>
     <li><span><i><img src="/webapp/images/11.jpg"/></i><b>刘东</b></span></li>
	 <li><span><i><img src="/webapp/images/11.jpg"/></i><b>刘东</b></span></li>
	 <li><span><i><img src="/webapp/images/11.jpg"/></i><b>刘东</b></span></li>
	 <li><span><i><img src="/webapp/images/11.jpg"/></i><b>刘东</b></span></li>
	 <li><span><i><img src="/webapp/images/11.jpg"/></i><b>刘东</b></span></li>
	 <li><span><i><img src="/webapp/images/11.jpg"/></i><b>刘东</b></span></li>
	 <li><span><i><img src="/webapp/images/11.jpg"/></i><b>刘东</b></span></li>
	 <li><span><i><img src="/webapp/images/11.jpg"/></i><b>刘东</b></span></li>
	 <li><span><i><img src="/webapp/images/11.jpg"/></i><b>刘东</b></span></li>
	 <li><span><i><img src="/webapp/images/11.jpg"/></i><b>刘东</b></span></li>
    	</ul>
    </section>
    <footer>
    	<ul>
    		<li class="active">
    			<i class="iconfont">&#xe619;</i>
    			<b>首页</b>
    		</li>
    		<li>
    			<i class="iconfont">&#xe619;</i>
    			<b>发现</b>
    		</li>
    		<li>
    			<i class="iconfont">&#xe619;</i>
    		</li>
    		<li>
    			<i class="iconfont">&#xe619;</i>
    			<b>我的</b>
    		</li>
    		<li>
    			<i class="iconfont">&#xe619;</i>
    			<b>退出</b>
    		</li>
    	</ul>
    </footer>
</div>

在app.js种 引入以上内容

1
2
3
4
var indexTpl = require('./tpls/index.string');

var body = document.querySelector('body');
body.innerHTML += indexTpl;

index.scss

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
.container {
    display: flex;
    height: 100%;
    flex-direction: column;
    > * {
        width: 100%;
    }
    header {
        height: 44px;
        ul {
            width: 100%;
            height: 100%;
            display: flex;
            background: $baseColor;
            li {
                display: flex;
                justify-content: center;
                align-items: center;
                height: 100%;
                &:not(:nth-child(2)) {
                    width: 44px;
                    font-size: 26px;
                    color: #fff;
                    opacity: 0.5;
                }
                &:nth-child(2) {
                    flex: 1;
                }
                span {
                    width: 60px;
                    height: 25px;
                    background: pink;
                    font-size: 16px;
                    line-height: 25px;
                    text-align: center;
                    &.active {
                        background: #64d985;
                        color: #fff;
                    }
                    &:not(.active) {
                        background: rgba(100,217,133,0.5);
                        color: rgba(255,255,255,0.5);
                    }
                    &:first-child {
                        border-radius: 10px 0 0 10px;
                        background: #64d985;
                        color: #fff;
                    }
                    &:last-child {
                        border-radius: 0 10px 10px 0;
                        background: rgba(100,217,133,0.5);
                        color: rgba(255,255,255,0.5);
                    }
                }
            }
        }
    }
    nav {
        height: 35px;
        ul {
            width: 100%;
            height: 100%;
            display: flex;
            line-height: 35px;
            text-align: center;
            li {
                flex: 1;
                border-bottom: 0.5px solid #d9d9d9;
                &.active {
                    border-bottom: 2px solid $baseColor;
                    color: $baseColor;
                }
            }
        }
    }
    section {
        flex: 1;
        overflow-y: scroll;
        ul {
            display: flex;
            width: 100%;
            height: 100%;
            flex-wrap: wrap;
            align-content: flex-start;
            li {
                width: 50%;
                padding: 2px;
                &:nth-child(odd) {
                    padding: 5px 2.5px 0 0;
                }
                &:nth-child(even) {
                    padding: 5px 0 0 2.5px;
                }
                &:nth-last-child(1),
                &:nth-last-child(2) {
                    padding-bottom: 5px;
                }
                span {
                    width: 100%;
                    display: block;
                    i,
                    b {
                        display: block;
                        font-weight: normal;
                        font-size: 14px;
                        img {
                            width: 100%;
                        }
                    }
                    b {
                        padding: 3px;
                    }
                }
            }
        }
    }
    footer {
        height: 44px;
        ul {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            border-top: solid 0.5px #d9d9d9;
            li {
                flex: 1;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                &.active b,
                &.active i {
                    color: $baseColor;
                }
                b,
                i {
                    font-weight: normal;
                    font-size: 12px;
                    color: #d6d6d6;
                }
                i {
                    font-size: 24px;
                }
                &:nth-child(3) {
                    i {
                        position: relative;
                        z-index: 99;
                        background: #fff;
                        width:54px;
                        height:54px;  
                         border-radius: 50%; 
                         top:-6px;
                         text-align: center;
                         line-height: 54px;
                        &::after {
                            content: '';
                            position: absolute;
                            width: 50px;
                            height: 50px;
                            border: solid 0.5px #d6d6d6;
                            border-radius: 50%;
                            left: 0;
                            top: 0;
                            z-index: 1;
                        }
                    }
                }
            }
        }
    }
}

在app.scss种引入index.scss等这些scss文件

1
2
3
4
5
6
7
8
9
@charset "UTF-8";

@import "./utils/common.util.scss";

@import "./utils/reset.scss";

@import "./modules/layout.scss";

@import "./modules/index.scss";

使用fekit启动服务 我们就可以运行以上代码 日后如果发线上 我们可以压缩一下，这样会产生prd文件夹 其他人看不到我们的src文件夹下编写的内容

大家可以去我的网站上下载源码

https://github.com/chongbenben/fekit-mobile-app