Co_zy
Co_zy

开始使用Nuxt.js

Nuxt.js简单的说是Vue.js的通用框架,最常用的就是用来作SSR(Server Side Render服务端渲染).再直白点说,就是Vue.js原来是开发SPA(Single Page Application单页应用)的,但是随着技术的普及,很多人想用Vue开发多页应用,并在服务端完成渲染.这时候就出现了Nuxt.js这个框架,它简化了SSR的开发难度.还可以直接用命令把我们制作的vue项目生成静态HTML.

那服务器端渲染到底有什么好处？

最主要的原因时SPA（单页应用）不利于搜索引擎的SEO操作。比如你作一个新闻网站，流量的一个主要来源是通过百度、谷歌、bing这些搜索引擎，但是它们对SPA的抓取并不好，特别是百度根本没法抓取到SPA的内容页面，所以我们必须把我们的应用在服务端渲染成适合搜索引擎抓取的页面，再下载到客户端。那Nuxt.js适合作新闻、博客、电影、咨询这样的需要搜索引擎提供流量的项目。如果你要作移动端的项目，就没必要使用这个框架了。

什么是SSR

SSR，即服务器渲染，就是在服务器端将对Vue页面进行渲染生成html文件，将html页面传递给浏览器。

SSR两个优点：

SEO 不同于SPA的HTML只有一个无实际内容的HTML和一个app.js，SSR生成的HTML是有内容的，这让搜索引擎能够索引到页面内容。
更快内容到达时间 传统的SPA应用是将bundle.js从服务器获取，然后在客户端解析并挂载到dom。而SSR直接将HTML字符串传递给浏览器。大大加快了首屏加载时间。

Nuxt.js的官方网站是这样介绍的：

Nuxt.js 是一个基于 Vue.js 的通用应用框架。
通过对客户端/服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的 UI渲染。

一. Nuxt.js安装

####1.使用npm或者yarn来安装vue-cli这个框架

npm install -g vue-cli
or
yarn global add @vue/cli

安装完成后可以使用vue -V 来测试是否安装成功。（注意：这里要使用大写的V，小写无效）
####2.使用vue安装 nuxt
安装好vue-cli后，就可以使用init命令来初始化Nuxt.js项目。

vue init nuxt/starter

这时候他会在github上下载模版，然后会询问你项目的名称叫什么，作者什么的，这些完全可以根据自己的爱好填写。
####3.使用npm install安装依赖包

npm install

这个过程是要等一会的，如果你这个过程安装失败，也不要慌张，你可以直接该删除项目中的node_modules文件夹后，重新npm install进行安装。
####4.使用npm run dev 启动服务

npm run dev

####5.在浏览器输入 localhost:3000,可以看到结果。

Hello World
学程序国际惯例的第一节都是来个Hello World ，我们先来体验一下。
在项目根目录下找到/pages/index.vue文件，让后把项目名称改写成Hello World。框架支持热更新，所以你不用刷新就自动更新了。

二.Nuxt目录结构详讲

|-- .nuxt                            // Nuxt自动生成，临时的用于编辑的文件，build
|-- assets                           // 用于组织未编译的静态资源入LESS、SASS 或 JavaScript
|-- components                       // 用于自己编写的Vue组件，比如滚动组件，日历组件，分页组件
|-- layouts                          // 布局目录，用于组织应用的布局组件，不可更改。
|-- middleware                       // 用于存放中间件
|-- pages                            // 用于存放写的页面，我们主要的工作区域
|-- plugins                          // 用于存放JavaScript插件的地方
|-- static                           // 用于存放静态资源文件，比如图片
|-- store                            // 用于组织应用的Vuex 状态管理。
|-- .editorconfig                    // 开发工具格式配置
|-- .eslintrc.js                     // ESLint的配置文件，用于检查代码格式
|-- .gitignore                       // 配置git不上传的文件
|-- nuxt.config.json                 // 用于组织Nuxt.js应用的个性化配置，已覆盖默认配置
|-- package-lock.json                // npm自动生成，用于帮助package的统一性设置的，yarn也有相同的操作
|-- package-lock.json                // npm自动生成，用于帮助package的统一性设置的，yarn也有相同的操作
|-- package.json                     // npm包管理配置文件

Nuxt常用配置项

已经了解Nuxt生成项目的目录结构后，其实就可以愉快的玩耍了，但是感觉还是收到了很多约束，比如开发时的IP地址和端口（localhost:3000）和公用的CSS，这节课我们就学习一些Nuxt的常用配置，让我们开发的更自由。
#####配置全局CSS
在开发多页项目时，都会定义一个全局的CSS来初始化我们的页面渲染，比如把padding和margin设置成0，网上也有非常出名的开源css文件normailze.css。要定义这些配置，需要在nuxt.config.js里进行操作。

