[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}; ~~~