为什么要用Nuxt?
1.SEO
我们需要搜索引擎更多地抓取到我们的内容,更详细地认识到我们的网页结构,而不是仅对首页或特定静态页进行索引.再直白点说,就是Vue.js原来是开发SPA(单页应用)的,但是随着技术的普及,很多人想用Vue开发多页应用,并在服务端完成渲染。这时候就出现了Nuxt.js这个框架,她简化了SSR的开发难度。还可以直接用命令把我们制作的vue项目生成为静态html.
Nuxt.js适合作新闻、博客、电影、咨询这样的需要搜索引擎提供流量的项目。如果你要作移动端的项目,就没必要使用这个框架了.
什么是SSR?
SSR,即服务器渲染,就是在服务器端将对Vue页面进行渲染生成html文件,将html页面传递给浏览器。
Nuxt.js的官方网站是这样介绍的:
Nuxt.js 是一个基于 Vue.js 的通用应用框架。
通过对客户端/服务端基础架构的抽象组织,Nuxt.js 主要关注的是应用的 UI渲染。
Nuxt.js是特点(优点):
基于 Vue.js
自动代码分层
服务端渲染
强大的路由功能,支持异步数据
静态文件服务 ES6/ES7 语法支持
打包和压缩 JS 和 CSS HTML头部标签管理
本地开发支持热加载
集成ESLint
支持各种样式预处理器: SASS、LESS、 Stylus等等
Nuxt环境搭建和Hello World
1.用npm来安装vue-cli这个框架,如果你已经安装过了,可以省略这步。
npm install vue-cli -g
2.使用vue安装 nuxt
vue init nuxt/starter
3.使用npm install安装依赖包
npm install
4.使用npm run dev 启动服务
npm run dev
5.在浏览器输入 localhost:3000,可以看到结果。
可以看到 项目目录结构也发生了变化。
目录结构:
Nuxt常用配置项
配置IP和端口:
开发中经常会遇到端口被占用或者指定IP的情况。我们需要在根目录下的package.json里对config项进行配置。比如现在我们想把IP配置成127.0.0.1,端口设置1818。
/package.json
"config":{ "nuxt":{ "host":"127.0.0.1", "port":"1818" } },
配置好后,我们在终端中输入npm run dev,然后你会看到服务地址改为了127.0.0.1:1818.
配置全局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 。然后你会发现字体已经变成了红色。
配置webpack的loader
在nuxt.config.js里是可以对webpack的基本配置进行覆盖的,比如现在我们要配置一个url-loader来进行小图片的64位打包。就可以在nuxt.config.js的build选项里进行配置。
build: { loaders:[ { test:/\.(png|jpe?g|gif|svg)$/, loader:"url-loader", query:{ limit:10000, name:‘img/[name].[hash].[ext]‘ } } ], /* ** Run ESLint on save */ extend (config, { isDev, isClient }) { if (isDev && isClient) { config.module.rules.push({ enforce: ‘pre‘, test: /\.(js|vue)$/, loader: ‘eslint-loader‘, exclude: /(node_modules)/ }) } } }
Nuxt的路由配置和参数传递
在根目录的pages文件下about.vue文件
<template> <div> <h2>About Index page</h2> <ul> <li><a href="/">Home</a></li> </ul> </div> </template>
在根目录的pages文件下news.vue文件
<template> <div> <h2>News Index page</h2> <ul> <li><a href="/">Home</a></li> </ul> </div> </template>
修改原来的pages文件夹下的index.vue
<template> <div> <ul> <li><a href="/">HOME</a></li> <li><a href="/about">ABOUT</a></li> <li><a href="/news">NEWS</a></li> </ul> </div> </template> <script> export default { components: { } } </script> <style>
<nuxt-link>标签以及 params传递参数
修改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.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>
Nuxt的动态路由和参数校验
新建_id.vue的文件 /pages/_id.vue
<template> <div> <h2>News-Content [{{$route.params.id}}]</h2> <ul> <li><a href="/">Home</a></li> </ul> </div> </template>
在/pages/news.vue进行修改,增加两个详细页的路由News-1和News-2
<template> <div> <h2>News Index page</h2> <p>NewsID:{{$route.params.newsId}}</p> <ul> <li><a href="/">Home</a></li> <li><a href="/123">News-1</a></li> <li><a href="/456">News-2</a></li> </ul> </div> </template>
进入一个页面,对参数传递的正确性校验是必须的,Nuxt.js也贴心的为我们准备了校验方法validate( )
/pages/_id.vue
export default { validate ({ params }) { // Must be a number return /^\d+$/.test(params.id) } }
Nuxt的路由动画效果
全局路由动画
/assets/css/main.css
.page-enter-active, .page-leave-active { transition: opacity 2s; } .page-enter, .page-leave-active { opacity: 0; }
然后在nuxt.config.js里加入一个全局的css文件就可以了。
css:[‘assets/css/main.css‘],
这时候在页面切换的时候就会有2秒钟的动画切换效果了,但是你会发现一些页面是没有效果的,这是因为你没有是<nuxt-link>组件来制作跳转链接。你需要进行更改。
单独设置页面动效
在全局样式assets/main.css 中添加以下内容。
.test-enter-active, .test-leave-active { transition: all 2s; font-size:12px; } .test-enter, .test-leave-active { opacity: 0; font-size:40px; }
然后在about.vue组件中设置
export default { transition:‘test‘ }
Nuxt的错误页面和个性meta设置
建立错误页面
在根目录下的layouts文件夹下建立一个error.vue文件,它相当于一个显示应用错误的组件。
<template> <div> <h2 v-if="error.statusCode==404">404页面不存在</h2> <h2 v-else>500服务器错误</h2> <ul> <li><nuxt-link to="/">HOME</nuxt-link></li> </ul> </div> </template> <script> export default { props:[‘error‘], } </script>
代码用v-if进行判断错误类型,需要注意的是这个错误是你需要在<script>里进行声明的,如果不声明程序是找不到error.statusCode的。
这里用了一个<nuxt-link>的简单写法直接跟上路径就可以了。
个性meta设置
页面的Meta对于SEO的设置非常重要,比如你现在要作个新闻页面,那为了搜索引擎对新闻的收录,需要每个页面对新闻都有不同的title和meta设置。直接使用head方法来设置当前页面的头部信息就可以了。我们现在要把New-1这个页面设置成个性的meta和title。
1.我们先把pages/news.vue页面的链接进行修改一下,传入一个title,目的是为了在新闻具体页面进行接收title,形成文章的标题。
/pages/news.vue
<li><nuxt-link :to="{name:‘news-id‘,params:{id:123,title:‘测试.com‘}}">News-1</nuxt-link></li>
2.第一步完成后,我们修改/pages/_id.vue,让它根据传递值变成独特的meta和title标签。
<template> <div> <h2>News-Content [{{$route.params.id}}]</h2> <ul> <li><a href="/">Home</a></li> </ul> </div> </template> <script> export default { validate ({ params }) { // Must be a number return /^\d+$/.test(params.id) }, data(){ return{ title:this.$route.params.title, } }, //独立设置head信息 head(){ return{ title:this.title, meta:[ {hid:‘description‘,name:‘news‘,content:‘This is news page‘} ] } } } </script>
注意:为了避免子组件中的meta标签不能正确覆盖父组件中相同的标签而产生重复的现象,建议利用 hid 键为meta标签配一个唯一的标识编号。
asyncData方法获取数据
创建远程数据
在这里制作一些假的远程数据,我选择的网站是myjson.com,它是一个json的简单仓库,学习使用是非常适合的。
我们打开网站,在对话空中输入JSON代码,这个代码可以自己随意输入哦。
{ "name": "JSon", "age": 28, "interest": "hello!" }
输入后,网站会给你一个地址,这就是你这个JSON仓库的地址了。
https://api.myjson.com/bins/w043s
安装Axios
Vue.js官方推荐使用的远程数据获取方式就Axios,所以我们安装官方推荐,来使用Axios。这里我们使用npm 来安装 axios。
直接在终端中输入下面的命令:
npm install axios --save
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/w043s‘) .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/w043s‘) return {info: data} } } </script>
静态资源和打包
Nuxt.js项目中如何放置静态资源和打包
直接引入图片
我们在网上任意下载一个图片,放到项目中的static文件夹下面,然后可以使用下面的引入方法进行引用
<div><img src="~static/text.png" /></div>
这种引用方法是不用估计相对路径的,“~”就相当于定位到了项目跟目录,这时候你的图片路径就不会出现错误,就算打包也是正常的。
CSS引入图片
如果在CSS中引入图片,方法和html中直接引入是一样的,也是用“~”符号引入。
<style> .diss{ width: 300px; height: 100px; background-image: url(‘~static/text.png‘) } </style>
这时候在npm run dev 下是完全正常的,那我们看一下打包。
打包静态HTML并运行
用Nuxt.js制作完成后,你可以打包成静态文件并放在服务器上,进行运行。
在终端中输入:
npm run generate
会生成一个dist
文件夹,里边就是生产的静态html文件,直接放到服务器端进行运行了。
文章来源:http://jspang.com/2018/02/26/nuxt.js/
原文地址:https://www.cnblogs.com/sxgxiaoge/p/9401072.html