初学者怎么做项目

项目分类

小而专的项目

初学一种技术，专门针对它进行实践，写demo

比如初学ajax，学会了怎么发网络请求，学会了怎么异步请求数据。

  • 就可以调用google的搜索图书的api，专门写一个图书搜索的小项目

比如学了一个UI库，可以做一些小卡片

  • 也可以将结合几个小而专的技术在一起
  • 耗时一两天

大而全的项目

进阶，融合技术

  • JS => React
  • 耗时一两周

做什么项目

  • 有自己的想法（有想法很简单，但很多想法以初学者的角度，实现起来是很难的）
    • 有合适的想法
    • 大胆去做
    • 做自己喜欢的
    • 为自己做项目，每个项目都用心去打磨下
  • 自己没想法
    • 模仿+创新
    • 比如看板、微软的todo
      • 在模仿的基础上创新
    • 逛github
      • 怎么逛
    • 观察平时看的网页，想象这些页面都是怎么实现的，自己试试看

去哪儿找项目的idea

KelvinQiu802/project-ideas: 集合优质的项目仓库，找到适合你的项目。 (github.com)

推荐10个Vue 3.0开发的开源前端项目 - 知乎 (zhihu.com)

开发流程

环境搭建

确定好技术栈

基本配置

  • 重置样式表

  • 移动端适配：px2rem/fontsize动态设置

  • 引入网络库axios

    • 网络库基本封装
    • 接口封装

  • 引入ui库elementUI/Plus/vant

    • ui库基本封装
    • 按需导入配置

  • 引入图标字体

    • 选择图标字体
    • 引入

  • 引入常用的方法及混合

根据实际项目的不同，可能还要

  • 引入可视化库echarts
    • 实例化封装
    • setOption动态封装

基本框架

确定好基本的功能模块

  • 搭建路由组件、页面组件

功能模块注意点

登录注册

请求数据

  • 封装网络请求

  • 基于请求的数据，在取得promise结果后，在then中执行实例化方法，如echarts的实例化并setOption

  • 获取数据前，应加上视觉加载效果，通过判断数据是否为空，控制loading 类，注意其父元素应给一个绝对定位

    1
    2
    3
    4
    5
    6
    7
    8
    <template>
    	<div>
            <template>
    			<div class="loading"></div>
    		</template>
            <template> 实际数据渲染区域</template>
        </div>
    </template>
    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
    .loading {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;

        &:before,
        &:after {
            position: absolute;
            top: 50%;
            left: 50%;
            content: '';
        }

        &:before {
            margin: -48px 0 0 -25px;
            width: 50px;
            height: 50px;
            background: url('../assets/images/loading.svg') no-repeat center center;
            background-size: 100% 100%;
            animation: loadingMove 2s linear 0s infinite;
        }

        &:after {
            content: '努力加载中...';
            margin: 8px 0 0 -120px;
            width: 240px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            font-size: 12px;
            color: #676767;
        }

        @keyframes loadingMove {
            100% {
                transform: rotate(360deg);
            }
        }
    }

  • 也可以使用第三方插件，显示网络请求进度条

数据初始化

如何编写前端设计文档？ - 掘金 (juejin.cn)