开发者社区> jghybg64iaom6> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

小白如何从项目入手学习前端

简介: 前言 已有基础:虽然说是小白,但是本人曾在大一通过freecodecamp平台学习过html5、css中的标签、样式等知识,也曾经用js写过一些简单的算法题,并了解过ES6(不过因为不常用,相当于只记得名字了。
+关注继续查看
本文首发于稀土掘金。该平台的作者 逐光而行 也是本人。

前言

已有基础:虽然说是小白,但是本人曾在大一通过freecodecamp平台学习过html5、css中的标签、样式等知识,也曾经用js写过一些简单的算法题,并了解过ES6(不过因为不常用,相当于只记得名字了)

截止接触demo项目时的情况:学校有开设前端课程,本人上课也常坐前排听讲。奈何讲的都是一些很抽象的概念,再加上本人的理解能力比较一般,相当于雁过无痕,下了课就只记得名字了。

项目简要介绍:这是一个和购物商城相关的练手项目,使用vue2,用的是elementui的插件(如何判别呢?据说vue3用的是elementui-plus)

前置工作————熟悉项目

第一步:将项目跑起来

确认它到我手上的时候是能跑起来的。如果后面出现了问题,是我的操作问题(单机项目下),而不是别的问题。

  • 通过观察可知,该项目原始文件不大,只有几MB。这个时候项目是无法直接运行的。项目中有一个叫package.json的文件,里面记录了所有需要引入的依赖,包括element.ui。

真正使项目变得臃肿实现完整功能的是它引入的依赖,而不是编码文件本身。初级阶段我们相当于是搬运工。

那么如何安装依赖呢?一般前端的项目都是用npm或者yarn这类js 包管理器 来实现的。通过它们,可以执行依赖导入、项目运行等操作。

如果我们直接在终端输入npm install 会提示找不到这个命令,因为我们还没有安装npm。

那么如何安装npm呢?我们可以去node.js官网下载node.js,这是一个js的运行环境,node.js里面自带npm 。据说很多前端大佬都会用它来写后端,以实现全栈。

下载及验证是否下载成功的过程这里就不再赘述了。

  • 如果是从Github等开放平台找来的项目,我们可以先阅读一下里面的README文档,里面会有和文档操作有关的指导。比如这里启动项目的命令是:npm run dev
  • 但是如果README文档没写,也可以通过package.json的配置文件项中找到解答。
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js"
  },

scripts中的"dev"正是指代该名字。

明白了这一点,就不用再去搜索引擎搜"npm run serve报错"之类的内容了。

更换成淘宝镜像源

起因:好几次想要npm install都卡在半路,等几个小时都没好。问搞前端的同学,人家也说这确实不是技术问题而是网络问题,要么换源要么梯子。到最后终于忍无可忍,暂时用淘宝的源下载,结果不到30s就全部下好了。之后我索性把仓库就换成淘宝的,一劳永逸。以下是步骤:

对单个项目用淘宝源:

npm install --registry=https://registry.npm.taobao.org

将仓库换成淘宝的镜像

npm config set registry https://registry.npm.taobao.org

检查是否更换成功
npm config get registry

第二步:找到项目入口文件,梳理大致框架

项目的入口文件是main.js

里面import了一些外部的资源和项目中其他文件夹下自定义的组件;同时进行了一些全局性的设定。

项目采用的是单文件组件的形式,一个页面是一个.vue,里面有标签、样式(主要是ele-ui),以及响应方法(项目里用的是选项式)。

p.s. 配合Vue官方文档来看,很快就明白写法和套路了

这些单文件可以通过router连接起来。

关于router

我的理解:它和计网里面的router思想有点类似,都起到了 分发 的作用。
不过在这里,它侧重于定义 跳转 事件。

router在vue2的项目中是如何体现的呢?

  • 创建一个router文件夹,里面新建一个index.js文件,里面定义了所有可以被跳转的页面。

下面以一段代码作为例子。假如有在菜单栏点击一个按钮跳转到myCart这个页面组件的需要:

import Vue from 'vue'
import Router from 'vue-router'
import myCart from '../views/Mycart.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/myCart',
      name: 'myCart',
      component: myCart,
    },
  ]
})

在代码中指定跳转的路径以及名字,
然后在菜单栏对应的按钮代码中写入:

            <router-link to="/myCart">
             <!-- 里面写按钮的名称等 -->
            </router-link>

当用户点击该按钮时,就能跳转到myCart页面。

同时,观察浏览器显示的URL,也会发现它相应发生了变化。

这里讲两点我的思考。

  • 有一次实验课上,老师要求我们
在一个页面内的某个组件内,点击不同的选项,显示不同的文本

我之前刚学HTML的时候也写过这个。印象中原理其实只是对某段特定文本的显示和隐藏。
点击A按钮,就显示,点了别的按钮,这段就隐藏了,而新被点的按钮的元素又显示了。仅此而已。

那换到Vue里,也应该是一样的,最多也就是把这段代码封装简化一下,换个新名字。

