zoukankan      html  css  js  c++  java
  • Nuts.js01

    1、简介

    Vue ssr框架。支持vue2,vue-router,vuex,vue server render, vue meta

    2、基本使用:

    vue init nuxt-community/koa-template //基于koa2的安装

    接着cnpm i

    npm run dev开启服务

    观察Nuxt.js目录:

    pages入口页面组件 

    在page中的vue模板文件名称都是路径

    创建完成后即可在相应路由处访问,无需手动配置路由

     查看相应页面我们发现系统还自动配置了一行文字

    来源于layouts中的模板文件,里面存放着公共的组件,比如说需要在所有路由下都显示的头部,尾部,侧边栏等

    每新建一个组件,都会自动添加相应的组件

    pages中的页面组件会放到layouts内模板组件中的nuxt标签内

    自定义一个简单的layout模板

    这样我们在pages下模板使用时在script标签下export default内声明

    layout:'your layouts name'

    nuxt.config.js是nuxtjs的配置文件,

    可以配置全局的css文件

    nuxt获取异步数据

    server目录创建interface接口目录

    目录下创建接口文件:

      

    接着在server文件夹下入口文件index.js中引入

    import name from '...'

    同一文件下接着书写:

    即可

    接着可在模板文件中使用:

    这里未配置ssr客户端渲染,是我们的页面在页面加载完后再向服务器发起请求:

    为了实现在下发资源的同时进行渲染,我们修改:

    这样会把数据和编译好的内容一并返回给浏览器

    fetch主要用于处理vuex相关的数据

    vuex结合使用nuxtjs

    方法与单独使用nuxtjs类似

    在路由index.js入口文件书写:

    此时,vuex已经可以运行,如果不行,请重启服务。

    也是实现了ssr

    在此总结nuxt目录下各个子目录的作用

    components:写页面组件

    assets:存放图片或者其他静态资源文件

    store 管理vuex状态

    layouts 页面结构复用

    pages  创建根路由

    vue ssr 工作原理:

    ssr解决seo的问题。可以使内容快速展现。‘ 

    nuxt.js升级为

  • 相关阅读:
    协议详解1——概要
    协议学习之 vamei博客系列 总结
    DDOS介绍
    python基础教程总结15——7 自定义电子公告板
    python基础教程总结15——6 CGI远程编辑
    python基础教程总结15——5 虚拟茶话会
    python基础教程总结15——4 新闻聚合
    python基础教程总结15——3 XML构建网址
    如何在远程桌面的服务器上访问本地磁盘
    C# 如何把dataTable以参数的形式传入 sql 存储过程
  • 原文地址:https://www.cnblogs.com/Tanqurey/p/10889178.html
Copyright © 2011-2022 走看看