原创 阿里雲使用nginx配置vue項目上線（nginx.conf的配置）
將vue項目進行打包： npm run build 在文件夾中會出現一個dist文件夾，這就是打好的包。 在阿里雲上下載安裝nginx後，在/usr/local文件夾中會有一個nginx文件夾，其中的conf文件夾中的nginx
2020-06-22 22:51:03
原创 vue 音樂播放器，獲取父級組件audio播放進度，並且根據進度條改變播放進度
在寫一個網易雲音樂的歷程中經歷了各種困難，比如說音樂播放器，由於要讓音樂在全局播放，所以講audio標籤放在最父級的組件中，然後到了播放音樂歌詞路由（是放有audio標籤頁面的子組件）就無法將進度和進度條數據進行雙向綁定，經過一早
2020-06-22 21:06:37
2
原创 Button組件-實現基本功能（Vue-UI組件庫）
組件有添加新成員了，他就是基本的button,不做過多詳述，僅僅記錄一下防止忘記 暫時的功能： 1.輸入size選擇button組建的大小 2.輸入樣式改變button組件的顏色 3.一些基本的樣式 <template>
2020-06-22 21:06:37
原创 Input組件-實現雙向綁定以及相關樣式（Vue-UI組件庫）
記錄一下組件庫第一個發佈的的input組件 1.實現雙向綁定的方法 說到雙向綁定就要先了解Vue中的v-model的實現機制 <input type="text" v-model="value" /> 這段代碼學習過Vue的小夥
2020-06-22 21:06:36
原创 性能優化黑科技：Progressive Web Application（PWA）
1.什麼是PWA Progressive Web Application，全稱“漸進式網頁應用”，是谷歌主導的一種新時代網頁（應用） 簡單的理解，就是網頁，可以通過某種方式達到離線使用，還可以擁有類似其他手機app一樣擁有一個lo
2020-06-07 10:26:28
2
原创 React Router4.1
基本路由配置 <Router> <Route path="/" component={App}> <Route path="about" component={About} /> <Route pa
2020-05-20 07:31:40
原创 React Router4.2
通過使用React Router 實現一個簡單的登錄Demo，提升對React路由的熟練度。 login.jsx import React, { Component } from "react"; class inputs ex
2020-05-20 07:31:40
原创 React Hook4.3
Hook是什麼 增強了函數組件的功能 狀態 生命週期 hook並不能提供全部生命週期 引用 使用 State Hook 在函數組件中不能使用constructor，不能綁定this來調用函數，可以通過hook模擬this.st
2020-05-20 07:31:40
原创 React 自定義Hook4.4
自定義 Hook 通過自定義 Hook，可以將組件邏輯提取到可重用的函數中 提取自定義 Hook 當我們想在兩個函數之間共享邏輯時，我們會把它提取到第三個函數中。而組件和 Hook 都是函數，所以也同樣適用這種方式。 自定義 Ho
2020-05-20 07:31:40
原创 React Fragments3.5
React 中的一個常見模式是一個組件返回多個元素。Fragments 允許你將子列表分組，而無需向 DOM 添加額外節點。 render() { return ( <React.Fragment> <Ch
2020-05-12 00:58:39
原创 React Context3.3
Context Context 提供了一個無需爲每層組件手動添加 props，就能在組件樹間進行數據傳遞的方法。 在React應用中，數據是通過props自上而下也就是從父到子進行傳遞的，這個方式在某些需求下就顯得比較繁瑣，比如很
2020-05-12 00:58:39
原创 React router 3.1
React router 安裝 npm install --save react-router 使用一個支持 CommonJS 或 ES2015 的模塊管理器，例如 webpack： // 使用 ES6 的轉譯器，如 babel
2020-05-12 00:58:39
原创 React 3.2代碼分割
打包 大多數 React 應用都會使用 Webpack，Rollup 或 Browserify 這類的構建工具來打包文件。 打包是一個將文件引入併合併到一個單獨文件的過程，最終形成一個 “bundle”。 接着在頁面上引入該 bu
2020-05-12 00:58:39
原创 React ref轉發3.4
Ref 轉發是一項將 ref 自動地通過組件傳遞到其一子組件的技巧 轉發 refs 到 DOM 組件 Ref 轉發是一個可選特性，其允許某些組件接收 ref，並將其向下傳遞（換句話說，“轉發”它）給子組件 在下面的示例中，Fanc
2020-05-12 00:58:39
原创 React 事件處理2.1
React的事件命名爲小駝峯式 使用 JSX 語法時需要傳入一個函數作爲事件處理函數 例如 <button onClick={activateLasers}> Activate Lasers </button> 並且在
2020-05-04 17:33:38