雖然使用vue.js完成版可以編譯，但是對于企業(yè)建設網(wǎng)站來講它太大了，浪費性能，所以我們依舊使用默認的運行時版本，將編譯任務交給 vue-loader 加載器，vue運行時只需要負責渲染功能就行。

之前引入組件都是使用template ，但是template 自身沒有渲染功能，最終渲染底層都是通過 render 函數(shù)實現(xiàn)的，但我們又要把 template 屬性編譯成 render 函數(shù)，編譯過程有一定的性能損耗。所以可以直接使用運行時版本 vue ，然后直接通過render 函數(shù)來渲染組件即可。

1、總結2 種解決子組件內容沒有渲染出來的方案

（1）vue 完整版比運行時 版本大，性能不如運行時版本 vue。

（2）官方更推薦運行時版本 vue，因為 vue-loader 可以編

譯 .vue 文件，所以是不需要 vue 的編譯功能的，只需要渲染功能即可。

（3）前面都是通過 template 屬性引入組件，而 template 自

身沒有渲染功能，最終渲染底層都是通過 render 函數(shù)實現(xiàn)的。因此需要把 template 屬性編譯成 render 函數(shù)，這個編譯過程有一定的性能損耗。

因此，最佳方案是：

使用運行時版本 vue ，然后直接通過render 函數(shù)來渲染組件即可

2、改進 main.js

企業(yè)網(wǎng)站設計，品牌網(wǎng)站建設, 通過 template 屬性導入 App 組件，改為直接通過 render 函數(shù)渲染。此外，通過 render 函數(shù)進行渲染組件，注冊組件都可以不需要，因為通過作為 h 函數(shù)的參數(shù)，默認就是子組件。改動的代碼如下最后的render。

3、注釋掉 main.js 中的下面的引入完整版的 vue.js 代碼

4、打包運行測試

瀏覽 dist/index.htm，結果沒問題。

5、采用箭頭函數(shù)優(yōu)化下 render 函數(shù)

（1）上面 render 函數(shù)代碼，可改為使用箭頭函數(shù)，并通過$mount 掛載元素,即代碼：

這時實例化 vue 代碼實際上很簡單，如下。含義可以這么理解：渲染子組件 App（相對 new Vue 這個 根組件）到 index.html 文件指定的 app 處。（如果要問為什么是渲染到 index.html 文件的 app處，因為在 webpack.config.js 中配置好了要打包的模板文件為main.js，而 main.js 中又引用了 App.vue 及 vue.js，所以實質就是把 main.js 和 App.vue 及 vue 一起打包到 bundle.js 文件中（如果還有引入/依賴了其他組件都會被一起打包的），同時打包后的bundle.js 文件被引入到 index.html 文件中【實際上可以這么理解這些組件和 index.html 組合在一起去了】，而這個時候在 bundel.js 中

指定的 app 就是當前文件 index.html 中的 app）。

強調一點：如果子組件還引入其他組件（即是組件依賴的組件），那么打包時會層層打包到各個依賴組件（根據(jù)依賴關系都會打包）。