vue框架简介_Next.js和Nuxt.js的语法比较,Vue和React的两大SSR解决方案

React.jsVue.js都是很好的框架。而且Next.jsNuxt.js甚至将它们带入了一个新的高度,这有助于我们以更少的配置和更好的可维护性来创建应用程序。但是,如果你必须经常在框架之间切换,在深入探讨另一个框架之后,你可能会轻易忘记另一个框架中的语法。在本文中,我总结了这些框架的基本语法和方案,然后并排列出。我希望这可以帮助我们尽快掌握语法。

c8b9649dc1e18c2841a57cdb4204d337.png

在上一篇文章:React.js和Vue.js的语法并列比较 介绍了Vue.js和React.js的语法差异。


Assets

Next.js

/*|- public/|-- my-image.png*/function MyImage() {  return ;}

Nuxt.js

assets,默认情况下,Nuxt使用vue-loader、file-loader和url-loader来提供强大的assets服务。

static,自动服务

基本路由

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 (          Home      );}

Nuxt.js

Home page
544746c8f31b501b306c998755269691.png

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

发生了一些错误
Loading...

{{ post.title }}

{{ post.body }}    
刷新

Layout

Next.js

./pages/_app.js:自动应用于所有页面

export default function MyApp({ Component, pageProps }) {  return (      );}

Nuxt.js

layouts/with-header-footer.vue:创建布局

pages/index.vue:应用布局

错误页面

Next.js

pages/_error.js

function Error({ statusCode }) {  return (    

{statusCode ? `An error ${statusCode} occurred on server` : "An error occurred on client"}

);}Error.getInitialProps = ({ res, err }) => { const statusCode = res ? res.statusCode : err ? err.statusCode : 404; return { statusCode };};export default Error;

Nuxt.js

layouts/error.vue

Page not found

一个错误发生

Home page

Meta-Tag

Next.js

import Head from "next/head";function IndexPage() {  return (    
My page title

Hello world!

);}

Nuxt.js

{{ title }}

Context

Next.js

getInitialProps只能在每个页面的默认导出中使用

function Page({ data }) {  // 渲染数据...}Page.getInitialProps = async (context) => {  const { pathname, query, asPath, req, res, err } = context;  // pathname - 当前路径,这是/pages中的页面路径。  // query - 将URL的查询字符串部分作为对象进行解析  // asPath - 浏览器中显示的实际路径(包括查询)的字符串  // req - HTTP request object (server only)  // res - HTTP response object (server only)  // err - 如果在渲染过程中遇到任何错误,则为错误对象。  return { props: { project: "next" } };};

Nuxt.js

export default {  asyncData(context) {    // 通用keys    const {      app,      store,      route,      params,      query,      env,      isDev,      isHMR,      redirect,      error,    } = context;    // 服务器端    if (process.server) {      const { req, res, beforeNuxtRender } = context;    }    // 客户端    if (process.client) {      const { from, nuxtState } = context;    }    return { project: "nuxt" };  },};

CLI

React.js: create-react-app

npx create-react-app react-template

Next.js: create-next-app

npx create-next-app next-template

Vue.js: vue-cli

yarn global add @vue/clivue create vue-template

如果对你有所启发和帮助,可以点个关注、收藏、转发,也可以留言讨论,这是对作者的最大鼓励。

作者简介:Web前端工程师,全栈开发工程师、持续学习者。

私信回复大礼包送某网精品视频课程网盘资料,准能为你节省不少钱!

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: vue.js devtools_5.3.3_chrome.cn.zip是一种用于谷歌浏览器的vue.js开发工具包,适用于开发vue.js前端应用程序。该工具包可以协助开发者对vue.js应用程序进行调试和监视。它包含了一些非常有用的功能,例如实时调试、状态管理、路由、组件、事件和动画工具等。 除了基本的功能外,vue.js devtools_5.3.3_chrome.cn.zip还提供了其他一些高级功能,例如缩放、搜索、过滤、追踪等。开发者可以使用这些功能来调试js代码、优化性能、测试响应时间等。 总体来说,vue.js devtools_5.3.3_chrome.cn.zip是一款非常实用的开发工具包,它可以协助开发者快速快速定位和解决vue.js应用程序中的问题,以便更好的提升应用程序的质量和用户体验。 ### 回答2: vue.js devtools_5.3.3_chrome.cn.zip是一个用于开发vue.js应用程序的Chrome浏览器插件,它提供了一系列工具和功能,帮助开发人员更好地调试和优化vue.js应用程序。 该插件允许你检查Vue组件的状态、属性、事件、计算属性和生命周期钩子,以及Vue实例的状态和组件层次结构。还可以追踪Vue活动,包括事件和网络请求,以及检查Vue.js开发者工具现有的应用程序状态。 该插件的另一个有用的功能是实时编辑和重载Vue组件,从而加快开发和测试过程。这个特性可以帮助开发人员实时查看他们所做的更改的结果,而无需手动刷新。 使用vue.js devtools_5.3.3_chrome.cn.zip将大大简化Vue.js应用程序开发和调试的过程,并帮助开发人员更加高效地工作。无论是在开发阶段还是在生产环境中,这个插件都是一个必备的工具。 ### 回答3: vue.js devtools_5.3.3_chrome.cn.zip是一款针对Vue.js开发的Chrome浏览器插件,可用于更方便地透视Vue.js应用程序并进行调试。使用此插件,用户可以轻松查看Vue组件树,进行状态和属性的检查和更改,并进行事件分析和调试。此外,vue.js devtools还具有性能分析功能,可以帮助开发者分析应用程序的性能数据,以及验证和优化应用程序的瓶颈。总之,vue.js devtools是一款实用而强大的工具,可以大大提高开发Vue.js应用程序的效率和质量。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值