教你0基礎，速成web前端

「本文已參與好文召集令活動，點擊查看：後端、大前端雙賽道投稿，2萬元獎池等你挑戰！」css

前言： 今年公司沒什麼移動前端的活，閒來無事，我也學習起了前端。從個人博客上也能看出端倪。看到掘金在搞徵集好文的活動，我也來參加下。就來分享一下我學習前端的路線吧。（目前我接觸了2-3個月了。vue框架，加上原生寫官網已經算是成功入門了。但願能幫助想學習前端的同窗）html

接下來，詳細說說個人步驟。它來了。前端

1、準備工做

打開百度，搜索菜鳥教程，把如下幾處過一遍。固然了，重點是過一遍，其中你以爲感興趣的能夠好好看看。之後正式寫的時候，不懂就來查。固然你又有空的時候還能夠來過一遍。第二次過一遍的時候重點是就像讀書時候的默寫，不會了再查看。
vue

建議開始用txt文本，若是你以爲不必能夠下載個vscode。具體本文是講解思路和方法，就不對工具具體介紹。不懂的能夠自行學習。要看的內容包括如下
html5

html5教程
css教程，若是是很小白，建議能夠把css先寫在標籤的style裏
JavaScript教程
jQuery教程
vue我不建議看文字教程，由於看視頻來的更簡潔和清晰，同時我建議初學者看vue2開始，vue2更成熟，學習資料多。vue3仍是有不少與vue2不一樣的
Element和Bootstrap這2個站在android同窗的視角其實就是第三方控件，能夠先不用看

以上資料能夠簡單過。java

2、鞏固基礎及學習vue框架及後臺管理系統開發

慕課網教程：html5+css3
vue2教程
這裏推薦你們使用nvm來安裝node及npm,好比合做開發和接收項目，能夠隨時切換版本nvm安裝及使用
3小時速成 Vue2.x 核心技術
axios在vue中的使用,在vue裏聯網請求。我曾經安裝這個教程封裝了一個axios在vue裏的封裝
vuex基礎入門，vuex能夠當作是全局存儲，有點相似android裏的輕量存儲，但不全是還有一個localStorage

掌握了這些之後我建議你能夠先從後臺管理系統觸發，因此這個時候你能夠看下，node

餓了麼組件庫，這個東西就是前端裏使用的第三方控件，看看api基本均可以用起來。若是你要改樣式不會了怎麼辦？度娘基本都能幫你解答
餓了麼官網的demo餓了麼組件官網後臺demo
餓了的demo東西弄的實在太多，因此我本身也總結了一套easy-vue-element-admin

靜心走完了這個流程，咱們大概對vue開發後臺管理有個瞭解了jquery

3、官網開發及學習Bootstrap

爲何學習了vue,不能夠用來開發官網呢。固然是能夠的，可是不利於搜索引擎seo。固然也有方法去解決這個問題，有些公司爲了性能仍是會要求你用原生開發。因此這個時候咱們就得學習一下內容：android

jQuery基礎 (一)—樣式篇，jQuery 是一個 JavaScript 庫。jQuery 極大地簡化了 JavaScript 編程。
jQuery基礎(二)—DOM篇
jQuery基礎(三)—事件篇
jQuery基礎(四)—動畫篇
jQuery基礎(五)一Ajax應用與經常使用插件，原生開發裏，咱們就能夠用JQuery去請求網絡
bootstrap快速入門，這個也是個ui框架，用於官網原生開發

學習完以上內容呢，咱們就能夠找個好看大型的官網，去模仿。好比樓主就模仿了一個小紅書的。原生開發也包含不少封裝。由於這個時候咱們沒有徹底模仿完，等完了頁會陸續放到個人github裏。那就先來看看效果吧webpack

好了，學習完我這些內容。你也能達到個人水平。哈哈哈，我也還算是前端小白吧。不過我們已經入門了啊

4、補充

由於原本是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)

複製代碼