React.js和Vue.js都是很好的框架，而Next.js和Nuxt.js甚至将它们带入了一个新的高度，这有助于我们以更少的配置和更好的可维护性来创建应用程序。但是，如果你必须经常在框架之间切换，在深入探讨另一个框架之后，你可能会轻易忘记另一个框架中的语法。在本文中，我总结了这些框架的基本语法和方案，然后并排列出。我希望这可以帮助我们尽快掌握语法。
上一篇我们已经介绍了：React.js和Vue.js的语法并列比较
目录
Assets
Next.js
Nuxt.js
基本路由
动态路由
Link
Fetch-On-Server
Next.js
Nuxt.js
Layout
Next.js
Nuxt.js
错误页面
Next.js
Nuxt.js
Meta-Tag
Context
Next.js
Nuxt.js
CLI
React.js: create-react-app
Next.js: create-next-app
Vue.js: vue-cli
Assets
Next.js
/*
|- public/
|-- my-image.png
*/
function MyImage() {
return <img src="/my-image.png" alt="my image" />;
}
Nuxt.js
assets，默认情况下，Nuxt使用vue-loader、file-loader和url-loader来提供强大的assets服务。
<!--
|- assets/
|- image.png
-->
<img src="~/assets/image.png" alt="image" />
static，自动服务
<!--
|- static/
|- image.png
-->
<img src="/image.png" alt="image" />
基本路由
Next.js
|- pages/
|- index.js → href="/"
|- blog/index.js → href="/blog"
Nuxt.js
|- pages/
|- index.vue → href="/"
|- blog/index.vue → href="/blog"
动态路由
Next.js
|- pages/
|- blog/[slug].js → href="/blog/:slug" (eg. /blog/hello-world)
|- [username]/[option].js → href="/:username/:option" (eg. /foo/settings)
|- post/[...all].js → href="/post/*" (eg. /post/2020/id/title)
Nuxt.js
|- pages/
|- blog/[slug].vue → href="/blog/:slug" (eg. /blog/hello-world)
|- _username/_option.vue → href="/:username/:option" (eg. /foo/settings)
Link
Next.js
import Link from "next/link";
function Home() {
return (
<Link href="/">
<a>Home</a>
</Link>
);
}
Nuxt.js
<template>
<nuxt-link to="/">Home page</nuxt-link>
</template>
Fetch-On-Server
Next.js
getInitialProps只能在每个页面的默认导出中使用
< Next.js 9.3 (class component)
import fetch from "isomorphic-unfetch";
export default class Page extends React.Component {
static async getInitialProps(ctx) {
const res = await fetch(`https://.../data`);
const data = await res.json();
return { props: { data } };
}
render() {
// Render data...
}
}
< Next.js 9.3 (function component)
import fetch from "isomorphic-unfetch";
function Page({ data }) {
// Render data...
}
Page.getInitialProps = async (ctx) => {
const res = await fetch(`https://.../data`);
const data = await res.json();
return { props: { data } };
};
>= Next.js 9.3
import fetch from "isomorphic-unfetch";
function Page({ data }) {
// Render data...
}
export async function getServerSideProps() {
const res = await fetch(`https://.../data`);
const data = await res.json();
return { props: { data } };
}
export default Page;
Nuxt.js
<template>
<div v-if="$fetchState.error">发生了一些错误 
