【大前端】NuxtJS基础教程

Nuxt 介绍

• 一个机遇 Vue.js 生态的第三方开元服务端渲染应用框架
• 它可以帮我们轻松的使用 Vue.js 技术栈构建同构应用
• 官网：https://zh.nuxtjs.org/
• GitHub 仓库：https://github.com/nuxt.nuxt.js 

初始化NuxtJS项目 

Nuxt.js 的使用方式 

• 初始项目
  • 官方文档：https://zh.nuxtjs.org/gguide/installation
    • 方式一：使用 create-nuxt-app
    • 方式二：手动创建
• 已有的 Node.js 服务端项目
  • 直接把 Nuxt 当做一个中间件集成到 Node Web Server中 
• 现有的 Vue.js 项目
  • 非常熟悉 Nuxt.js
  • 至少百分之 10 的代码改动 

 从零开始创建项目

• 创建 code 文件夹
• 打开终端命令，输入 mkdir nuxtjs-demo 创建文件夹
• cd .\nuxtjs-demo\
• npm init --y
• npm i nuxt
• 配置启动命令
  
  
• 在 nuxtjs-demo 下 创建 pages 目录，新建 index.vue 首页 (pages目录名是固定的)
• npm run dev 
  
  
• git init
• 在根目录下创建 .gitignore，打包需要忽略的文件，git status查看状态
  
  
•  git add .
• git commit -m "初始化Nuxt 项目"
• git branch 02-router
• git checkout 02-router

路由-基本路由 

•  a 标签
  • 它会刷新整个页面，不要使用
• nuxt-link 组件
• 编程式导航
• 动态路由
  • 文件名以下划线开头 _id.vue,，nuxt 自动匹配
    
    
  • 获取路由动态 id： {{ $route.params.id }} 
  • 嵌套路由：创建内嵌子路由，你需要添加一个 Vue 文件，同时添加一个与该文件同名的目录用来存放子视图组件。
    
    
  • 路由-自定义路由配置 （创建 nuxt.config.js）
    • 如果整个单页面应用的所有资源可以通过 /app/ 来访问，那么 base 配置项的值需要设置为 '/app/' 
      
      
    • 扩展路由 extendRoutes 
       

      module.exports = {
          router: {
              base:'/app/',
              extendRoutes(routes, resolve) {
                  routes.push({
                    name: 'hello',
                    path: '/hello',
                    component: resolve(__dirname, 'pages/About.vue')
                  })
                }
          }
      }
      
      

       

 Nuxt.js 视图 -- 结构

布局： 

• 默认布局
  • 创建 layouts目录，创建默认文件 default.vue（layouts  和 default 名称是固定的）
    
    
• 自定义布局 
  • 在 layouts 目录下创建 foo.vue （foo 是自定义的），在需要引用的文件中设置
    
    

异步数据-asyncData 

基本用法

• 它会将 asyncDate 返回的数据融合组件 data 方法返回数据一并给组件
   

      async asyncData () {
        const res = await axios ({
          method:'GET',
          url:'http://localhost:3000/app/data.json'
        })
        
        return res.data
      },

   

• 调用时机：服务端渲染器件和客户端路由更新之前 

注意事项 

• 只能在页面组件中使用
• 没有 this，因为它是组件初始化之前被调用的