theme: channing-cyan
highlight: ally-light

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第1天，点击查看活动详情

前言

已有基础：虽然说是小白，但是本人曾在大一通过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弄了好几个除了那一处文本内容之外一模一样的页面）。
我个人觉得，虽然从用户的角度看，效果是一样的，但性能相差会有点大。

页面比较简单还好，如果这个大的页面本身很复杂呢？那局部渲染和全局重新渲染能一样吗？
用户网络状况良好的时候，可能察觉不出什么差异。但万一网卡了呢？看见切换个组件tab，页面都在转圈圈，体验就真不太好。

由于.vue文件无法直接打开，我最初没有得到后端接口的时候，比较纠结应该如何绕开登录校验，进去里面看到内容。

有人跟我说ta有办法。

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

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

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

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

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

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

第三步：借鉴学习，内化于心

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

修改页面样式。比如字体的大小、颜色、背景、更换图片等。
只需要在源代码中找到修改内容对应的位置，直接修改、替换图片即可。
增加或删除一些组件按钮、功能等。
这需要对项目原有的内容以及代码之间的联系有一定了解。通过与类似部分进行类比，明白增加/删除这一处之后，还有哪些部分的内容也要相应改动。
迁移
实现别的项目时，也可以借鉴之前项目的一些经验套路、或者有共通的组件也可以改一改来用。不是做了这个项目，就只会这个项目。