开始使用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'}">HOME</nuxt-link></li><li><nuxt-link :to="{name:'about'}">ABOUT</nuxt-link></li><li><nuxt-link :to="{name:'news'}">NEWS</nuxt-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'}">HOME</nuxt-link></li><li><nuxt-link :to="{name:'about'}">ABOUT</nuxt-link></li><li><nuxt-link :to="{name:'news',params:{newsId:3306}}">NEWS</nuxt-link></li></ul></div>
</template><script>export default {components: {}
}
</script><style></style>
在news文件夹下的index.vue里用$route.params.newsId进行接收,代码如下。
<template><div><h2>News Index page</h2><p>NewsID:{{$route.params.newsId}}</p><ul><li><a href="/">Home</a></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>
开始使用Nuxt.js相关推荐
- nuxt.js实战之移动端rem
nuxt.js的项目由于是服务端渲染,通过js动态调整不同尺寸设备的根字体这种rem方案存在一种缺陷.由于设置字体的代码不能做服务端渲染,导致服务端返回的代码一开始没有相应的跟字体,直到与前端代码进行 ...
- Nuxt.js - nuxt-link与router-link的差异
前言 在使用Nuxt.js时可能会遇到一个这样的问题? 当打开请求页面的时候,所有页面都被请求了. 这正是<router-link>组件所有的特性. 首先说一下router-link ro ...
- Nuxt.js开发中碰到的问题(二)引入gitment评论系统
博客原文链接 概述 在初步完成功能之后就想着加上评论功能,最开始是想自己实现一个,但是综合考虑之后,还是决定引入 gitment 这个成熟的评论系统代替: 虽然之前在项目中有实现评论系统的相关经验,但 ...
- 宝塔面板部署nuxt_MacOS下创建及部署vue.js项目(及Nuxt.js、PM2等相关流程)
开发环境 权限准备 为避免后续流程出现权限不足的相关提示,首先在终端中输入以下代码检查当前系统是否已开启了对系统文件夹的保护: csrutil status 若结果为csrutil enabled,则 ...
- NUXT 入门第一课: 关于 Nuxt.js
关于 Nuxt.js 2016 年 10 月 25 日,zeit.co 背后的团队对外发布了 Next.js,一个 React 的服务端渲染应用框架.几小时后,与 Next.js 异曲同工,一个基于 ...
- 关于 Nuxt.js
关于 Nuxt.js 2016 年 10 月 25 日,zeit.co 背后的团队对外发布了 Next.js,一个 React 的服务端渲染应用框架.几小时后,与 Next.js 异曲同工,一个基于 ...
- Nuxt.js asyncData 多请求
Nuxt.js框架中asyncData方法只能在pages中的.vue文件页面中使用. 如果要一次发送多个请求可进入如下操作: async asyncData ({ params, error }) ...
- nuxt.js 本地开发跨域问题(Access-Control-Allow-Origin)及其解决方案
问题描述 现在 web 开发都是前后端分离的年代,前后端分离的好处我就不啰嗦了,进入问题 ==>>> 使用 nuxt.js 本地开发 Vue 项目时,ajax 请求时可能会遇到跨域问 ...
- hapi mysql项目实战路由初始化_用hapi.js mysql和nuxt.js(vue ssr)开发仿简书的博客项目...
前言: 预览: 开始: npm i 把mysql配置好 npm run server or npm run dev 实现功能: 用户: 登录.注册.用户资料修改,详情页面,类似于简书的文章数量.总字数 ...
最新文章
- Kraken:使用精确比对的超快速宏基因组序列分类软件
- 【XSY3048 】Polynominal 数学
- Docker容器学习(一)
- 【数据结构与算法】之判断是否互为字符重排
- 转储的mysql如何导入,如何将大型(14 GB)MySQL转储文件导入新的MySQL数据库?
- php 强制变为整数,强制PHP整数溢出
- provider: 命名管道提供程序, error: 40 - 无法打开到 SQL Server 的连接错误的解决方法...
- 使用ffmpeg捕获USB外部摄像头视频流
- 程序员常去的103个网站(转)
- flask第九篇——url_for【2】
- 华为十年架构师实战经验总结:大规模分布式系统架构与设计实战
- 苹果电脑推出MacOSMojave10.14.5支持隔空投放2
- java银行叫号_银行排队叫号系统
- 中继器系列:中继器增删改查
- dedecms 文章列表被加粗的加爵办法
- 百度推出新版团购导航 对团购导航造成冲击
- 17、简单的企业人事管理系统(ssh)
- 小米11发布会雷军大发感慨:程序员的心酸历程谁人能懂?
- 21、收付款合同管理介绍
- MySQL安装到最后一步未响应的五种解决方法