本文共 882 字，大约阅读时间需要 2 分钟。

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('路径', 参数)//putthis.$axios.put('路径', 参数)//deletethis.$axios.delete('路径')

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

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

转载地址：http://zfbef.baihongyu.com/