[TOC] >[success] # 了解 -- node 的包查找規則 ~~~ 舉個例子例如要使用Vue: import Vue from 'vue' 1.找 項目根目錄中有沒有 node_modules 的文件夾 2.在 node_modules 中 根據包名，找對應的 vue 文件夾 3.在 vue 文件夾中，找 一個叫做 package.json 的包配置文件 4.在 package.json 文件中，查找 一個 main 屬性【main屬性指定了這個包在被加載時候，的入口文件】 5.在package.json 的main屬性如果還沒找到就會找然后一次查找index.js、 index.json、index.node，如果還是找不到的話，就會拋出查找失敗的異常。 ~~~ >[success] # 了解 -- Runtime Only和Runtime+Compiler ~~~ 1.通過上面的找包規則中，我在node_modules中去package.json中定位vue里面的 main，發現我們導入的vue是Runtime Only，如下圖 2.使用import 導包進來的Runtime Only和我們在js中直接使用的vue.js區別在哪 ~~~  * Runtime Only(簡單的說體積小但需要用render編譯組件) ~~~ 1.我們在使用 Runtime Only 版本的 Vue.js 的時候，通常需要借助如 webpack 的 vue-loader 工具把 .vue 文件編譯成 JavaScript，因為是在編譯階段做的，所以它 只包含運行時的 Vue.js 代碼，因此代碼體積也會更輕量。 在將 .vue 文件編譯成 JavaScript的編譯過程中會將組件中的template模板編譯為render函數，所以我們 得到的是render函數的版本。所以運行的時候是不帶編譯的，編譯是在離線的時 候做的。 2.在生命周期章節說到，vue會檢測掛載點el,如果el中存在template，就會使用 template渲染，但其實vue會將template渲染的頁面再用render解析，由于這個版 本沒有了template的解析因此需要render ~~~ * Runtime+Compiler ~~~ 1.我們如果沒有對代碼做預編譯，但又使用了 Vue 的 template 屬性并傳入一個字 符串，則需要在客戶端編譯模板 2.我覺得雖然使用這個多出幾kb，但是卻因去要從新理解有些不適應 ~~~ [runtime-only](https://jingsam.github.io/2016/10/23/standalone-vs-runtime-only-build-in-vuejs2.html) <a href='https://www.jianshu.com/p/466510d84e36'>上面對Runtime Only和Runtime+Compiler文章出處</a> >[success] # 為什么使用的是render ~~~ 1.結合上面講解重新理解這句話 2.在生命周期章節說到，vue會檢測掛載點el,如果el中存在template，就會使用 template渲染，但其實vue會將template渲染的頁面再用render解析，由于這個版 本沒有了template的解析因此需要render. 3.根據聲明周期來說，使用render其實變相的使用了template，使用template生成 的內容是會覆蓋el節點的內容。 4.簡單的一句話:render 和compent 的區別，兩者前者會覆蓋整標簽的內容，后者 不會. ~~~ >[success] # es6 導出和node導出 ~~~ 1.在node中我們使用require 和 module.exports 進行搭配使用,一個用來導入一個 用來導出 2.在webpack 中我們換做了es6 的import導入，為什么沒有使用node的require導 入，原因在'前端知識擴展中筆記'有過解釋，這里簡單說明下，require的導入是服 務器端的導入，不支持異步的，但是客戶端往往需要異步操作因此使用import 3.已經使用了import 作為前端的導入就需要去理解下前端的導出'export default' 和 'export' 4.export default 向外暴露的成員，可以使用任意的變量來接收 5.在一個模塊中，export default 只允許向外暴露1次 6.在一個模塊中，可以同時使用 export default 和 export 向外暴露成員 7. 使用 export 向外暴露的成員，只能使用 { } 的形式來接收，這種形式，叫做 【按需導出】 8. 使用 export 導出的成員，必須嚴格按照 導出時候的名稱，來使用 {} 按需接收； 9. 使用 export 導出的成員，如果 就想 換個 名稱來接收，可以使用 as 來起別名； 10. 更多內容看廖雪峰老師的es6： http://es6.ruanyifeng.com/?search=export&x=8&y=13#docs/module#export-%E5%91%BD%E4%BB%A4 ~~~ >[danger] ##### 關于導出舉個例子 ~~~ 暴露多個成員export var 變量 = 值 export var title = '小星星' export var content = '哈哈哈' var info = { name: 'zs', age: 20 } export default info import m222, { title as title123, content } from './test.js' ~~~ *按需導出也可以一次性導出內容 ~~~javascript var firstName = 'Michael'; var lastName = 'Jackson'; var year = 1958; export {firstName, lastName, year}; ~~~