適合做seo的前端框架(適合做seo的vue框架)
時(shí)間:2023-05-19 21:48:01 | 來源:網(wǎng)站運(yùn)營
時(shí)間:2023-05-19 21:48:01 來源:網(wǎng)站運(yùn)營
適合做seo的前端框架(適合做seo的vue框架):
適合做seo的前端框架
JavaScript最初是為Web應(yīng)用程序創(chuàng)建的。但是隨著前端技術(shù)的發(fā)展,大多數(shù)開發(fā)人員更喜歡使用基于JavaScript的框架。它簡化了你的代碼以及使你能完成更多全棧工作,您幾乎可以在任何框架中使用JavaScript。
使用什么類型的框架決定了創(chuàng)建應(yīng)用程序的便捷程度。因此,您必須慎重選擇。在已經(jīng)足夠復(fù)雜的前端環(huán)境里,其中兩個(gè)框架脫穎而出。我們會在本文中對Ember.js和Vue.js之間進(jìn)行對比,以幫助你更好的做出判斷。
為什么要選擇框架?在開始比較這兩個(gè)框架之前,我們應(yīng)該先來了解下選擇一個(gè)框架的決定因素都有什么。每個(gè)開發(fā)人員選擇一個(gè)框架之前,讓我們看看選擇的理由。
代碼必須簡單易懂。
應(yīng)以更少的代碼量產(chǎn)出更多的功能。
應(yīng)提供一個(gè)布局合理的工作框架。
是否支持內(nèi)置路由或外部插件的路由?
應(yīng)該能夠在頁面加載時(shí)傳輸更多數(shù)據(jù),從而使頁面成為單頁應(yīng)用,單頁應(yīng)用程序使用體驗(yàn)顯然更好。
在單頁架構(gòu)中,如果用戶需要共享應(yīng)用子頁面鏈接,那么框架應(yīng)該具有基于URL路由不同功能的能力。
更嚴(yán)格的模板選項(xiàng)有助于實(shí)現(xiàn)雙向綁定。
不應(yīng)與任何第三方庫產(chǎn)生沖突。
應(yīng)該很容易測試框架內(nèi)的代碼。
應(yīng)為Ajax調(diào)用提供HTTP客戶端服務(wù)
文檔也必不可少,應(yīng)該是完整且最新。
應(yīng)該與瀏覽器的最新版本兼容。
必須滿足上述條件,便于APP的構(gòu)建。您必須確保所選擇的框架符合條件。
Vue.js開發(fā)人員總是在尋找新的框架來構(gòu)建他們的應(yīng)用程序。主要要求是速度快、成本低。這個(gè)框架應(yīng)該很容易被新開發(fā)人員理解并且能夠以更低的成本使用。其他考慮選項(xiàng)還有簡單的編碼方式、健全的幫助文檔等。
在Web應(yīng)用程序開發(fā)中,VUEJS在軟件語言方面結(jié)合了很多優(yōu)點(diǎn)。VUE.JS的體系結(jié)構(gòu)易于使用。使用VUE.JS開發(fā)的應(yīng)用程序很容易與新的應(yīng)用程序集成。
VUE.JS是一個(gè)非常輕量級的框架。你能很快的下載到它。它也比其他框架快得多。該框架的單文件組件性質(zhì)也很棒。這個(gè)尺寸使它很受歡迎。
同時(shí)你可以進(jìn)一步減少它的體積。使用Vue.js可以將模板和編譯器分離為虛擬DOM。您只能部署只有12 KB的壓縮后的壓縮解釋器。您可以在您的機(jī)器中編譯模板。
Vue.js的另一個(gè)重要優(yōu)點(diǎn)是它可以輕松地與使用JavaScript創(chuàng)建的現(xiàn)有應(yīng)用程序集成。使用此框架可以輕松地對已經(jīng)存在的應(yīng)用程序進(jìn)行更改。
Vue.js還可輕松與其他前端庫集成。您可以插入另一個(gè)庫,以彌補(bǔ)此框架中的任何不足。此功能使該工具成為通用工具。
Vue.js使用服務(wù)器端渲染流的方法。它使服務(wù)器具有較高的響應(yīng)速度。 你的用戶將很快獲得渲染的內(nèi)容。
Vue.js非常適合SEO。由于該框架支持服務(wù)器端渲染,因此視圖直接在服務(wù)器上渲染。便于搜索引擎直接索引到這些網(wǎng)頁內(nèi)容。
但對你來說最重要的是你可以輕松地學(xué)習(xí)Vue.js。該結(jié)構(gòu)是基本的。即使是新的開發(fā)人員,也會發(fā)現(xiàn)使用它來構(gòu)建應(yīng)用程序很容易。該框架有助于開發(fā)大型和小型模板。它有助于節(jié)省大量時(shí)間。
您可以返回并輕松檢查錯(cuò)誤。除了測試組件外,您還可以返回并檢查所有狀態(tài)。就任何開發(fā)人員而言,這是另一個(gè)重要功能。
Vue.js也有非常詳細(xì)的文檔。它有助于為你快速上手開發(fā)應(yīng)用程序。您可以使用HTML或JavaScript的基本知識來構(gòu)建網(wǎng)頁或應(yīng)用。
Vue.js它能與其他應(yīng)用程序集成
Vue.js輕巧且快速。通過部署解釋器,就可以使它更輕量
您可以將編譯器和模板分離為虛擬DOM。
得益于便于集成的優(yōu)點(diǎn),您可以使用它來對現(xiàn)有應(yīng)用進(jìn)行更改
豐富的庫和組件為你的應(yīng)用程序帶來更多可能
應(yīng)用能夠快速響應(yīng)。
服務(wù)器端渲染還有助于使搜索引擎排名更高。
結(jié)構(gòu)簡單。易于任何新開發(fā)者使用
您可以返回檢查并更正錯(cuò)誤。
您可以檢查所有現(xiàn)有狀態(tài)。
詳細(xì)的文檔有助于快速構(gòu)建網(wǎng)頁或應(yīng)用程序。
Ember.jsEmber.js是MVVM模型框架。它是開源軟件。該平臺主要用于創(chuàng)建復(fù)雜的多頁面應(yīng)用程序。它保持最新的特性,并不會丟棄任何舊功能。
通過這個(gè)框架,您必須嚴(yán)格遵循框架的體系結(jié)構(gòu)。JS框架是非常嚴(yán)密的組織。所以它降低了和其他框架可能提供的靈活性。
它的平臺和工具有非常完善的控制系統(tǒng)。您可以使用提供的工具將其與新版本集成,以避免使用過時(shí)的API。
您可以輕松了解Ember的API。他們也很容易工作。您可以簡單,直接地使用高度復(fù)雜的功能。
當(dāng)類似的工作一起處理時(shí),性能更好。它創(chuàng)建了相似的綁定和DOM更新,讓瀏覽器一次性處理它們,以提高性能。這樣則將避免為每個(gè)工作重復(fù)計(jì)算,以免浪費(fèi)大量時(shí)間。
因?yàn)镻romise無處不在,所以你可以以簡單的方式編寫代碼和模塊,使用 Ember 的任何 API。
同時(shí)Ember也有一個(gè)很不錯(cuò)的上手指南。上面記錄著API的使用方式。Ember明確了一般應(yīng)用程序的組織和結(jié)構(gòu),因此你將不會犯任何錯(cuò)誤。你將不可能在不必要的情況下使程序復(fù)雜化。Ember的模板語言是Handlebar,Handlebar簡潔的語法可以使你可以輕松閱讀和理解模板,同樣的也能使頁面加載速度變得更快。使用Handlebar另一個(gè)優(yōu)勢是,不必每次在頁面上添加或刪除數(shù)據(jù)時(shí)都更新模板。語言本身將自動為你完成。
最后,Ember.js擁有一個(gè)活躍的社區(qū),可以定期更新框架并從而促進(jìn)向后兼容
Ember.js是適用于復(fù)雜結(jié)構(gòu)的多頁應(yīng)用程序的MVVM模型開源框架。
同時(shí)提供了最新功能和舊的功能。
它有一個(gè)非常嚴(yán)密的結(jié)構(gòu)框架,不能提供太高的靈活性
非常完善的控制系統(tǒng)可幫助你與新版本完美集成。
對避免使用過時(shí)的API版本有著嚴(yán)格的指導(dǎo)。
Ember的API可幫助您以簡單的方式使用復(fù)雜的功能
該框架提供高效的運(yùn)算機(jī)制,以保證運(yùn)行效率
Promise可讓你使用Ember.js的任何API來編寫模塊化和簡單的代碼。
Ember.js是一個(gè)完全加載的前端框架。
框架穩(wěn)定,因?yàn)樗薪M件都具有相同的功能和屬性。
具有明確定義的限制,可防止您使應(yīng)用程序復(fù)雜化
Handlebar使你可以輕松閱讀和理解模板。并且還有助于更快地加載模板。
每次添加或刪除數(shù)據(jù)時(shí),Handlebar將確保更新模板。
Ember.js有一個(gè)活躍的社區(qū),可以定期更新框架并從而促進(jìn)向后兼容。
Ember.js Vue.js對比當(dāng)你需要將原有應(yīng)用程序向現(xiàn)代框架上遷移時(shí),Vue.js可以為您提供幫助。它結(jié)合了其他框架的許多優(yōu)點(diǎn)。Vue.js面向開發(fā)過程的框架,所以沒有提供現(xiàn)成的界面元素庫。但是,許多第三方社區(qū)庫可以為您提供幫助。
Ember.js為您提供了一個(gè)值得信賴的成熟框架。當(dāng)你的開發(fā)團(tuán)隊(duì)規(guī)模很大時(shí),這個(gè)框架比較合適。由于MVVM結(jié)構(gòu)所致,它使每個(gè)人都可以為項(xiàng)目做出貢獻(xiàn)。
Vue.js可以幫助你兼容應(yīng)用程序中不同類型的語法,它有助于輕松編寫代碼,同時(shí)由于后端渲染,它也是一個(gè)對SEO友好的框架。而Ember是一個(gè)完全加載的前端框架,可以幫助您非常快速地開發(fā)應(yīng)用程序。但是它不適合開發(fā)小型項(xiàng)目。
很難說誰比誰更具優(yōu)勢。選擇哪個(gè)框架將取決于你實(shí)際參與的項(xiàng)目類型是什么。兩者都有其優(yōu)缺點(diǎn),所以我為大家總結(jié)了一張表,也許它能幫助你更好地進(jìn)行對比:
總結(jié)選擇什么,取決于您要開發(fā)的應(yīng)用程序。這兩個(gè)框架都在發(fā)展中。兩者也都在更新。
雖然Ember是一個(gè)全??蚣?,但它太復(fù)雜了,很難應(yīng)用于較小的項(xiàng)目。而Vue.js憑借著輕盈的體量,易于上手的特點(diǎn),使開發(fā)應(yīng)用程序變得異常高效,從而獲得了不少行業(yè)的開發(fā)者的青睞。
此外,無論選擇什么類型的框架,葡萄城都為廣大開發(fā)者提供了兼容各類框架的開發(fā)組件,例如:SpreadJS純前端表格控件和WijmoJS先進(jìn)UI組件庫 ,為開發(fā)者賦能。
本文是由葡萄城技術(shù)開發(fā)團(tuán)隊(duì)發(fā)布,轉(zhuǎn)載請注明出處:葡萄城官網(wǎng)
適合做seo的vue框架
每天進(jìn)步一點(diǎn)點(diǎn)...
之前的Vue項(xiàng)目使用過prerender-spa-plugin&vue-meta-info做seo,但對于博客類、新聞?lì)惖木W(wǎng)站,詳情頁還是無法被爬取到,只能做固定的頁面,今天把自己的Vue項(xiàng)目改造成Nuxt項(xiàng)目。
效果預(yù)覽:
https://www.lpya.cn/一、前期準(zhǔn)備
1、首先使用以下命令安裝nuxt項(xiàng)目
npx create-nuxt-app demo
安裝時(shí)會出現(xiàn)類似Vue安裝時(shí)出現(xiàn)的選項(xiàng),自己根據(jù)需求選擇就好
選項(xiàng)
2、使用下面命令安裝依賴并啟動項(xiàng)目,出現(xiàn)下面的就說明nuxt安裝成功
cnpm install npm run dev
效果圖
3、項(xiàng)目結(jié)構(gòu)對比Vue項(xiàng)目,兩個(gè)目錄結(jié)構(gòu)很相似,無非Vue是在src目錄下,Nuxt是在根目錄
Vue與Nuxt結(jié)構(gòu)對比
二、如何修改
1、main.js
把Vue里面的main.js文件放到Nuxt根目錄下,去掉new Vue({}),并在nuxt.config.js文件引入,其它不變
//main.js文件 import Vue from 'vue' import bus from "@/assets/bus/bus" Vue.prototype.$bus = bus; import VueCookies from 'vue-cookies' Vue.use(VueCookies) import mavonEditor from "mavon-editor"; Vue.use(mavonEditor) Vue.prototype.$host = "
https://www.lpya.cn" // new Vue({ // render: h => h(App), // }).$mount('#app') //nuxt.config.js export default { ... plugins: [ "@/main",//引入main.js,其它js文件基本上是在這里引入 ], }
2、store.js文件
在store目錄下創(chuàng)建index.js文件,引入后在頁面直接this.$store調(diào)用
//index.js export const state = () => ({ isHeader: false, }) const mutations = { isHeader(state, val) { state.isHeader = val; }, } export default { state, mutations } //nuxt.config.js export default { ... plugins: [ "@/store/index",//引入store ], }
3、組件
1)把Vue components目錄下的全部放到Nuxt components目錄下就行,Nuxt的組件會自動注冊,可以不使用import注冊直接使用
2)把組件復(fù)制過來后,可能會出現(xiàn)scss的錯(cuò)誤(我Vue項(xiàng)目使用的是SCSS),使用下面命令安裝
npm install --save-dev node-sass sass-loader @nuxtjs/style-resources
配置SCSS的全局變量
//nuxt.config.js export default { ... css: [ '@/assets/scss/common.scss',//一般的可以放到這里 ], styleResources: { scss: '~assets/scss/app.scss', }, modules: [ '@nuxtjs/style-resources', ], }
4、路由
把Vue views目錄下的全部放到Nuxt pages目錄下,文件名就是路由,值得注意的是,傳參的時(shí)候和Vue有一些不同。比如我博客網(wǎng)站文章詳情的路由是/detail,要傳一個(gè)id過去,跳轉(zhuǎn)鏈接可以寫成下面這樣
現(xiàn)有的Vue項(xiàng)目改造成Nuxt項(xiàng)目并做SEO優(yōu)化
路由
5、布局
Nuxt可以自定義多個(gè)布局,比如說一個(gè)布局需要Header和Footer,一個(gè)布局不需要,另一個(gè)需要空白,我們可以在layouts定義布局,并在pages頁面下調(diào)用即可
export default { layout: function () { //index1是在layouts目錄下創(chuàng)建的文件名,記得加上
return "index1"; }, }
6、設(shè)置網(wǎng)站title
使用head()給每個(gè)頁面設(shè)置title和description
export default { head() { return { title: "網(wǎng)頁設(shè)計(jì),模板分享,源碼下載 - 糊涂博客", meta: [ { hid: "keywords", name: "keywords", content: "個(gè)人博客,網(wǎng)頁設(shè)計(jì),微信小程序,seo優(yōu)化,源碼下載,模板分享", }, { hid: "description", name: "description", content: "糊涂個(gè)人博客,一位編程愛好者的成長地。專注于前后端的學(xué)習(xí),不定期更新分享踩坑過程,學(xué)習(xí)記錄、網(wǎng)頁模板、demo源碼等,也希望借此能夠認(rèn)識更多的朋友。", }, ], }; }, }
三、SEO優(yōu)化
配置到這里,Vue項(xiàng)目基本上已經(jīng)改造成Nuxt項(xiàng)目,但是和Vue的區(qū)別不大,詳情頁面還是無法被爬取到,這里我們需要使用asyncData,它可以在初始化頁面前先得到數(shù)據(jù),然后設(shè)置title。其它作用可以自己查。。。
//詳情頁面 import { articleDetail } from "@/assets/api/api"; export default { asyncData({ app, params }, callback) { return articleDetail(params.id).then((res) => { const { code, data } = res; if (code === 1) { app.head.title =data.title; const meta = [ { charset: "utf-8", }, { name: "viewport", content: "width=device-width, initial-scale=1", }, { hid: "keywords", name: "keywords", content:data.keywords, }, { hid: "description", name: "description", content: data.content, }, ]; app.head.meta = meta; } callback(null, {}); }); }, }
四、項(xiàng)目部署
1、使用下面命令打包項(xiàng)目,會創(chuàng)建.nuxt目錄,把下面文件放到服務(wù)器上
npm run build
需要部署的文件
2、使用下面命令安裝依賴并運(yùn)行
cnpm install npm run start
運(yùn)行
3、配置域名訪問,我使用的是bt面板,找到配置文件在里面添加下面內(nèi)容,使用域名就可以訪問剛部署的內(nèi)容了
upstream lpya { server 0.0.0.0:7000; } server { location / { proxy_pass
http://lpya; proxy_set_header Origin ''; index index.html index.htm; } }
4、如果我們關(guān)閉終端,服務(wù)就關(guān)閉了,現(xiàn)在需要開戶守護(hù)進(jìn)程,讓它在后臺一直運(yùn)行,創(chuàng)建pm2.config.json文件
{ "apps": { "name": "sever", "script": "npm run start", "ignore_watch": [ "node_modules" ] } } //然后運(yùn)行 //pm2 start pm2.config.json啟動 //pm2 stop pm2.config.json關(guān)閉
五、爬取效果
使用bd站長工具的抓取診斷,可以查看做之前和之后的一個(gè)對比。下圖可以明顯看出,沒改之前只能抓取到固定的信息,改之后可以動態(tài)抓取到內(nèi)容(重點(diǎn)是使用了asyncData)
前后對比
六、sitemap.xml網(wǎng)站地圖
Sitemap可以方便我們告訴搜索引擎網(wǎng)站上有哪些可供抓取的網(wǎng)頁。
1、使用命令安裝@nuxtjs/sitemap
npm install @nuxtjs/sitemap
2、創(chuàng)建config目錄,并在里面添加sitemap.js文件
//sitemap.js import axios from 'axios' const sitemap = { path: '/sitemap.xml', hostname: '
https://www.lpya.cn/', cacheTime: 1000 * 60 * 60 * 24, gzip: true, generate: false, exclude: [ '/404' ], defaults: { changefreq: 'daily', lastmod: new Date() }, routes: async () => { const getUrl = `
https://www.lpya.cn/article/get` let res = await axios.post(getUrl) let { data } = res.data let routes = [{ url: "/", changefreq: "daily", lastmod: new Date() }] if (data.length !== 0) { //拼接 let arr = data.map(item => ({ url: "/detail/" + item.id, lastmod: item.created_at, changefreq: "daily" })) routes.push(...arr) } return routes } } export default sitemap
3、在nuxt.config.js引入,部署時(shí)記得把config目錄也上傳服務(wù)器
//nuxt.config.js import sitemap from "./config/sitemap" export default { ... modules: [ '@nuxtjs/style-resources', ], sitemap: sitemap,//調(diào)用 }
4、部署后訪問
https://.../sitemap.xml鏈接就可以查看效果
sitemap
七、總結(jié)
雖然看起來多,實(shí)際也就幾步操作,我也是第一次接觸nuxt,有些地方可能弄不好或許也有更好的方法,有大神知道的可以吱一聲[靈光一閃]。。。有需要的可以自己慢慢嘗試,bug總會被解決的(或許[流淚])。
適合做seo的前端框架
當(dāng)你將長期存在的后端整體,細(xì)分為各種微服務(wù)時(shí),就可以在后端的開發(fā)過程中獲得更加有效也更具規(guī)模的新事物。然而,大多數(shù)前端應(yīng)用程序如今仍然獨(dú)立存在很難變得更加高效,與此同時(shí),對于前端發(fā)展進(jìn)程的規(guī)模化也具有同樣的意義。
微前端就是要將前端整體細(xì)分為更小、更容易進(jìn)行管控的片段。每個(gè)部分都可以端到端地?fù)碛凶约旱墓δ?,可以在自身的代碼庫中工作、獨(dú)立發(fā)布版本、可以不斷地進(jìn)行小的增量升級,并且還可以通過API與其他部分進(jìn)行集成,以便共同對頁面和應(yīng)用程序進(jìn)行創(chuàng)作和管理。
有許多方法可以構(gòu)建微前端,從組件的智能構(gòu)建時(shí)集成,到使用自定義路由的運(yùn)行時(shí)集成。在這篇文章中,我收集了許多杰出的工具,來幫助我們構(gòu)建微前端。歡迎您在評論區(qū)發(fā)表建議提供或反饋!
1BitBit允許你從獨(dú)立的組件進(jìn)行構(gòu)建并管理前端,它可能是最受歡迎的,并且可以立即投入生產(chǎn)的解決方案。
如果你查看bit.dev 主頁,你就會發(fā)現(xiàn),它是由很多獨(dú)立的組件構(gòu)成,這些組件由不同的團(tuán)隊(duì),在不同的代碼庫中構(gòu)建,并且最終集成在一起。
Bit CLI是用于組件驅(qū)動開發(fā),并且廣泛流行的工具。通過Bit,你可以一起構(gòu)建、創(chuàng)立并集成獨(dú)立的組件。
盡管微前端通常被認(rèn)為是一個(gè)發(fā)生在運(yùn)行時(shí)的組合,但是Bit也讓開發(fā)者在構(gòu)建時(shí)高效地組合前端,以享受兩方面的優(yōu)勢:一方面是對于“傳統(tǒng)整體”的安全性和健壯性,另一方面可以簡化微前端,并且使其具有可擴(kuò)展性。
使用Bit,在于其他團(tuán)隊(duì)合作的同時(shí),不同的團(tuán)隊(duì)可以對他們的組件進(jìn)行獨(dú)立的構(gòu)建、發(fā)布和公開。這樣就可以將web開發(fā)過程轉(zhuǎn)變?yōu)楣δ芎徒M件的模塊化組合。
除了用于組件驅(qū)動開發(fā)的OSS工具外,Bit還為團(tuán)隊(duì)提供了一個(gè)云平臺,讓團(tuán)隊(duì)可以構(gòu)建變更并在組件上進(jìn)行協(xié)作,以便可以高效地管理和擴(kuò)展開發(fā)過程,與此同時(shí)保持所有團(tuán)隊(duì)完全獨(dú)立以自主交付。
為了確保每個(gè)前端都有自己獨(dú)立且快速的構(gòu)建流程,Bit還提供了獨(dú)特的CI / CD流程,該流程100%由組件驅(qū)動,這意味著不同的團(tuán)隊(duì)可以安全地進(jìn)行集成更改,不必等待、爭奪主控權(quán)或打破任何東西。開發(fā)人員可以持續(xù)并且安全的避讓所有受影響的應(yīng)用程序,從而將更改傳播到組件中。
結(jié)果就是,工作流通過簡單的解耦代碼庫、自治團(tuán)隊(duì)、體積較小卻定義良好的API,獨(dú)立發(fā)布渠道, 并且持續(xù)地進(jìn)行增量更新。
如果你的團(tuán)隊(duì)正在通過組件進(jìn)行構(gòu)建,并且正在尋找一種可以在大型應(yīng)用程序上解鎖微前端和模塊化工作的解決方案,請一定要查看Bit的OSS工具和平臺,它可能正是你需要的。
2Webpack 5 和 Module Federation多個(gè)單獨(dú)的構(gòu)建最后要形成一個(gè)單獨(dú)的應(yīng)用程序。這些獨(dú)立的構(gòu)建不應(yīng)相互依賴,因此可以單獨(dú)開發(fā)和部署。
Module Federation是由Zack Jackson建立的JavaScript架構(gòu),并在后來提出為其創(chuàng)建Webpack插件。Webpack團(tuán)隊(duì)幫助它將該插件引入了Webpack 5,目前處于測試階段。
簡而言之,Module Federation允許JavaScript應(yīng)用程序在運(yùn)行時(shí)從另一個(gè)應(yīng)用程序動態(tài)導(dǎo)入代碼。該模塊將建立唯一的JavaScript條目文件,能夠通過設(shè)置webpack配置,使其他應(yīng)用程序可以下載該文件。
它還通過啟用依賴關(guān)系共享,來解決代碼依賴關(guān)系和增加包大小的問題。例如,如果你要下載React組件,那么你的應(yīng)用程序就不會兩次導(dǎo)入React代碼。該模塊將巧妙地使用你已經(jīng)擁有的React源,僅導(dǎo)入組件代碼。最后,如果導(dǎo)入的代碼由于某種原因失敗,則可以使用React.lazy和React.suspense提供備用功能,以確保用戶體驗(yàn)不會因構(gòu)建失敗而中斷。
這個(gè)架構(gòu)釋放了構(gòu)建微前端真正巨大的潛力。
3Single SPASingle SPA 將自己定義為:微前端的JavaScript框架。簡而言之,它將生命周期運(yùn)用到了每一個(gè)應(yīng)用程序。每個(gè)應(yīng)用程序都可以響應(yīng)url路由事件,并且必須知道如何從DOM引導(dǎo),安裝和卸載自身。傳統(tǒng)SPA和Single SPA應(yīng)用程序之間的主要區(qū)別在于它們必須能夠與其他應(yīng)用程序共存,并且它們各自沒有自己的HTML頁面。
4SystemjsSystemjs并不是微前端的框架,但是它提供了獨(dú)立模塊跨瀏覽器管理的解決方案。這種方案正是實(shí)施MF的關(guān)鍵(實(shí)際上也被用于Single SPA)。
Systemjs被看做JS模塊的協(xié)調(diào)器,它能夠讓我們運(yùn)用不同的JS模塊連接的特點(diǎn),例如動態(tài)導(dǎo)入、導(dǎo)入映射等等,而不是依賴于本地的瀏覽器支持——在以上方面,Systemjs都具有接近本地的性能。
一些值得注意的功能包括適用于老版本瀏覽器的Polyfill,使用名稱的模塊導(dǎo)入(通過將名稱映射到路徑),和對多個(gè)JS模塊單個(gè)的網(wǎng)絡(luò)請求(通過使用它的API,將多個(gè)模塊設(shè)置為單個(gè)文件)。
Systemjs還可輕松訪問“模塊注冊表”,能夠讓你隨時(shí)了解到瀏覽器中的可用模塊。
5PiralPiral的目標(biāo)是讓你輕松通過微前端建立一個(gè)門戶應(yīng)用,它能夠確保你能夠創(chuàng)建一個(gè)模塊化的應(yīng)用程序,并且利用微前端體系結(jié)構(gòu),在運(yùn)行時(shí)使用被稱為“pilets”的解耦模塊進(jìn)行擴(kuò)展?!皃ilet”能夠獨(dú)立開發(fā),并附帶著必要的代碼和其他相關(guān)資源。
這種前提條件非常不錯(cuò),開發(fā)人員只需要安裝使用你最喜歡的編輯器,終端,網(wǎng)絡(luò)瀏覽器和Node.js即可。你可以在本地開發(fā)計(jì)算機(jī)上的仿真器中,執(zhí)行和調(diào)試Piral instance(應(yīng)用程序外殼)和pilet(功能模塊)。
6Open ComponentsOpen Components宣布他們的目標(biāo)是“讓前端世界中無服務(wù)器”。更具體地說就是,Open Components的目標(biāo)是成為一個(gè)一站式微前端框架,從而使其成為一個(gè)豐富而復(fù)雜的系統(tǒng),其中包括從組件處理、注冊表,到模板,甚至包括CLI工具在內(nèi)的各種工具。
Open Components有兩個(gè)部分:
第一,components是同構(gòu)代碼的小單元,主要由html,css,js組成。它們可以選擇包含一些邏輯,從而允許服務(wù)器端的node.js應(yīng)用程序組成一個(gè)用于呈現(xiàn)視圖的模型。經(jīng)過渲染后,它們是純HTML片段,可以插入到任何html頁面中。
第二,consumers是網(wǎng)站或微型網(wǎng)站(小型的可獨(dú)立部署的小型網(wǎng)站,都通過前門服務(wù)或任何路由機(jī)制連接),它們需要將components用于在其網(wǎng)頁中,以此呈現(xiàn)部分內(nèi)容。
7QiankunQiankun宣稱他們是“一個(gè)基于single-spa的微前端實(shí)現(xiàn),但它已經(jīng)可以投入生產(chǎn)了”,它的目標(biāo)是解決一些,從小型子應(yīng)用程序構(gòu)建大型應(yīng)用程序過程中,可能會面臨的一些主要問題,比如發(fā)布靜態(tài)資源,整合單個(gè)的子應(yīng)用程序,確保子應(yīng)用程序在開發(fā)和部署過程中彼此獨(dú)立,運(yùn)行時(shí)相互隔離,從而處理公共依賴性,處理各種性能問題等。
8LuigiLuigi是一個(gè)微前端JavaScript框架,可以讓你創(chuàng)建由本地和分布式視圖驅(qū)動的管理用戶界面。Luigi允許Web應(yīng)用程序與應(yīng)用程序包含的微型前端進(jìn)行交流與通信。為確保通信的交流順利進(jìn)行,你可以對路由,導(dǎo)航,授權(quán)和UX元素等進(jìn)行配置。
Luigi由Luigi Core應(yīng)用程序和Luigi 客戶端庫組成。他們使用postMessage API在核心應(yīng)用程序和微前端之間建立安全的通信。
9FrintJSFrintJS是一個(gè)“用于構(gòu)建可伸縮和響應(yīng)式應(yīng)用程序的模塊化JavaScript框架”。你可以用它加載來自不同bundlers的應(yīng)用程序,為應(yīng)用程序提供結(jié)構(gòu),并處理諸如路由,依賴關(guān)系以及其他問題。FrintJS還可以通過其他程序包支持RN和Vue,但主要是對React進(jìn)行記錄和測試。
10 Mosaic 9Mosaic 9是一組服務(wù)、庫,以及一個(gè)定義了它組成部分之間如何進(jìn)行交互的規(guī)范,以支持大型網(wǎng)站的微服務(wù)樣式架構(gòu),由一些處理不同需求,比如路由、布局、模板存儲、甚至展示UI的軟件包組成。Mosaic運(yùn)用的這些片段提供獨(dú)立的服務(wù),并且根據(jù)模板定義,在運(yùn)行時(shí)將他們組合在一起。
11PuzzleJSPuzzleJS是一個(gè)“用于可擴(kuò)展和快速網(wǎng)站微前端框架”,允許你創(chuàng)建和一個(gè)相互對話的網(wǎng)關(guān)和店面項(xiàng)目。它的靈感來自Facebook的BigPipe,并且朝著微前端的方向發(fā)展。
PuzzleJS可以提供的功能包括創(chuàng)建一個(gè)網(wǎng)關(guān),或者店面(彼此獨(dú)立),同時(shí)也可以通過提供一個(gè)組態(tài)文件把它們連接起來。它使你可以在編譯時(shí)將html模板編譯為javascript函數(shù)。由于這種操作完全與請求相獨(dú)立,因此PuzzleJ可以通過這種功能發(fā)送第一個(gè)組塊。
它也是SEO友好的,已在服務(wù)器端進(jìn)行了準(zhǔn)備和渲染。而且,當(dāng)片段所需的API出現(xiàn)故障時(shí),PuzzleJs也保證其他頁面片段仍然可以正常工作。
適合做seo的vue框架
JavaScript最初是為Web應(yīng)用程序創(chuàng)建的。但是隨著前端技術(shù)的發(fā)展,大多數(shù)開發(fā)人員更喜歡使用基于JavaScript的框架。它簡化了你的代碼以及使你能完成更多全棧工作,您幾乎可以在任何框架中使用JavaScript。
使用什么類型的框架決定了創(chuàng)建應(yīng)用程序的便捷程度。因此,您必須慎重選擇。在已經(jīng)足夠復(fù)雜的前端環(huán)境里,其中兩個(gè)框架脫穎而出。我們會在本文中對Ember.js和Vue.js之間進(jìn)行對比,以幫助你更好的做出判斷。
為什么要選擇框架?在開始比較這兩個(gè)框架之前,我們應(yīng)該先來了解下選擇一個(gè)框架的決定因素都有什么。每個(gè)開發(fā)人員選擇一個(gè)框架之前,讓我們看看選擇的理由。
代碼必須簡單易懂。
應(yīng)以更少的代碼量產(chǎn)出更多的功能。
應(yīng)提供一個(gè)布局合理的工作框架。
是否支持內(nèi)置路由或外部插件的路由?
應(yīng)該能夠在頁面加載時(shí)傳輸更多數(shù)據(jù),從而使頁面成為單頁應(yīng)用,單頁應(yīng)用程序使用體驗(yàn)顯然更好。
在單頁架構(gòu)中,如果用戶需要共享應(yīng)用子頁面鏈接,那么框架應(yīng)該具有基于URL路由不同功能的能力。
更嚴(yán)格的模板選項(xiàng)有助于實(shí)現(xiàn)雙向綁定。
不應(yīng)與任何第三方庫產(chǎn)生沖突。
應(yīng)該很容易測試框架內(nèi)的代碼。
應(yīng)為Ajax調(diào)用提供HTTP客戶端服務(wù)
文檔也必不可少,應(yīng)該是完整且最新。
應(yīng)該與瀏覽器的最新版本兼容。
必須滿足上述條件,便于APP的構(gòu)建。您必須確保所選擇的框架符合條件。
Vue.js開發(fā)人員總是在尋找新的框架來構(gòu)建他們的應(yīng)用程序。主要要求是速度快、成本低。這個(gè)框架應(yīng)該很容易被新開發(fā)人員理解并且能夠以更低的成本使用。其他考慮選項(xiàng)還有簡單的編碼方式、健全的幫助文檔等。
在Web應(yīng)用程序開發(fā)中,VUEJS在軟件語言方面結(jié)合了很多優(yōu)點(diǎn)。VUE.JS的體系結(jié)構(gòu)易于使用。使用VUE.JS開發(fā)的應(yīng)用程序很容易與新的應(yīng)用程序集成。
VUE.JS是一個(gè)非常輕量級的框架。你能很快的下載到它。它也比其他框架快得多。該框架的單文件組件性質(zhì)也很棒。這個(gè)尺寸使它很受歡迎。
同時(shí)你可以進(jìn)一步減少它的體積。使用Vue.js可以將模板和編譯器分離為虛擬DOM。您只能部署只有12 KB的壓縮后的壓縮解釋器。您可以在您的機(jī)器中編譯模板。
Vue.js的另一個(gè)重要優(yōu)點(diǎn)是它可以輕松地與使用JavaScript創(chuàng)建的現(xiàn)有應(yīng)用程序集成。使用此框架可以輕松地對已經(jīng)存在的應(yīng)用程序進(jìn)行更改。
Vue.js還可輕松與其他前端庫集成。您可以插入另一個(gè)庫,以彌補(bǔ)此框架中的任何不足。此功能使該工具成為通用工具。
Vue.js使用服務(wù)器端渲染流的方法。它使服務(wù)器具有較高的響應(yīng)速度。 你的用戶將很快獲得渲染的內(nèi)容。
Vue.js非常適合SEO。由于該框架支持服務(wù)器端渲染,因此視圖直接在服務(wù)器上渲染。便于搜索引擎直接索引到這些網(wǎng)頁內(nèi)容。
但對你來說最重要的是你可以輕松地學(xué)習(xí)Vue.js。該結(jié)構(gòu)是基本的。即使是新的開發(fā)人員,也會發(fā)現(xiàn)使用它來構(gòu)建應(yīng)用程序很容易。該框架有助于開發(fā)大型和小型模板。它有助于節(jié)省大量時(shí)間。
您可以返回并輕松檢查錯(cuò)誤。除了測試組件外,您還可以返回并檢查所有狀態(tài)。就任何開發(fā)人員而言,這是另一個(gè)重要功能。
Vue.js也有非常詳細(xì)的文檔。它有助于為你快速上手開發(fā)應(yīng)用程序。您可以使用HTML或JavaScript的基本知識來構(gòu)建網(wǎng)頁或應(yīng)用。
Vue.js它能與其他應(yīng)用程序集成
Vue.js輕巧且快速。通過部署解釋器,就可以使它更輕量
您可以將編譯器和模板分離為虛擬DOM。
得益于便于集成的優(yōu)點(diǎn),您可以使用它來對現(xiàn)有應(yīng)用進(jìn)行更改
豐富的庫和組件為你的應(yīng)用程序帶來更多可能
應(yīng)用能夠快速響應(yīng)。
服務(wù)器端渲染還有助于使搜索引擎排名更高。
結(jié)構(gòu)簡單。易于任何新開發(fā)者使用
您可以返回檢查并更正錯(cuò)誤。
您可以檢查所有現(xiàn)有狀態(tài)。
詳細(xì)的文檔有助于快速構(gòu)建網(wǎng)頁或應(yīng)用程序。
Ember.jsEmber.js是MVVM模型框架。它是開源軟件。該平臺主要用于創(chuàng)建復(fù)雜的多頁面應(yīng)用程序。它保持最新的特性,并不會丟棄任何舊功能。
通過這個(gè)框架,您必須嚴(yán)格遵循框架的體系結(jié)構(gòu)。JS框架是非常嚴(yán)密的組織。所以它降低了和其他框架可能提供的靈活性。
它的平臺和工具有非常完善的控制系統(tǒng)。您可以使用提供的工具將其與新版本集成,以避免使用過時(shí)的API。
您可以輕松了解Ember的API。他們也很容易工作。您可以簡單,直接地使用高度復(fù)雜的功能。
當(dāng)類似的工作一起處理時(shí),性能更好。它創(chuàng)建了相似的綁定和DOM更新,讓瀏覽器一次性處理它們,以提高性能。這樣則將避免為每個(gè)工作重復(fù)計(jì)算,以免浪費(fèi)大量時(shí)間。
因?yàn)镻romise無處不在,所以你可以以簡單的方式編寫代碼和模塊,使用 Ember 的任何 API。
同時(shí)Ember也有一個(gè)很不錯(cuò)的上手指南。上面記錄著API的使用方式。Ember明確了一般應(yīng)用程序的組織和結(jié)構(gòu),因此你將不會犯任何錯(cuò)誤。你將不可能在不必要的情況下使程序復(fù)雜化。Ember的模板語言是Handlebar,Handlebar簡潔的語法可以使你可以輕松閱讀和理解模板,同樣的也能使頁面加載速度變得更快。使用Handlebar另一個(gè)優(yōu)勢是,不必每次在頁面上添加或刪除數(shù)據(jù)時(shí)都更新模板。語言本身將自動為你完成。
最后,Ember.js擁有一個(gè)活躍的社區(qū),可以定期更新框架并從而促進(jìn)向后兼容
Ember.js是適用于復(fù)雜結(jié)構(gòu)的多頁應(yīng)用程序的MVVM模型開源框架。
同時(shí)提供了最新功能和舊的功能。
它有一個(gè)非常嚴(yán)密的結(jié)構(gòu)框架,不能提供太高的靈活性
非常完善的控制系統(tǒng)可幫助你與新版本完美集成。
對避免使用過時(shí)的API版本有著嚴(yán)格的指導(dǎo)。
Ember的API可幫助您以簡單的方式使用復(fù)雜的功能
該框架提供高效的運(yùn)算機(jī)制,以保證運(yùn)行效率
Promise可讓你使用Ember.js的任何API來編寫模塊化和簡單的代碼。
Ember.js是一個(gè)完全加載的前端框架。
框架穩(wěn)定,因?yàn)樗薪M件都具有相同的功能和屬性。
具有明確定義的限制,可防止您使應(yīng)用程序復(fù)雜化
Handlebar使你可以輕松閱讀和理解模板。并且還有助于更快地加載模板。
每次添加或刪除數(shù)據(jù)時(shí),Handlebar將確保更新模板。
Ember.js有一個(gè)活躍的社區(qū),可以定期更新框架并從而促進(jìn)向后兼容。
Ember.js Vue.js對比當(dāng)你需要將原有應(yīng)用程序向現(xiàn)代框架上遷移時(shí),Vue.js可以為您提供幫助。它結(jié)合了其他框架的許多優(yōu)點(diǎn)。Vue.js面向開發(fā)過程的框架,所以沒有提供現(xiàn)成的界面元素庫。但是,許多第三方社區(qū)庫可以為您提供幫助。
Ember.js為您提供了一個(gè)值得信賴的成熟框架。當(dāng)你的開發(fā)團(tuán)隊(duì)規(guī)模很大時(shí),這個(gè)框架比較合適。由于MVVM結(jié)構(gòu)所致,它使每個(gè)人都可以為項(xiàng)目做出貢獻(xiàn)。
Vue.js可以幫助你兼容應(yīng)用程序中不同類型的語法,它有助于輕松編寫代碼,同時(shí)由于后端渲染,它也是一個(gè)對SEO友好的框架。而Ember是一個(gè)完全加載的前端框架,可以幫助您非??焖俚亻_發(fā)應(yīng)用程序。但是它不適合開發(fā)小型項(xiàng)目。
很難說誰比誰更具優(yōu)勢。選擇哪個(gè)框架將取決于你實(shí)際參與的項(xiàng)目類型是什么。兩者都有其優(yōu)缺點(diǎn),所以我為大家總結(jié)了一張表,也許它能幫助你更好地進(jìn)行對比:
總結(jié)選擇什么,取決于您要開發(fā)的應(yīng)用程序。這兩個(gè)框架都在發(fā)展中。兩者也都在更新。
雖然Ember是一個(gè)全棧框架,但它太復(fù)雜了,很難應(yīng)用于較小的項(xiàng)目。而Vue.js憑借著輕盈的體量,易于上手的特點(diǎn),使開發(fā)應(yīng)用程序變得異常高效,從而獲得了不少行業(yè)的開發(fā)者的青睞。
此外,無論選擇什么類型的框架,葡萄城都為廣大開發(fā)者提供了兼容各類框架的開發(fā)組件,例如:SpreadJS純前端表格控件和WijmoJS先進(jìn)UI組件庫 ,為開發(fā)者賦能。
本文是由葡萄城技術(shù)開發(fā)團(tuán)隊(duì)發(fā)布,轉(zhuǎn)載請注明出處:葡萄城官網(wǎng)