初识Vue全家桶 Nuxt.js(一)

1.Vue全家桶 Nuxt.js

1. nuxt.js 概述

• SPA 单页面web应用，vue.js可以实现SPA
• 不利于SEO
• SEO：搜索引擎优化（增加收录、提高权重）
• SSR：服务器端渲染
  • 将前端拆分2部分：客户端和服务端
  • 服务器端渲染，就是让前端服务端的代码先执行，就可以提前获得后端提供的数据
• nuxt.js就是基于vue.js的SSR技术。
  

1.2 nuxt.js 入门案例

1.2.1 安装

• 步骤一：创建nuxt.js项目

npx create-nuxt-aa <项目名>

• 步骤二：确定项目名、描述、作者，直接回车
  
• 步骤三：确定包管理工具
  
• 步骤四：选择UI框架
  
• 步骤五：选择前端服务器框架
  
• 步骤六：选择模块
  
• 步骤七：选择格式化工具
  
• 步骤八：选择测试框架
  
• 步骤九：选择渲染模式
  
• 步骤十：选择发布工具
  
• 步骤十一：安装成功
  
  

1.2.2 运行

npm run dev

1.3 nuxt项目目录结构

1.3.1 目录

1.3.2 别名

• 后面的开发中，需要定位资源位置，一般情况下nuxt项目根目录下开始。
• ~ 或 @~/static/abc.jpg 或 @/static/abc.jpg

1.4 nuxt中axios使用

1.4.1 已整合axios

• 前提：nuxt已经整合axios

  • 证据1：安装时，选择axios模块
  • 证据2：nuxt.confg.js进行配置
    

1.4.2 发送ajax

• 在之前学习的vuex语法中，可以通过 this.$axios 获得 axios对象

//get请求
this.$axios.get('路径',{ params : 参数 })

//post请求
this.$axios.post('路径', 参数)

//put
this.$axios.put('路径', 参数)

//delete
this.$axios.delete('路径')

• 实例，修改 pages/index.vue页面

<template>
  <div>
    {{pageInfo}}
  </div>
</template>

<script>
export default {
  async created() {
    // 查询  http://localhost:10010/api/userservice/user，
    /*
    {
      "pageNum": 1,
      "pageSize": 2
    }
    */
    let { data } = await this.$axios.get('http://localhost:10010/api/userservice/user',{
      params: {
        pageNum: 1,
        pageSize: 2
      }
    })
    //保存查询结果
    this.pageInfo = data.data

  },
  data() {
    return {
      pageInfo: {}
    }
  },
}
</script>

<style>

</style>

• 效果：右键查看源代码，不能获得数据，浏览器端发送ajax进行查询的。