比如我看这篇文章就写得不错。
亲测很实用:v-show实现tab切换

但是当时有同学用的是路由(ta弄了好几个除了那一处文本内容之外一模一样的页面)。
我个人觉得,虽然从用户的角度看,效果是一样的,但性能相差会有点大。

  1. 页面比较简单还好,如果这个大的页面本身很复杂呢?那局部渲染和全局重新渲染能一样吗?
  2. 用户网络状况良好的时候,可能察觉不出什么差异。但万一网卡了呢?看见切换个组件tab,页面都在转圈圈,体验就真不太好。
  • 由于.vue文件无法直接打开,我最初没有得到后端接口的时候,比较纠结应该如何绕开登录校验,进去里面看到内容。

有人跟我说ta有办法。

于是我看着ta查看了项目的路由文件,然后在URL里面输入了对应的路径。

我心想这都能行?那有经验的用户猜测某个页面会是什么名称,然后胡乱蒙一遍,也能以游客身份访问原本看不到的内容?

前端难道不应该对这两种情况分别处理吗?比如如果获取某个特定值为空,说明没有登录,展现的应该是另一种页面。后端的登录拦截也应该要发挥作用吧,可不能任这样胡来。

然后跳转过去之后发现一片空白,ta就跟我说我这项目不行,建议我找个好的。

顺着这个思路,我后面检查了一下代码文件,发现了问题所在,也有了新的收获。

  • 前端的区别处理确实是有的,而且是以v-if v-else-if v-else的形式,但是选取的判断条件我个人认为有一点点瑕疵,导致没有对 无接口、直接跳转的情况 生效。后面我给修改过来了。
  • 我们在写程序的时候不能仅从自己的角度出发。比如我们设置了登录,就不能为了登录而登录,而应该思考,登录和不登录,看到的内容的区别在哪里?用户有没有办法直接绕开这个限制?对此要做什么相应的措施?

第三步:借鉴学习,内化于心

我认为对一个前端项目的魔改,分为以下层次:

  • 修改页面样式。比如字体的大小、颜色、背景、更换图片等。

只需要在源代码中找到修改内容对应的位置,直接修改、替换图片即可。

  • 增加或删除一些组件按钮、功能等。

这需要对项目原有的内容以及代码之间的联系有一定了解。通过与类似部分进行类比,明白增加/删除这一处之后,还有哪些部分的内容也要相应改动。

  • 迁移

实现别的项目时,也可以借鉴之前项目的一些经验套路、或者有共通的组件也可以改一改来用。不是做了这个项目,就只会这个项目。

写在最后

至于代码里涉及到的具体函数及其使用,这里就不再赘述了,其可以通过看官方文档来学习和掌握。

同时也应说明的是,这仅仅是小白的入门之言,而且我也暂无深耕前端的打算。对我来说,目标就是有机会去写后端,如果让我写前端,我也能完成,仅此而已。

所以文章中可能有很多理解得很浅薄的地方,让前端大佬们见笑了,希望大家多多包涵!

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
系统学习前端----方向篇
系统学习前端----方向篇
0 0
serverless 学习 | QCon2022-深圳: 美团基于 Serverless 的前端研发体系建设和业务实践
serverless 学习 | QCon2022-深圳: 美团基于 Serverless 的前端研发体系建设和业务实践
0 0
【前端】学习前端vue框架,了解了什么是v-model
v-model指令可以在表单 input、textarea 及 select 元素上创建双向数据绑定。
0 0
Web前端学习:jQuery基础 · 小终结【异步处理AJAX】
Web前端学习:jQuery基础 · 小终结【异步处理AJAX】
0 0
Web前端学习:jQuery基础--3【jquery操作样式类名、添加元素、jQuery-CSS()方法】
Web前端学习:jQuery基础--3【jquery操作样式类名、添加元素、jQuery-CSS()方法】
0 0
Web前端学习:jQuery基础--2【jQuery事件、设置与获取HTML 】
Web前端学习:jQuery基础--2【jQuery事件、设置与获取HTML 】
0 0
Web前端学习:jQuery基础--1【简介和安装、语法使用、三种选选择器的使用(元素、class、id)】(附操作源码)
Web前端学习:jQuery基础--1【简介和安装、语法使用、三种选选择器的使用(元素、class、id)】(附操作源码)
0 0
Web前端学习:JavaScript基础 【HTML DOM操作】2
Web前端学习:JavaScript基础 【HTML DOM操作】
0 0
Web前端学习:JavaScript基础 【HTML DOM操作】
Web前端学习:JavaScript基础 【HTML DOM操作】
0 0
两年经验以下的web前端们需要注意什么?
前些年自己堆前端岗位的经验总结
0 0
文章
问答
文章排行榜
最热
最新
相关电子书
更多
万物互联语音交互从端开始——前端处理从技术到商业
立即下载
2022 前端技术趋势解读
立即下载
智能前端技术与实践
立即下载