說白了，基于vue的ssr（服務(wù)器渲染）就是將之前vue編程中通過
進(jìn)行渲染而致使seo搜索爬蟲抓取不到完整html的這一弊端進(jìn)行改進(jìn)，通過編寫renderer代碼實(shí)現(xiàn)在服務(wù)器端渲染（合并）出完成html輸出到瀏覽器。
而nuxt.js就是對(duì)vue實(shí)現(xiàn)此功能的高度封裝，將原本vue不能seo、不能查看完整源代碼的應(yīng)用變成了一個(gè)能支持seo能查看完成源代碼支持爬蟲抓取的應(yīng)用，并且還提供了額外的功能，比如靜態(tài)站點(diǎn)生成。
so，使用nuxt.js的優(yōu)點(diǎn)：
1）自動(dòng)生成路由文件，不用自己配置
2）模板輸出之前就已經(jīng)請(qǐng)求完數(shù)據(jù)，所以其實(shí)最后輸出的是html的靜態(tài)文件嗎？
nuxt.js服務(wù)器渲染流程
nuxt.js文件
1）no-ssr.js
主要判斷是否需要將子組件進(jìn)行渲染，如果不需要或者用默認(rèn)布局等，則不能渲染。
2）nuxt-child.js
主要是遍歷所有組件，對(duì)transition效果和listener的一些相關(guān)的配置，并把組件和相關(guān)transition關(guān)聯(lián)起來。
3）nuxt-loading.vue
主要是對(duì)加載是否成功的一些函數(shù)的定義和css屬性等的配置。
4）nuxt.vue
將子組件引入（也包括error頁）
5）app.template.html
是nuxt所有模板的html展示頁面，dom結(jié)構(gòu)。
6）App.vue
是項(xiàng)目的主文件vue，
就在這里（相當(dāng)于）。7）client.js
包括處理熱加載，加載中間件等配置，還創(chuàng)建了vue實(shí)例，將#__nuxt加進(jìn)去，并將path加入到router中，然后在創(chuàng)建vue，將他們都創(chuàng)建了實(shí)例，串起來了。
8）index.js
創(chuàng)建app工廠，并將router和store都注入到所有的子組件中。
9）server.js
實(shí)現(xiàn)服務(wù)器渲染。
10）store.js
是vuex（狀態(tài)管理架構(gòu)）里用來儲(chǔ)存狀態(tài)的，可以共享給其他的vue組件，就是存儲(chǔ)數(shù)據(jù)和管理數(shù)據(jù)方法的倉庫，實(shí)現(xiàn)方式是將數(shù)據(jù)和方法以對(duì)象形式傳入其實(shí)例中。要注意一個(gè)應(yīng)用或是項(xiàng)目中只能存在一個(gè)Store實(shí)例！
11）utils.js
配置需要的一些函數(shù)和方法。
掛載過程如下：
vue瀏覽器渲染和nuxt的服務(wù)器渲染對(duì)比：
注意：
以上用的是vue init nuxt-community/starter-template新手模板安裝的源碼解釋內(nèi)容，用vue init nuxt-community/express-template模板也差不多（不過沒有了store文件夾），這些新手模板安裝完成后，已經(jīng)封裝了store狀態(tài)管理內(nèi)容，通過的是createApp工廠模式為每個(gè)組件創(chuàng)建實(shí)例，然后將router和store加入進(jìn)去，使得每個(gè)組件都能用this.$store。
但是當(dāng)不用模板而完全自己構(gòu)建的話，就需要構(gòu)建vuex狀態(tài)樹來對(duì)組件的store進(jìn)行管理，在surmon項(xiàng)目中的狀態(tài)管理用的是vuex狀態(tài)樹的模塊方式：
1）store目錄下的每個(gè).js?文件都轉(zhuǎn)換成狀態(tài)樹指定命名的子模塊（eg：todos.js）
2）在頁面組件（eg：todos.vue）下可以使用todos模塊：this.$store.state.todos.list
具體可參見https://zh.nuxtjs.org/guide/vuex-store
用vuex狀態(tài)樹去管理store就用store里的數(shù)據(jù)去渲染頁面，就不用再new Vue了。
