是否可以將Vue.js模板編譯爲靜態HTML和CSS文件？

最近我愛上了Vue.js的single file components。讓組件的模板和樣式彼此接近非常好，現在我發現我編寫的bug比現在少很多，因爲它很容易將頁面的一部分分解並在多個地方使用。是否可以將Vue.js模板編譯爲靜態HTML和CSS文件？

我想知道是否可以將此單文件組件結構擴展爲生成靜態HTML頁面，而不涉及Vue。

例如，假設我想要一個包含標題，節和頁腳的主「內容」div的頁面。使用Vue.js，我可以創建'header'，'section'和'footer'組件，並使用JavaScript在頁面加載後實例化它們。因爲頁面的每個部分都在它自己的組件中，所以一個組件中的CSS不會影響另一個組件，並且我有更清晰的文件樹來編輯。

然而，這似乎有點浪費，因爲這些組件不實際的互動：我沒有使用v-model或v-bind或v-on，我只是用Vue.js，因爲它讓我的頁面獨立的部分了。這也意味着，如果JavaScript被禁用，我的頁面將無法工作，因爲每個元素（保存主要內容div）都依賴於Vue的可用性。

那麼有沒有什麼辦法可以編譯.vue文件，而不是在運行時使用Vue.js加載這些組件的頁面，而是分隔不帶任何JavaScript呈現的HTML和CSS文件？

理想情況下，我有一個組件 'greeting.vue'：

<template> 
    <p class="greeting">Hello!</p> 
</template> 
<style scoped> 
    .greeting { color: red; } 
</style>

一個頁面中使用：

<html> 
    <body> 
     <greeting></greeting> 
    </body> 
</html>

而這將彙編成兩個文件：與HTML頁面模板編譯和預渲染，以及包含所有組件樣式的CSS文件。然後我可以將生成的樣式表包含在頁面中，並且所有組件都將被樣式化。

我看過vue-loader和vueify，但我不明白他們在做什麼，因爲我沒有使用Webpack或Browserify。

是我想要做的可能嗎？

來源

2017-03-17 Ben S

你在找什麼是服務器端渲染。我建議你看看Nuxt.js。

From VueJS docs:

正確配置生產就緒服務器呈現應用程序的所有討論的方面可以是一個艱鉅的任務。幸運的是，有一個優秀的社區項目旨在使這一切變得更加簡單： Nuxt.js。 Nuxt.js是一個構建於Vue 生態系統之上的更高級別的框架，它爲編寫通用Vue應用程序提供了極其簡化的開發體驗。更好的是，你甚至可以使用它作爲一個靜態站點生成器（頁面創作爲單文件Vue組件）！我們強烈建議試一試。

它是超級簡單得到它started。如果您使用vue-cli：

$ vue init nuxt/starter <project-name>

它配備了所有你通常不需要（Vuex，路由器，..）。請記住，它強制執行一些文件夾結構，您必須遵循。

Here是包含在起動器中的命令列表。

"scripts": { 
    "dev": "nuxt", 
    "build": "nuxt build", 
    "start": "nuxt start", 
    "generate": "nuxt generate" 
}

你可能會被大部分iterested在generate，因爲它

生成應用程序，並生成一個HTML文件（靜態主機使用）每路線。

也很酷的事情要注意的是，該項目似乎是（在撰寫本文時）under active development，我們可以期待更多的優秀功能！

來源

2017-03-20 19:15:57 Sicky

這就是我最終使用的。 –

我想說你不能這樣做，因爲Vue使用虛擬DOM，它不會將模板編譯到HTML，而是編寫模板render functions，這是在數據更新時有效修補DOM的必要條件。

我敢肯定，你可以用神奇的東西來分析和輸出文件，但是這對於那些只有最小效果的東西來說是相當大的事情。

來源

2017-03-17 12:26:31

是的，我認爲Vue.js本身不會是做這件事的工具。這只是我見過的單文檔組件的唯一地方已經在Vue中，所以這是我的參考點。 –

從官方vuejs指南：

如果您使用的WebPack，你可以輕鬆地添加與prerender-spa-plugin預渲染。它已經通過Vue應用程序進行了廣泛測試 - 實際上，創建者是Vue核心團隊的成員。

來源

2017-03-17 12:28:59

是否可以將Vue.js模板編譯爲靜態HTML和CSS文件？

回答

相關問題