本文首发于稀土掘金。该平台的作者 逐光而行 也是本人。
前言
已有基础：虽然说是小白，但是本人曾在大一通过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的形式，但是选取的判断条件我个人认为有一点点瑕疵，导致没有对 无接口、直接跳转的情况 生效。后面我给修改过来了。
- 我们在写程序的时候不能仅从自己的角度出发。比如我们设置了登录，就不能为了登录而登录，而应该思考，登录和不登录，看到的内容的区别在哪里？用户有没有办法直接绕开这个限制？对此要做什么相应的措施？
第三步：借鉴学习，内化于心
我认为对一个前端项目的魔改，分为以下层次：
- 修改页面样式。比如字体的大小、颜色、背景、更换图片等。
只需要在源代码中找到修改内容对应的位置，直接修改、替换图片即可。
- 增加或删除一些组件按钮、功能等。
这需要对项目原有的内容以及代码之间的联系有一定了解。通过与类似部分进行类比，明白增加/删除这一处之后，还有哪些部分的内容也要相应改动。
- 迁移
实现别的项目时，也可以借鉴之前项目的一些经验套路、或者有共通的组件也可以改一改来用。不是做了这个项目，就只会这个项目。
写在最后
至于代码里涉及到的具体函数及其使用，这里就不再赘述了，其可以通过看官方文档来学习和掌握。
同时也应说明的是，这仅仅是小白的入门之言，而且我也暂无深耕前端的打算。对我来说，目标就是有机会去写后端，如果让我写前端，我也能完成，仅此而已。
所以文章中可能有很多理解得很浅薄的地方，让前端大佬们见笑了，希望大家多多包涵！
