教你0基础，速成web前端-一一网

「本文已参与好文召集令活动，点击查看：后端、大前端双赛道投稿，2万元奖池等你挑战！」

前言： 今年公司没什么移动前端的活，闲来无事，我也学习起了前端。从我的博客上也能看出端倪。看到掘金在搞征集好文的活动，我也来参加下。就来分享一下我学习前端的路线吧。（目前我解除了2-3个月了。vue框架，加上原生写官网已经算是成功入门了。希望能帮助想学习前端的同学）

接下来，详细说说我的步骤。它来了。

一、准备工作

打开百度，搜索菜鸟教程，把以下几处过一遍。当然了，重点是过一遍，其中你觉得感兴趣的可以好好看看。以后正式写的时候，不懂就来查。当然你又有空的时候还可以来过一遍。第二次过一遍的时候重点是就像读书时候的默写，不会了再查看。

建议开始用txt文本，如果你觉得没必要可以下载个vscode。具体本文是讲解思路和方法，就不对工具具体介绍。不懂的可以自行学习。要看的内容包括以下

html5教程
css教程，如果是很小白，建议可以把css先写在标签的style里
JavaScript教程
jQuery教程
vue我不建议看文字教程，因为看视频来的更简洁和清晰，同时我建议初学者看vue2开始，vue2更成熟，学习资料多。vue3还是有很多与vue2不同的
Element和Bootstrap这2个站在android同学的视角其实就是第三方控件，可以先不用看

以上资料可以简单过。

二、巩固基础及学习vue框架及后台管理系统开发

慕课网教程：html5+css3
vue2教程
这里推荐大家使用nvm来安装node及npm,比如合作开发和接收项目，可以随时切换版本nvm安装及使用
3小时速成 Vue2.x 核心技术
axios在vue中的使用,在vue里联网请求。我曾经安装这个教程封装了一个axios在vue里的封装
vuex基础入门，vuex可以看成是全局存储，有点类似android里的轻量存储，但不全是还有一个localStorage

掌握了这些以后我建议你可以先从后台管理系统触发，所以这个时候你可以看下，

饿了么组件库，这个东西就是前端里使用的第三方控件，看看api基本都可以用起来。如果你要改样式不会了怎么办？度娘基本都能帮你解答
饿了么官网的demo饿了么组件官网后台demo
饿了的demo东西弄的实在太多，所以我自己也总结了一套easy-vue-element-admin

静心走完了这个流程，我们大概对vue开发后台管理有个了解了

三、官网开发及学习Bootstrap

为什么学习了vue,不可以用来开发官网呢。当然是可以的，但是不利于搜索引擎seo。当然也有方法去解决这个问题，有些公司为了性能还是会要求你用原生开发。所以这个时候我们就得学习一下内容：

jQuery基础 (一)—样式篇，jQuery 是一个 JavaScript 库。jQuery 极大地简化了 JavaScript 编程。
jQuery基础(二)—DOM篇
jQuery基础(三)—事件篇
jQuery基础(四)—动画篇
jQuery基础(五)一Ajax应用与常用插件，原生开发里，我们就可以用JQuery去请求网络
bootstrap快速入门，这个也是个ui框架，用于官网原生开发

学习完以上内容呢，我们就可以找个好看大型的官网，去模仿。比如楼主就模仿了一个小红书的。原生开发也包含很多封装。因为这个时候我们没有完全模仿完，等完了页会陆续放到我的github里。那就先来看看效果吧

好了，学习完我这些内容。你也能达到我的水平。哈哈哈，我也还算是前端小白吧。不过咱们已经入门了啊

四、补充

因为本来是android开发，开发有些年头了。这里就以android的视角去补充一下想说的话把。

vue框架里的node_modules，就像android项目里的build。package.json就像是build.gradle。在vue里，比如你给你项目安装axios,用到的命令是这样的：npm install –save axios。运行完之后，package.json里就多了axios的引用。所以当项目要剔除这个axios，我们可以把package.json的引用删掉，然后执行npm install。对了，npm install就相当于是重新build。比如我们把代码传到代码管理工具上，node_modules也是不传的。下下来是不是要build下。这样说不知道有没有说明白。
这里再放上我在印象笔记关于vue的笔记。如果你学到这个地步后，希望能帮助到你


自定义控件在主页上的使用：


例如主页引用控件canvas-item，
<canvas-item

        :lineCenterX="50"

        :value_50="50"
         @uploadSuccess="uploadSuccessFather"

        :textFont="14"

        ref="mychild"

 ></canvas-item>



自定义属性值，并传值（父传子）：
这里通过:textFont = "14"，的形式，将值14传给自定义控件（自定义属性）textFont。
那么在自定义控件canvas-item中，在props（静态）里就需要定义textFont的属性，如下：
props: ['textFont']，多个属性以逗号隔开；



传值（子传父）
父组件里通过
@uploadSuccess="uploadSuccessFather" 去监听
子组件里通过
this.$emit("uploadSuccess", res.data, this.index); 去触发父组件的监听，同时传递了res.data和this.index两个值

那么触发监听就会走父组件里的uploadSuccessFather（）方法，同时会获取到这两个值



在父页面，获取子组件对象，并调用其方法
在上述通过定义ref="mychild"，那么我们可以通过refs直接拿到canvas-item对象，调用其属性和方法
this.$refs.mychild.initDataSon(dataList) 这里就直接调用了它的initDataSon（）方法



特别注意点
this.$nextTick(() => {}异步方法
当dom还未渲染就进行数据操作等，无异是徒劳的。或者在数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的DOM结构的时候，
这个时候都需要放进Vue.nextTick()里操作



如果使用了饿了么组件如何修改样式？

打开浏览器，用左上角箭头定位到元素后，在右边的style里，找到响应的css，拷贝到代码里的<style>里。
这里需要注意，不能放在<style  scoped>里。最好是新建一个style里，这样的话会变成全局变量。
怎么修改成scoped呢？
只需要在最外层的div里加上一层class ="father"。最后在style里用.father{}包裹起来即可。



当要把文件放在本地，并读取本地文件的内容时？
要将文件放在public里，然后可以通过axios读取，如下：
axios.get('/js/data.json').then(
      (response) => {
        this.list = Object.assign([], this.list, response.data.list)
        this.initData()
      },
      (response) => {
        console.log('error')
      }
    )



localStorage的使用?
将数据存储在localStorage里：
localStorage.setItem（key，value）
将数据从localStorage里取出：
localStorage.getItem（key）



跳转路由？
this.$router.push('/home/list')



子路由的配置？
例如：
  {
    path: '/home',
    name: 'Home',
    component: Home,
    children: [
      {
        path: 'list',
        name: 'list',
        component: () => import(/* webpackChunkName: "list" */ '../views/List.vue')
      },
      {
        path: 'user',
        name: 'user',
        component: () => import(/* webpackChunkName: "user" */ '../views/User.vue')
      }
    ]
  }



配置完子路由怎么主页显示？
<template>
  <div>
    <router-view></router-view>

    <ul class="footer">
      <li class="icons">
        <router-link :to="{ name: 'list' }">新闻列表</router-link>
      </li>

      <li class="icons">
        <router-link :to="{ name: 'user' }">个人中心</router-link>
      </li>
    </ul>
  </div>
</template>

首先需要一个router-view，配置好router-link里的 :to属性后，点击即可实现在同一页面，子路由里配置的子页面切换。



集合添加元素？
lists.push(value)

判断集合里是否包含某个元素？
lists.includes(value)

一个集合添加另一个集合的操作，相当于android里的addAll
this.list = Object.assign([], this.list, res.data.list)

复制代码