精华内容
下载资源
问答
  • Laravel + Nuxt.js Boilerplate用于我们的PWA前端的NUXT是一个渐进的Vue.js框架@ nuxtjs / axios,用于与我们的API通信@n Laravel + Nuxt.js Boilerplate我们的PWA的前端包括NUXT,一个渐进式Vue.js框架@ nuxtjs / ...
  • Nuxt.js

    2021-01-27 09:27:29
    Nuxt.js 介绍 Nuxt.js 是什么? Nuxt.js 是一个基于 Vue.js 的通用应用框架。 通过对客户端/服务端基础架构的抽象组织,Nuxt.js 主要关注的是应用的 UI 渲染。 我们的目标是创建一个灵活的应用框架,你可以基于它...

    Study Notes

    Nuxt.js

    介绍

    Nuxt.js 是什么?

    Nuxt.js 是一个基于 Vue.js 的通用应用框架。

    通过对客户端/服务端基础架构的抽象组织,Nuxt.js 主要关注的是应用的 UI 渲染。

    我们的目标是创建一个灵活的应用框架,你可以基于它初始化新项目的基础结构代码,或者在已有 Node.js 项目中使用 Nuxt.js。

    Nuxt.js 预设了利用 Vue.js 开发服务端渲染的应用所需要的各种配置。

    除此之外,我们还提供了一种命令叫:nuxt generate ,为基于 Vue.js 的应用提供生成对应的静态站点的功能。

    我们相信这个命令所提供的功能,是向开发集成各种微服务(Microservices)的 Web 应用迈开的新一步。

    作为框架,Nuxt.js 为 客户端/服务端 这种典型的应用架构模式提供了许多有用的特性,例如异步数据加载、中间件支持、布局支持等。

    Nuxt.js 框架是如何运作的?

    在这里插入图片描述

    • Vue.js
    • Vue-Router
    • Vuex (当配置了 Vuex 状态树配置项 时才会引入)
    • Vue 服务器端渲染 (排除使用 mode: ‘spa’)
    • Vue-Meta

    压缩并 gzip 后,总代码大小为:57kb (如果使用了 Vuex 特性的话为 60kb)。

    另外,Nuxt.js 使用 Webpack 和 vue-loader 、 babel-loader 来处理代码的自动化构建工作(如打包、代码分层、压缩等等)。

    特性

    • 基于 Vue.js

      • Vue、Vue Router、Vuex、Vue SSR
    • 自动代码分层

    • 服务端渲染

    • 强大的路由功能,支持异步数据

    • 静态文件服务

    • ES2015+ 语法支持

    • 打包和压缩 JS 和 CSS

    • HTML 头部标签管理

    • 本地开发支持热加载

    • 集成 ESLint

    • 支持各种样式预处理器: SASS、LESS、 Stylus 等等

    • 支持 HTTP/2 推送

    创建项目

    Nuxt 提供了两种方式用来创建项目:

    • 使用 create-nuxt-app 脚手架工具
    • 手动创建

    这里介绍手动创建 Nuxt 项目

    准备工作

    // 创建项目文件夹
    mkdir nuxtjs-demo
    
    // 进入项目文件夹
    cd nuxtjs-demo
    
    // 初始化 package.json
    yarn init -y
    // 或者
    npm init -y
    
    // 安装 nuxt
    yarn add nuxt -D
    // 或者
    npm i nuxt -D
    

    配置 nuxt 运行脚本

    package.json

    {
      "name": "nuxtjs-demo",
      "scripts": {
        "dev": "nuxt"
      },
      "version": "1.0.0",
      "main": "index.js",
      "license": "MIT",
      "devDependencies": {
        "nuxt": "^2.14.3"
      }
    }
    

    上面的配置使得我们可以通过运行 npm run dev 或者 yarn dev 来运行 nuxt。

    新建 vue 页面并启动项目

    Nuxt.js 会依据 pages 目录中的所有 *.vue 文件生成应用的路由配置。

    // 创建pages 文件夹
    mkdir pages
    

    新建pages/index.vue

    <template>
      <div class="home">
        <h2>hello nuxt.js</h2>
      </div>
    </template>
    

    启动项目

    npm run dev
    // 或者
    yarn dev
    

    第一次启动项目,其会询问你是否加入他们,直接N就行了

    注意:Nuxt.js 会监听 pages 目录中的文件更改,因此在添加新页面时无需重新启动应用程序。

    router

    基本使用

    Nuxt.js 依据 pages 目录结构自动生成 vue-router 模块的路由配置。

    要在页面之间使用路由,我们建议使用<nuxt-link>标签。

    pages 目录结构

    在这里插入图片描述

    生成对应的 vue-router 配置

    • .nuxt/router.js
    import Vue from 'vue';
    import Router from 'vue-router';
    import { interopDefault } from './utils';
    import scrollBehavior from './router.scrollBehavior.js';
    
    const _6f480cd4 = () =>
      interopDefault(
        import(
          '..\\pages\\about\\index.vue' /* webpackChunkName: "pages/about/index" */
        ),
      );
    const _9b58e274 = () =>
      interopDefault(
        import(
          '..\\pages\\user\\index.vue' /* webpackChunkName: "pages/user/index" */
        ),
      );
    const _f046dd4c = () =>
      interopDefault(
        import('..\\pages\\user\\one.vue' /* webpackChunkName: "pages/user/one" */),
      );
    const _2585f79e = () =>
      interopDefault(
        import('..\\pages\\index.vue' /* webpackChunkName: "pages/index" */),
      );
    
    // TODO: remove in Nuxt 3
    const emptyFn = () => {};
    const originalPush = Router.prototype.push;
    Router.prototype.push = function push(location, onComplete = emptyFn, onAbort) {
      return originalPush.call(this, location, onComplete, onAbort);
    };
    
    Vue.use(Router);
    
    export const routerOptions = {
      mode: 'history',
      base: decodeURI('/'),
      linkActiveClass: 'nuxt-link-active',
      linkExactActiveClass: 'nuxt-link-exact-active',
      scrollBehavior,
    
      routes: [
        {
          path: '/about',
          component: _6f480cd4,
          name: 'about',
        },
        {
          path: '/user',
          component: _9b58e274,
          name: 'user',
        },
        {
          path: '/user/one',
          component: _f046dd4c,
          name: 'user-one',
        },
        {
          path: '/',
          component: _2585f79e,
          name: 'index',
        },
      ],
    
      fallback: false,
    };
    
    export function createRouter() {
      return new Router(routerOptions);
    }
    

    路由导航

    使用基本与 vue-router 一致

    a 标签

    <template>
      <!--会刷新页面,走服务端渲染-->
      <a href="/">home</a>
    </template>
    

    <nuxt-link> 组件

    <template>
      <!--  nuxt.js的路由组件,使用与router-link基本一致-->
      <nuxt-link to="/">home</nuxt-link>
    </template>
    

    编程式导航

    <template>
      <button @click="$router.push('/')">home</button>
    </template>
    

    动态路由

    Nuxt.js 里面定义带参数的动态路由,需要创建对应的以下划线作为前缀的 Vue 文件 或 目录。

    以下目录结构:

    pages/
    --| _slug/
    -----| comments.vue
    -----| index.vue
    --| users/
    -----| _id.vue
    --| index.vue
    

    Nuxt.js 生成对应的路由配置表为:

    router: {
      routes: [
        {
          name: 'index',
          path: '/',
          component: 'pages/index.vue',
        },
        {
          name: 'users-id',
          path: '/users/:id?',
          component: 'pages/users/_id.vue',
        },
        {
          name: 'slug',
          path: '/:slug',
          component: 'pages/_slug/index.vue',
        },
        {
          name: 'slug-comments',
          path: '/:slug/comments',
          component: 'pages/_slug/comments.vue',
        },
      ];
    }
    

    你会发现名称为users-id的路由路径带有:id?参数,表示该路由是可选的。如果你想将它设置为必选的路由,需要在users/_id目录内创建一个index.vue文件。

    generate 命令会忽略动态路由: API Configuration generate

    嵌套路由

    你可以通过 vue-router 的子路由创建 Nuxt.js 应用的嵌套路由。

    创建内嵌子路由,你需要添加一个 Vue 文件,同时添加一个与该文件同名的目录用来存放子视图组件。

    别忘了在父组件(.vue文件) 内增加 <nuxt-child/> 用于显示子视图内容。

    假设文件结构如:

    pages/
    --| users/
    -----| _id.vue
    -----| index.vue
    --| users.vue
    

    Nuxt.js 自动生成的路由配置如下:

    router: {
      routes: [
        {
          path: '/users',
          component: 'pages/users.vue',
          children: [
            {
              path: '',
              component: 'pages/users/index.vue',
              name: 'users',
            },
            {
              path: ':id',
              component: 'pages/users/_id.vue',
              name: 'users-id',
            },
          ],
        },
      ];
    }
    

    路由配置

    视图

    在这里插入图片描述

    模板

    你可以定制化 Nuxt.js 默认的应用模板。

    定制化默认的 html 模板,只需要在 src 文件夹下(默认是应用根目录)创建一个app.html的文件。

    布局

    Nuxt.js 允许你扩展默认的布局,或在layout目录下创建自定义的布局。

    • 默认布局

      可通过添加layouts/default.vue文件来扩展应用的默认布局。

    • 自定义布局

      layouts目录中的每个文件 (顶级) 都将创建一个可通过页面组件中的layout属性访问的自定义布局。

    页面(pages 里的)

    页面组件实际上是 Vue 组件,只不过 Nuxt.js 为这些组件添加了一些特殊的配置项(对应 Nuxt.js 提供的功能特性)以便你能快速开发通用应用。

    HTML 头部

    • 默认 Meta 标签
    • 个性化特定页面的 Meta 标签

    异步数据

    Nuxt.js 扩展了 Vue.js,增加了一个叫asyncData的方法,使得我们可以在设置组件的数据之前能异步获取或处理数据。

    asyncData

    asyncData 方法会在组件(限于页面组件)每次加载之前被调用。它可以在服务端或路由更新之前被调用。在这个方法被调用的时候,第一个参数被设定为当前页面的上下文对象,你可以利用 asyncData 方法来获取数据,Nuxt.js 会将 asyncData 返回的数据融合组件 data 方法返回的数据一并返回给当前组件。

    由于 asyncData 方法是在组件 初始化 前被调用的,所以在方法内是没有办法通过 this 来引用组件的实例对象。

    上下文对象(用于 asyncData 方法)

    可通过 API context 来了解该对象的所有属性和方法。

    错误处理

    Nuxt.js 在上下文对象context中提供了一个error(params)方法,你可以通过调用该方法来显示错误信息页面。params.statusCode可用于指定服务端返回的请求状态码。

    生命周期

    钩子函数说明ServerClient
    beforeCreate在实例创建之前被调用,此时还拿不到数据和 DOM。
    created在实例创建完成后被调用,此时可以操作数据了。
    beforeMount在挂载开始之前被调用:相关的 render 函数首次被调用。
    mounted实例被挂载后调用,此时可以执行一些初始 DOM 操作。
    beforeUpdate数据更新时调用,发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM,比如手动移除已添加的事件监听器。
    updated由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。当这个钩子被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。
    activated被 keep-alive 缓存的组件激活时调用。
    deactivated被 keep-alive 缓存的组件停用时调用。
    beforeDestroy实例销毁之前调用。在这一步,实例仍然完全可用。
    destroyed实例销毁后调用。该钩子被调用后,对应 Vue 实例的所有指令都被解绑,所有的事件监听器被移除,所有的子实例也都被销毁。
    errorCaptured当捕获一个来自子孙组件的错误时被调用。

    Nuxt 渲染流程

    下图阐述了 Nuxt.js 应用一个完整的服务器请求到渲染(或用户通过 <nuxt-link> 切换路由渲染页面)的流程:

    在这里插入图片描述

    Nuxt 常见问题

    官方 demo


    下一篇——搭建自己的 SSR

    展开全文
  • [Nuxt.js]Nuxt.js基础

    2020-08-28 21:28:37
    Nuxt.js支持: Nuxt.js工作流: Nuxt.js安装: vue init nuxt-community/koa-template 项目名 这个是集成了koa-tempalte的nuxt.js 安装好后执行: npm run dev 如果有报错参考: 1....

    Nuxt.js支持:在这里插入图片描述

    Nuxt.js工作流:

    在这里插入图片描述

    Nuxt.js安装:

    vue init nuxt-community/koa-template 项目名
    

    这个是集成了koa-tempalte的nuxt.js
    在这里插入图片描述
    在这里插入图片描述
    也可以这么安装(nuxt2.0官方的脚手架):
    先全局安装npx

    npm install -g npx
    

    再执行命令

    npx create-nuxt-app project-name
    

    注意要指定版本为2.0.0,否则可能没有server framework选项
    在这里插入图片描述

    安装好后执行:

    npm run dev
    

    如果有报错参考:
    1.https://blog.csdn.net/weixin_42614080/article/details/105613214
    2.https://blog.csdn.net/qq_40571631/article/details/103285331
    成功启动则如下所示:
    在这里插入图片描述
    访问localhost:3000看到如下即表示成功
    在这里插入图片描述

    Nuxt.js目录

    在这里插入图片描述

    安装好的Nuxt.js不会一开始就有store目录,需要我们自己创建,一旦创建了store目录,Nuxt.js就会自动为我们配置vuex,非常的方便,“创建即配置”
    当我们在pages中创建了一个页面,比如search.vue
    在这里插入图片描述

    <template>
      <section class="container">
        <img src="../assets/img/logo.png" alt="Nuxt.js Logo" class="logo" />
        <h1 class="title">
          Search.Vue
        </h1>
      </section>
    </template>
    
    <style scoped>
    .title
    {
      margin: 50px 0;
    }
    </style>
    

    此时我们去浏览器访问localhost:3000/search即可访问到这个页面,nuxt.js自动配置了和文件名一致的路由,“创建即配置”
    在这里插入图片描述
    但是我们发现,每个页面底下都有一部分(图示红框标出的部分)并不是我们在对应的页面文件中编写的内容,这一部分其实是写在layouts目录下的
    在这里插入图片描述
    default.vue是在你没有配置声明layout模板的时候所有页面都默认用default.vue作为模板,当然模板中也可以引入组件
    在这里插入图片描述
    在这里插入图片描述
    顺便一提,这个<nuxt/>组件也就相当于原版vue中的<router-view/>(如果要调用组件必须要加入这个组件,这个标签表示路由匹配到的组件显示的位置),那么还有<nuxt-link/>组件,也相当于<router-link/>

    
    <template>
    	<div class="navbar">
    		<ul id="main">
    			<li><router-link  to="/food" >商品</router-link></li>
    			<li><router-link  to="/rating">评价</router-link></li>
    			<li><router-link  to="/seller">商家</router-link></li>
    		</ul>
    <router-view></router-view>  <!-- 路由匹配到的组件将显示在这里 -->
    	</div>
    </template>
    

    那么接下来我们自己来写一些layout模板,就以search.vue为例
    1.在layouts目录下新建search.vue

    <template>
        <div class="layout-search">
            <h1>search layout header</h1>
            <nuxt/>
            <footer>search layout footer</footer>
        </div>
    </template>
    
    <script>
    export default {
        
    }
    </script>
    
    <style lang="css" scoped>
        .layout-search{
            color:red;
            }
    </style>
    

    2.在pages目录下的search.vue中声明

    export default {
        layout:"search"
    }
    

    3.刷新页面
    在这里插入图片描述
    可以看到现在用的是我们自己编写的layout模板layouts/search.vue

    Nuxt.js配置

    打开nuxt.config.js
    在这里插入图片描述
    1.title: ‘starter’,
    这个表示页面的标题,我们把它改为title: ‘Jayee’,
    保存后会自动开始编译
    在这里插入图片描述
    编译完成后刷新页面
    在这里插入图片描述
    在这里插入图片描述
    标签页的标题已经从starter变为了Jayee
    2. meta:
    配置字符等等…
    4. css: [’~assets/css/main.css’],
    这个表示配置全局的css,我们上面的/l;ayouts/search.vue虽然没有引用main.css,但是footer标签仍然居中了(我的截图不完整,可能看不出来居中的效果,可以查看网页源代码看到确实有给footer加一个居中的样式),这个自动居中是写在main.css中的,就是因为这里配置了全局css,所以自动引入了main.css,所以footer标签居中了
    5. loading:
    用于配置加载圈的样式
    6. build:
    关于eslint的一些配置
    更多的配置参考:https://nuxtjs.org/api (不要去看中文文档,中文文档的版本太低了)

    Nuxt.js异步数据&示例&SSR剖析

    1.首先我们在server目录下创建一个接口的目录/interface在这里插入图片描述
    然后创建一个接口文件,比如叫city.js

    import Router from 'koa-router' // 引入koa的路由
    const router = new Router({
        prefix:'/city'  // 接口前缀
    })
    router.get('/list', async (ctx)=>{
        ctx.body = ["上海","长沙"]
    })
    export default router
    
    

    2.既然引用了koa-router,我们当然要安装

    npm i koa-router
    

    3.然后在/server/index.js中引用这个接口
    在这里插入图片描述

    import cityInterface from './interface/city'
    app.use(cityInterface.routes()).use(cityInterface.allowedMethods())
    //这是固定的写法
    

    4.我们来测试一下这个接口
    curl http://localhost:3000/city/list
    在这里插入图片描述
    可以看到数据返回成功,说明接口没问题
    5.现在我们来用浏览器端发请求(通过axios),接下来以之前写的search页面为例
    安装axios

    npm install axios
    

    修改seach.vue

    在这里插入图片描述

     let {status,data:{list}}= await axios.get('/city/list')
     //这是一个解构赋值,axios请求返回的结构与我们定义的变量结构相同
    

    修改接口city.js在这里插入图片描述
    6.现在可以看到已经成功请求并且将数据渲染到了页面
    在这里插入图片描述
    此时我们查看源代码:
    在这里插入图片描述
    可以看到服务器下发的源文件中并没有上海和长沙这两个数据,说明他们是浏览器渲染的
    7.在nuxt.js中,我们用asyncData这个函数来进行异步数据请求的操作
    在asyncData执行的时候是没有app实例的(上面那种在mounted中写的方法是有的),所以这里我们不能写this,而是通过直接靠return返回的方式:
    在这里插入图片描述

    注意,这种方法默认的端口是80端口,而我们这里用的是3000端口(koa),所以要写全接口地址
    此时我们打开网页源代码:
    在这里插入图片描述
    可以看到服务器下发的源文件就已经有上海、长沙两个数据,并且和模板整合完了
    也就是说这种方法服务器端把编译好的内容下发给浏览器,同时也把异步获取的数据给浏览器端
    这就是服务器端渲染(SSR)
    8.用fetch请求异步数据
    在Nuxt.js工作流的那张图中可以看到,除了用asyncData还可以用fetch来请求异步数据
    在这里插入图片描述

    asyncData用于处理组件的数据,fetch用来处理Vuex的数据(提交Vuex状态)如果把第七步的asyncData改成fetch,是无法请求到数据也无法渲染的

    Vuex应用&示例

    在这里插入图片描述
    “创建即配置”
    1.在根目录下创建store目录,然后如下图创建文件
    在这里插入图片描述

    //city.js
    const state = () => ({
      cityList: ['长沙','北京'] //城市列表
    })
    
    const mutations = {
      add(state, text) {
        state.cityList.push(text) 
      }
    }
    
    const actions = {
      add: ({commit}, text) => {
        commit('add', text)
      }
    }
    
    export default {
      namespaced: true,
      state,
      mutations,
      actions
    }
    
    
    //navbar.js
    const state = () => ({
        navList: [] //navbar列表
      })
      
      const mutations = {
        add(state, text) {
          state.navList.push(text) 
        }
      }
      
      const actions = {
        add: ({commit}, text) => {
          commit('add', text)
        }
      }
      
      export default {
        namespaced: true,
        state,
        mutations,
        actions
      }
      
    
    //index.js
    import Vue from 'vue'
    import Vuex from 'vuex'
    import city from './modules/city'
    import navbar from './modules/navbar'
    
    Vue.use(Vuex)
    
    const store=()=> new Vuex.Store({
        modules:{
            city,
            navbar
        },
        actions:{
    
        }
    })
    
    export default store
    

    2.将search.js中改为取store中的值
    在这里插入图片描述
    3.刷新页面
    如果报错 Error in render: "TypeError: Cannot read property 'state' of undefined"npm run dev重新启动
    在这里插入图片描述
    可以看到页面显示了我们在cityList中定义的数据
    查看源代码也可以看到
    在这里插入图片描述
    说明这也是服务器端渲染(SSR)
    4.我们在index.js的actions中可以写入nuxtServerInit方法,这个方法表示在我们请求的时候,服务器端会写入一些数据到浏览器端的vuex中(正常情况当然不应该放到city的state中,只是这里我们没有建立user.js,为了演示方便用了city代替)
    在这里插入图片描述
    这么做的好处是什么呢?比如某个用户访问了我们网站的首页,一般来讲浏览器应该要另外发起一次请求去服务端获取用户信息回到浏览器端,而这个方法则让用户访问首页的时候服务器端就自动返回用户的信息,省去了我们单独再做一次请求

    展开全文
  • nuxt.js

    2019-08-04 16:59:56
    中文教程:https://zh.nuxtjs.org/guide 什么是nuxt Nuxt.js 是一个基于 Vue.js 的通用应用框架。 通过对客户端/服务端基础架构的抽象组织,Nuxt.js 主要关注的是应用的UI渲染。 我们的目标是创建一个灵活的...

    中文教程:https://zh.nuxtjs.org/guide

    • 什么是nuxt
    • Nuxt.js 是一个基于 Vue.js 的通用应用框架。

      通过对客户端/服务端基础架构的抽象组织,Nuxt.js 主要关注的是应用的 UI渲染

      我们的目标是创建一个灵活的应用框架,你可以基于它初始化新项目的基础结构代码,或者在已有 Node.js 项目中使用 Nuxt.js。

      Nuxt.js 预设了利用 Vue.js 开发服务端渲染的应用所需要的各种配置。

      除此之外,我们还提供了一种命令叫:nuxt generate ,为基于 Vue.js 的应用提供生成对应的静态站点的功能。

      我们相信这个命令所提供的功能,是向开发集成各种微服务(Microservices)的 Web 应用迈开的新一步。

      作为框架,Nuxt.js 为 客户端/服务端 这种典型的应用架构模式提供了许多有用的特性,例如异步数据加载、中间件支持、布局支持等。

    • 为什么要用nuxt:
    • 现在我们的项目大多数都是spa(单页面应用),感觉单页面应用比之前的模板渲染要好很多,首先单页面应用是前后端分离,架构清晰,前端负责交互逻辑,后端负责数据,前后端单独开发,独立测试。但是,SPA不利于SEO(搜索引擎优化)。

    • 什么事SSR:
    • SSR: 服务端渲染(Server Side Render),即:网页是通过服务端渲染生成后输出给客户端。比如JSP、PHP、JavaWeb等都是SSR架构,也就是服务端取出数据和模板组合生成 html 输出给前端,前端发生请求时,重新向服务端请求 html 资源,路由也由服务端来控制。

    • 生命周期:如下图

           

    • 目录详解:

    • 几点特殊的说明:
    • 入口页面是layout中的default.Vue 
    • 不需要自己定义路由,page目录下的文件会自己生成路由(超级棒)
    • 需要子啊nuxt.config.json中配置一些全局属性
    • 了解一下nuxt的一些函数:
    • asyncData(context)

      asyncData方法使得你能够在渲染组件之前异步获取数据。该方法在服务端中执行的,所以,请求数据时,不存在跨域问题。返回的数据将与 data() 返回的数据进行合并。由于asyncData方法是在组件 初始化 前被调用的,所以在方法内是没有办法通过 this 来引用组件的实例对象。

      context 变量的可用属性一览:

      属性字段类型可用描述
      isClientBoolean客户端 & 服务端是否来自客户端渲染
      isServerBoolean客户端 & 服务端是否来自服务端渲染
      isDevBoolean客户端 & 服务端是否是开发(dev) 模式,在生产环境的数据缓存中用到
      routevue-router 路由客户端 & 服务端vue-router 路由实例。
      storevuex 数据流客户端 & 服务端Vuex.Store 实例。只有vuex 数据流存在相关配置时可用。
      envObject客户端 & 服务端nuxt.config.js 中配置的环境变量, 见 环境变量 api
      paramsObject客户端 & 服务端route.params 的别名
      queryObject客户端 & 服务端route.query 的别名
      reqhttp.Request服务端Node.js API 的 Request 对象。如果 nuxt 以中间件形式使用的话,这个对象就根据你所使用的框架而定。nuxt generate 不可用
      reshttp.Response服务端Node.js API 的 Response 对象。如果 nuxt 以中间件形式使用的话,这个对象就根据你所使用的框架而定。nuxt generate 不可用
      redirectFunction客户端 & 服务端用这个方法重定向用户请求到另一个路由。状态码在服务端被使用,默认 302。redirect([status,] path [, query])
      errorFunction客户端 & 服务端用这个方法展示错误页:error(params)params 参数应该包含 statusCode 和 message 字段。

      fetch(context)

      fetch 方法用于在渲染页面前填充应用的状态树(store)数据, 与 asyncData 方法类似,不同的是它不会设置组件的数据。为了让获取过程可以异步,你需要返回一个 Promise,Nuxt.js 会等这个 promise 完成后再渲染组件。

      fetch 会在组件每次加载前被调用(在服务端或切换至目标路由之前)。

      head()

      Nuxt.js 使用了 vue-meta 更新应用的 头部标签(Head) 和 html 属性

      用于更新 头部信息。如 title,descripe 等。在 head 方法里可通过 this 关键字来获取组件的数据。

      layout()

      指定该页面使用哪个布局文件。默认值为 default

      middleware()

      需要执行的中间件,如鉴权的 auth等。

      transition()

      指定页面切换时的动画效果。支持传入 StringObjectFunction。具体配置请移步至 官网 。

      validate()

      Nuxt.js 可以让你在动态路由对应的页面组件中配置一个校验方法用于校验动态路由参数的有效性。

      返回 true 说明路由有效,则进入路由页面。返回不是 true 则显示 404 页面。

    •  

    展开全文
  • nuxt.js php,Nuxt.js

    2021-04-13 00:31:09
    Nuxt.js一个基于Vue.js的服务端渲染应用框架,本篇文章给大家介绍的就是关于nuxt.js的详细内容,有需要的朋友可以看一下Nuxt.js一个基于Vue.js的服务端渲染应用框架Nuxt.js是什么?Nuxt.js是一个基于vue.js的通用...

    Nuxt.js一个基于Vue.js的服务端渲染应用框架,本篇文章给大家介绍的就是关于nuxt.js的详细内容,有需要的朋友可以看一下

    Nuxt.js一个基于Vue.js的服务端渲染应用框架

    Nuxt.js是什么?

    Nuxt.js是一个基于vue.js的通用应用框架。

    通过对客户端/服务端基础架构的抽象组织,Nuxt.js主要关注的是应用的UI渲染。

    我们的目标是创建一个灵活的应用框架,你可以基于它初始化新项目的初始化结构代码,或者在已有Node.js项目中使用Nuxt.js

    Nuxt.js预设了利用Vue.js开发服务端渲染的应用所需要的各种配置。

    除此之外,我们还提供了一种命令叫:nuxt generate,为基于 Vue.js 的应用提供生成对应的静态站点的功能。

    我们相信这个命令所提供的功能,是向开发集成各种微服务(microservices)的 Web 应用迈开的新一步。

    作为框架,Nuxt.js 为 客户端/服务端 这种典型的应用架构模式提供了许多有用的特性,例如异步数据加载、中间件支持、布局支持等。

    Nuxt.js框架是如何运作的?

    Nuxt.js集成了以下组件/框架,用于开发完整而强大的Web应用:

    Vue 2

    Vue-Router

    VueX

    Vue-Meta

    特性:基于 Vue.js

    自动代码分层

    服务端渲染

    强大的路由功能,支持异步数据

    静态文件服务

    ES6/ES7 语法支持

    打包和压缩 JS 和 CSS

    HTML头部标签管理

    本地开发支持热加载

    集成ESLint

    支持各种样式预处理器: SASS、LESS、 Stylus等等

    Nuxt.js一个基于Vue.js的服务端渲染应用框架

    Nuxt.js是什么?

    Nuxt.js是一个基于vue.js的通用应用框架。

    通过对客户端/服务端基础架构的抽象组织,Nuxt.js主要关注的是应用的UI渲染。

    我们的目标是创建一个灵活的应用框架,你可以基于它初始化新项目的初始化结构代码,或者在已有Node.js项目中使用Nuxt.js

    Nuxt.js预设了利用Vue.js开发服务端渲染的应用所需要的各种配置。

    除此之外,我们还提供了一种命令叫:nuxt generate,为基于 Vue.js 的应用提供生成对应的静态站点的功能。

    我们相信这个命令所提供的功能,是向开发集成各种微服务(microservices)的 Web 应用迈开的新一步。

    作为框架,Nuxt.js 为 客户端/服务端 这种典型的应用架构模式提供了许多有用的特性,例如异步数据加载、中间件支持、布局支持等。

    Nuxt.js框架是如何运作的?

    Nuxt.js集成了以下组件/框架,用于开发完整而强大的Web应用:

    Vue 2

    Vue-Router

    VueX

    Vue-Meta

    特性:基于 Vue.js

    自动代码分层

    服务端渲染

    强大的路由功能,支持异步数据

    静态文件服务

    ES6/ES7 语法支持

    打包和压缩 JS 和 CSS

    HTML头部标签管理

    本地开发支持热加载

    集成ESLint

    支持各种样式预处理器: SASS、LESS、 Stylus等等

    相关推荐:

    展开全文
  • nuxt.js 全局 jsTL;DR: Overcome Nuxt.js, Bulma and Sass shenanigans with this quick article to help you start developing your next App in less than 10 minutes. TL; DR:这篇简短的文章克服了Nuxt.js,...
  • 官网:https://nuxtjs.org/ 使用Nuxt.js进行服务端渲染更利于SEO,这是我使用Nuxt.js的最大理由。 但是Nuxt.js的项目结构以及一些配置写法与我平常编写的vue-cli项目还是存在不少区别,所以写下这篇文章记录下在Nuxt...
  • 参考文章 nuxt发布到windows IIS部署...nuxt.js express模板项目服务器部署 https://www.cnblogs.com/stealth7/p/7299614.html nuxt.js express模板项目IIS部署 https://www.cnblogs.com/stealth7/p/7346963.html .
  • Nuxt.js 是一个用于构建静态和服务器端渲染站点的 Vue 框架。 此任务将带您了解从头开始构建 Nuxt.js 站点的基本要素。 在免费学习课程 构建设置 # install dependencies $ yarn install # serve with hot reload ...
  • [TOC] 1、初识Nuxt.js 官网:https://zh.nuxtjs.org/guide/ Nuxt.js是一个基于Vue.js的通用应用框架。主要关注的是应...
  • nuxt.js使用教程 Nuxt.js黑客新闻 (Nuxt.js Hacker News) HackerNews clone built with Nuxt.js. 使用Nuxt.js构建的HackerNews克隆。 View demo 查看演示 Download Source 下载源 性能 (Performance) 100/100 - ...
  • nuxt.js 全局 jsIn this tutorial, you’ll implement authentication in a Nuxt.js app using the Auth module. For the purpose of this tutorial we’ll be using JWT for authentication. 在本教程中,您将...
  • nuxt.js的核心代码by Krutie Patel 通过克鲁蒂·帕特尔(Krutie Patel) Nuxt.js中的通用应用程序代码结构 (Universal application code structure in Nuxt.js) Nuxt.js中的源代码结构的简要摘要 (A brief summary ...
  • nuxt.js 全局 jsIn this tutorial, I’ll be showing you to implement authentication in Nuxt.js app using the Auth module. For the purpose of this tutorial we’ll be using JWT for authentication. 在本...
  • nuxt.js 全局 js 查看此基于Nuxt.js和Cosmic JS构建的网站样板 。 它满足一些常见的网站要求,包括动态页面,博客文章,作者管理,SEO能力,联系表和网站搜索。 TL; DR 下载GitHub仓库 查看演示。 特征 ...
  • nuxt.js生产环境下怎么删除console.log 首先下载babel-plugin-transform-remove-console插件 yarn add babel-plugin-transform-remove-console -D 在nuxt.config.js最上边添加判断生产环境还是开发环境 let ...
  • If you discover a security vulnerability regarding Nuxt, please send an e-mail to the team via security@nuxtjs.org! All security vulnerabilities will be promptly addressed. License MIT
  • [TOC] 1、Nuxt.js过渡动效 1.1、官方文档: Nuxt.js 使用 Vue.js 的<transition>组件来实现路由切换时的过渡动效。...
  • Nuxt.js入门程序,用于使用Strapi创建一个简单的电子商务网站。 Strapi入门版Nuxt.js电子商务Nuxt.js入门版,用于使用Strapi创建一个简单的电子商务网站。 该入门程序使您可以通过一个简单的电子商务网站示例(可以...
  • 用于Nuxt.js的LazySizes模块 特征 帮助您集成lazysizes加载程序 允许您通过模块轻松设置选项 包括可用于扩展Nuxt构建loader 提高您的灯塔得分和整体表现 :fire: 提供lightweight , fast和reliable解决方案 支持...
  • Nuxt.js实战详解

    2020-11-27 14:29:51
    一、为什么选择Nuxt.js 多数是基于webpack构建的项目,编译出来的html文件,资源文件都被打包到js中,以下图404页面代码为例。从代码中可以看出,这样的页面是不利于 搜索引擎优化(SEO, Search Engine Optimization)...
  • vue服务端渲染与Nuxt.js.rar
  • 用于Nuxt.js的Nx插件。 包含用于在Nx工作区中管理Nuxt.js应用程序和库的构建器和示意图。 它提供: 用于创建,构建,服务,整理和测试Nuxt.js应用程序的脚手架。 与构建和服务Nuxt.js应用程序集成。 正在安装 ...
  • Nuxt.js v2.8.x 开发手册

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 13,490
精华内容 5,396
关键字:

nuxt.js