物聯網平臺：一份全面前端知識總結

總結這份前端知識主要包含以下幾部分：

1.開發工具
vscode
常用插eslint/npm/prettier(代碼風格)/vetur/liveserver/ant desgin vue/stylelint/element ui helper
chrome瀏覽器
nodejs
vue-devtools:除錯vue
yarn/npm:依賴包管理
webpack:前端資源加載打包
根據模塊規則生成靜態資源；
安裝webpack: npm install -g webpack web-cli
webassembly
easy-mock:介面資料模擬(https://github.com/easy-mock/easy-mock)

2.vue
模板
v-html
{{}}
v-model:雙向資料系結
v-for
v-bind:class /v-bind:style 樣式系結
父組件向子組件傳遞引數：props
計算屬性:computed/method
監聽屬性：watch
自定義事件
$on(eventname):監聽事件
$emit(eventname):出發事件
組件
全域組件：vue.component()
區域組件
路由(router)
vue-router
page.js
Director
狀態快取(state)
vuex/localstorage
token
混入（mixins）:義了一部分可復用的方法或者計算屬性
ajax請求：axios
一個基于 Promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中
插槽：v-slot

3.nuxtjs
基于vue的通用框架，通過對客戶端和服務端基礎架構的抽象組織，側重關注應用UI的渲染

服務端渲染 (SSR)

解決的問題
靜態站點 (seo好）
動態渲染
簡化配置（體現在自動路由，無需配置）
自動代碼分層

搭建
環境：npm+nodejs+vscode
安裝：1.創建工程 npm init nuxt-app mfvking
2.運行：npm run dev
目錄結構
技術點
NuxtLink:導航

常用命令
npm run dev 啟動開發環境
npm run build 構建生產環境
npm run start 啟動生產環境
npm run generate 生成靜態服務
npm run generate --fail-on-error 生成頁面錯誤

nuxtjs 版本升級：
remove package-lock.json file
remove node_modules directory
Run the npm install command

nuxt生命周期

路由中間件
globla-->next.config.js
layout-->layouts
page-->page components

5.前端工程搭建
vue-cli3: vue create mfvking
npm init nuxt-app mfvking

6.vue組件框架
pc 管理端：ant desgin vue /element ui/iview
移動端:(flutter/uni-app/Taro)/weex ui/RN/vant/Vuetify/Rax
pc端:electron

7.模塊化：js與js之間的呼叫操作
es5
1.commjs模塊 /module檔案夾
2.使用exports和require 進行匯入匯出
3.使用demo
es6
export/imprt 匯出匯入
使用demo

8.typescript
是javascript的超集擴展，提供了面向物件的特殊（物件、介面、模塊）；
可以通過 tsc xx.ts將typescript程式轉為為js檔案

9.可視化
antv
echarts
three.js
highcharts
D3

10.開源專案
vue-element-admin
vue-admin-template
ant-design vue pro
vuex-persistedstate:vue狀態管理插件
vue-admin-beautiful

11.less/sass
1.都用于處理css
2less基于js，在客戶端處理；一般使用less
3.sass基于ruby，在服務端處理；

12.babel轉換器
把es6代碼轉換為es5代碼，解決瀏覽器兼容性差問題
babel插件：babel-cli

13.javascript基礎
1.this指向
this的指向
call
apply
bind
2.原型
原型
原型鏈
3.作用域
作用域
作用域鏈
4.背景關系
5.變數物件
變數物件
全域變數物件
函式變數物件
6.立即呼叫函式運算式
7.閉包
8.引數傳遞
值傳遞
參考傳遞
共享傳遞
9.基本資料型別

14.微前端架構（前端微服務化）

將微服務概念應用于瀏覽器，將web應用由單一的單應用轉變為多個小型應用聚合為一個大應用，可以獨立開發、獨立部署、獨立運行，公共組件共享依賴，

微前端的實作方式
使用 HTTP 服務器(nginx)的路由來重定向多個應用

組合多個獨立應用、組件來構建一個單體應用

iFrame，使用 iFrame 及自定義訊息傳遞機制

Web Components

Singel-spa

qiankun： 阿里的輪子

BFF(Backend for frontend):服務于前端的后端

15.前端優化
1.性能優化
性能監控
樣式優化
js優化（防抖、節流）
代碼分割
資源壓縮
打包優化
服務器優化
快取優化：service worker
延遲加載
優化啟動性能：異步化
渲染優化
網路優化
移動端性能優化
CDN加速
2. 兼容性
瀏覽器兼容性
normalize.css
html5shiv.js
respond.js
babel
polyfill
螢屏分辯率兼容
跨平臺兼容
3.seo
robots.txt/description/keywords/sitemap/html標簽優化/站內鏈接建設/友情鏈接
4.安全
xss/csrf/反爬蟲/SQL注入/DOS