• nuxt(01)


    安装
     
    然后会出来一些询问,其中最重要的是:
     
    要选择SSR选项
     
    目录结构
     
    assets:放置一些需要经过webpack打包处理的一些资源文件,一些图片、字体等等
    components:vue公共组件,注意放到conponents里的组件不会支持服务端的钩子也就asyncData
    layouts:布局页面
    middleware:放置一些中间件
    pages:里面放置一些nuxt里面一些希望经过路由跳转的页面
    plugin:主要存放一些插件
    server:服务端配置,主要是node服务端的代码,如果我们有自己的后端,那么就可以不配置这个server,如果没有,我们可以在这个文件夹下配置自己的服务端搭建
    static:主要存入一些不希望webpack处理的文件,比如公司内部的库等等
    store:vuex的配置
    nuxt.config.js:nuxt个性化配置,以便覆盖默认的配置
     
     
    启动
    npm run dev
    会同时启动客户端和服务端
     
    打包
    npm run build
    打包结果会放在当前项目下的nuxt文件夹下
     
    运行打包后的结果
    npm run start
     
     
    nuxt生命周期
     
    红色部分跑在了服务端
     
    黄色是vue的两个钩子,既跑在浏览器端也跑在客户端
     
    绿色部分就是vue剩下的那些钩子,只跑在客户端,另外服务端不存在组件缓存,也就没有激活失活那两个钩子
     
     
    nuxtServerInit 运行在服务端的钩子
    store下面index.js中
     
     
    middleware中间件
    可以抓取到服务端的上下文信息
    第一种:在nuxt.config.js中配置:
     
    在middleware中创建中间件:
     
     
    第二种:定义在布局层页面  layouts文件夹下
    可以引入外面定义的中间件
     
    也可以直接定义在页面中
     
     
    第三种:页面级别 pages文件里
    中间件会运行在页面实例加载之前
     
     
    运行时机: 
    触发顺序就是先触发全局级别然后是布局级别最后运行页面级别
    陌生人,愿你永不迷失自己,心中永远有梦去追逐。 ---随笔签名写于2020.1.3 00:28:00 博主VX:stf569318425
  • 相关阅读:
    linux 安装 jdk,Redis 安装
    cron 和 crontab -e 命令不同,crontab -e 没有秒的概念
    为什么要用 List list = new ArrayList() ,而不用 ArrayList alist = new ArrayList()呢?
    mybatis 动态sql 查询 一个参数,不要用 test = ‘id’
    乐观锁 version 悲观锁 行表锁
    Developer Test-Java
    JQuery将DIV的滚动条滚动到指定的位置
    前端学习网站
    jQuery方法大全
    JavaScript基础常用函数和语法集合大全
  • 原文地址:https://www.cnblogs.com/tengfeiS/p/14990175.html
Copyright © 2020-2023  润新知