MVVM是什麼
視圖（View）和模型（Model）分離，以及數據綁定
MVC：Model-View-Control
MVP：Model-View-Presenter
MVVM：Model-View-ViewModel
SPA單頁面應用優化
優化：
- 打包壓縮：webpack打包
- 圖片懶加載 ：vue-lazyload插件
- -第三方框架按需引入：eleiment-ui、mint-ui、iview-ui
- 第三方庫使用CDN 引入：
如何使用cdn方式呢？提取js/css到cdn：
以一個vue項目爲例。
項目引用了vue、axios、iview、iview的css：
import Vue from ‘vue’
import App from ‘./App.vue’
import router from ‘./router’
import axios from ‘axios’
import iView from ‘iview’
import ‘iview/dist/styles/iview.css’
- 提取js到外部，減小vendor.js體積
在/build/webpack.base.conf.js中，增加externals：
module.exports = {
externals: { 'vue': 'Vue', 'axios': 'axios', 'iview': 'iview' }
}
注意，externals的鍵值對中，鍵應爲在/src/main.js中import的名稱，值爲引用的外部文件export的名稱。
以cdn.bootcss.com的庫文件爲例，vue的導出名爲Vue，mint-ui爲MINT，vue-router爲VueRouter。
- 複製/index.html爲/index.dev.html，並修改/build/webpack.dev.conf如下：
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
// template: 'index.html',
template: 'index.dev.html',
inject: true })
]
這是爲了解決dev環境下，修改/index.html後，重複引用庫的問題。
在/index.html中，引入cdn文件
<body>
<div id="app"></div>
<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.17.1/axios.min.js"></script>
<script src="https://cdn.bootcss.com/iview/2.6.0/iview.min.js"></script>
</body>
將大體積文件放置在cdn上，減小了服務器流量壓力，加快了不同地區網頁加載速度。
- 提取css到外部，減小app.css體積
在/src/main.js中，前端框架的CSS引用，都可去除，並改爲在/index.html中引用其CDN版本；
去除/src/main.js中的CSS文件：
import，改爲在開發環境下require//
import 'iview/dist/styles/iview.css if (process.env.NODE_ENV === 'development') { require('mint-ui/lib/style.css')}
在/index.html中，引入cdn文件
<head>
<link href="https://cdn.bootcss.com/iview/2.6.0/styles/iview.css" rel="stylesheet">
<title>app</title>
</head>
SSR和NUXT.JS
核心是vue-server-renderer組件中renderToString，將APP組件的內容編譯後寫入到“輸出模塊”。
根據自己的業務需要引入redis，serverfetch之類的技術，讓首屏速度提升。
預渲染prerender-spa-plugin插件，和服務器渲染SSR不同，預渲染技術對特殊頁面生成靜態頁面，利於SEO
服務端渲染應用框架nuxt.js。
文件夾先初始化：npm init -y，生成package.json
安裝：npm i -g create-nuxt-app
生成項目：create-nuxt-app <app-name>
path修改必須重啓CMD控制檯，甚至重啓計算機；
指令未找到：配置PATH；path路徑錯誤，修正後甚至需要重啓電腦；
書寫項目文檔
- 項目分析
-
環境搭建
框架選擇，環境配置，開發環境/發佈環境配置 -
思維導圖
APP => 模塊 => 小模塊 => 數據； -
需求說明
各個模塊的功能說明，具體實現什麼功能，怎麼實現；
- 項目製作及流程
- 分配路由
- 模塊化開發
- 組件化、功能實現
- 權限控制：VUE前端，php後端；跨域請求：後端解決；
跨域請求
本地開發環境下：
proxyTable的配置修改後，需要重啓服務器
proxyTable:{
'/api':{//識別請求的URL前綴，自定義
target:'http://www.xxx.com/',
changeOrigin:true,//此項不影響實際結果，可有可無
pathRewrite:{//URL拼接之後路徑中，符合左邊正則的替換爲右邊的字符串，
'^/api':''
}
},
}
通過URL:api/php/...請求遠程服務器php文件夾下數據。
jsonp不需要代理proxyTable就可以，需要服務器端配置；
也可以配置proxyTable，取別名，優化URL地址；
打包發佈後，遠程生產環境下：沒有VUE環境了，請求地址被拼接之後沒有被pathRewrite替換，多了一個前綴在URL裏面，導致請求錯誤；
解決方案：如請求遠程jsonp文件夾下文件
proxyTable:{
//優化方案，保證打包後請求地址正確，
'/jsonp':{//識別請求的URL
target:'http://www.xxx.com/jsonp',
pathRewrite:{
'^/jsonp':''
}
}
}
通過URL:jsonp/...請求數據。名字重複，少寫一個前綴。
後端解決方案：url地址重寫，服務器端也可以保證“前綴”被修正，隱藏真實地址
雙向綁定
視圖 => 模型 : 觀察者模式
模型 => 視圖：發佈-訂閱模式
模型 <==> 數據：對數據的挾持，實現雙向更新視圖和數據；
單元測試
調試抓包工具解決問題
OLTP管理系統界面（CRUD的操作，數據分頁，ajax）
聊天室
自定義圖片上傳組件
收費軟件如何加密？
jQuery遍歷？