比如现在我们要把页面字体设置为红色，就可以在assets/css/normailze.css文件，然后把字体设置为红色。

/assets/css/normailze.css

html{
    color:red;
}

/nuxt.config.js

  css:['~assets/css/normailze.css'],

设置好后，在终端输入npm run dev 。然后你会发现字体已经变成了红色。

四.Nuxt的路由配置和参数传递

学习前端框架都要学习路由机制,因为路由可以体现我们的业务逻辑,把模块串联起来,让程序焕发光彩.那简单的说路由就是我们的跳转机制,也可以简单理解成连接跳转.Nuxt.js的路由并不复杂,它给我们进行了封装,让我们节省了很多配置环节.
我们可以直接使用a标签跳转,但是Nuxt.js并不推荐这种方法,它为我们准备了标签(vue中叫组件).

<template>
  <div>
    <ul>
      <li><nuxt-link :to="{name:'index'}">HOMEnuxt-link>li>
      <li><nuxt-link :to="{name:'about'}">ABOUTnuxt-link>li>
      <li><nuxt-link :to="{name:'news'}">NEWSnuxt-link>li>
    ul>
  div>
template>

<script>

export default {
  components: {
   
  }
}
script>

<style>

style>

params传递参数

路由经常需要传递参数，我们可以简单的使用params来进行传递参数，我们现在向新闻页面（news）传递个参数，然后在新闻页面进行简单的接收。

我们先修改pages下的Index.vue文件，给新闻的跳转加上params参数，传递3306ID。

<template>
  <div>
    <ul>
      <li><nuxt-link :to="{name:'index'}">HOMEnuxt-link>li>
      <li><nuxt-link :to="{name:'about'}">ABOUTnuxt-link>li>
      <li><nuxt-link :to="{name:'news',params:{newsId:3306}}">NEWSnuxt-link>li>
    ul>
  div>
template>
 
<script>
 
export default {
  components: {
   
  }
}
script>
 
<style>
 
style>

在news文件夹下的index.vue里用$route.params.newsId进行接收，代码如下。

<template>
  <div>
      <h2>News Index pageh2>
      <p>NewsID:{{$route.params.newsId}}p>
       <ul>
        <li><a href="/">Homea>li>
      ul>
  div>
template>

asyncData方法获取数据

在项目中需要在初始化页面前先得到数据，也就是我们常说的异步请求数据。Nuxt.js贴心的为我们扩展了Vue.js的方法，增加了anyncData。从名字上就很好理解，这是一个异步的方法。
创建远程数据
在这里制作一些假的远程数据，我选择的网站是myjson.com，它是一个json的简单仓库，学习使用是非常适合的。
我们打开网站，在对话空中输入JSON代码，这个代码可以自己随意输入哦。

{
  "name": "CSDN",
  "age": 18,
  "interest": "I love coding!"
}

输入后，网站会给你一个地址，这就是你这个JSON仓库的地址了。

https://api.myjson.com/bins/8gdmr

安装Axios

Vue.js官方推荐使用的远程数据获取方式
是Axios,所以我们安装官方推荐的,来使用Axios,这里使用npm安装或者yarn

npm install axios --save
yarn add @nuxtjs/axios

ansycData的promise方法

我们在pages下面新建一个文件，叫做ansyData.vue。
然后写入下面的代码：

<template>
  <div>
      <h1>姓名：{{info.name}}h1>
      <h2>年龄：{{info.age}}h2>
      <h2>兴趣：{{info.interest}}h2>
  div>
template>
<script>
import axios from 'axios'
export default {
  data(){
     return {
         name:'hello World',
     }
  },
  asyncData(){
      return axios.get('https://api.myjson.com/bins/8gdmr')
      .then((res)=>{
          console.log(res)
          return {info:res.data}
      })
      
  }
}
script>

ansycData的await方法

当然上面的方法稍显过时，现在都在用ansyc…await来解决异步,改写上面的代码.

<template>
  <div>
      <h1>姓名：{{info.name}}h1>
      <h2>年龄：{{info.age}}h2>
      <h2>兴趣：{{info.interest}}h2>
 
     
  div>
template>
<script>
import axios from 'axios'
export default {
  data(){
     return {
         name:'hello World',
     }
  },
  async asyncData(){
      let {data}=await axios.get('https://api.myjson.com/bins/8gdmr')
      return {info: data}
      
  }
}
script>

你可能感兴趣的:(web前端)