第一节: nuxt.JS 相关概述
nuxt.JS 简单的说是 vue.js 的通用框架, 最常用的就是用来作 SSR(服务器端渲染).vue.JS 是开发 SPA(单页应用)的, Nuxt.JS 这个框架, 用 Vue 开发多页应用, 并在服务端完成渲染, 可以直接用命令把我们制作的 vue 项目生成为静态 html.
1. 那服务器端渲染到底有什么好处呢?
主要的原因时 SPA(单页应用)不利于搜索引擎的 SEO 操作, Nuxt.JS 适合作新闻, 博客, 电影, 咨询这样的需要搜索引擎提供流量的项目. 如果你要作移动端的项目, 就没必要使用这个框架了.
2. 什么是 SSR?
SSR, 即服务器渲染, 就是在服务器端将对 Vue 页面进行渲染生成 HTML 文件, 将 HTML 页面传递给浏览器.
SSR 两个优点:
(1)SEO 不同于 SPA 的 HTML 只有一个无实际内容的 HTML 和一个 App.JS,SSR 生成的 HTML 是有内容的, 这让搜索引擎能够索引到页面内容.
(2)更快内容到达时间 传统的 SPA 应用是将 bundle.JS 从服务器获取, 然后在客户端解析并挂载到 dom. 而 SSR 直接将 HTML 字符串传递给浏览器. 大大加快了首屏加载时间.
Nuxt.JS 的官方网站是这样介绍的:
Nuxt.JS 是一个基于 Vue.JS 的通用应用框架. 通过对客户端 / 服务端基础架构的抽象组织, Nuxt.JS 主要关注的是应用的 UI 渲染.
Nuxt.JS 是特点(优点):
基于 Vue.JS
自动代码分层
服务端渲染
强大的路由功能, 支持异步数据
静态文件服务
ES6/ES7 语法支持
打包和压缩 JS 和 CSS
HTML 头部标签管理
本地开发支持热加载
集成 ESLint
支持各种样式预处理器: Sass,Less, Stylus 等等
第二节: Nuxt 环境搭建
1.nuxt.JS 安装
在使用 NPM 前你需要安装 Node 到系统中.
(1)用 NPM 来安装 vue-cli 这个框架.
NPM install vue-cli -g
安装完成后可以使用 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 启动服务
(5)在浏览器输入 localhost:3000, 可以看到结果.
第三节 :Nuxt 目录结构
第四节: Nuxt 常用配置项
1. 配置 IP 和端口
开发中经常会遇到端口被占用或者指定 IP 的情况. 我们需要在根目录下的 package.JSON 里对 config 项进行配置. 比如现在我们想把 IP 配置成 127.0.0.1, 端口设置 1000.
- /package.JSON
- "config":{
- "nuxt":{
- "host":"127.0.0.1",
- "port":"1000"
- }
- },
配置好后, 我们在终端中输入 NPM run dev, 然后你会看到服务地址改为了 127.0.0.1:1000.
2. 配置全局 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 . 然后你会发现字体已经变成了红色.
3. 配置 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 的路由配置和参数传递
Nuxt.JS 的路由并不复杂, 它给我们进行了封装, 让我们节省了很多配置环节.
1. 简单路由 Demo
我们现在根目录的 pages 文件下新建两个文件夹, about 和 news(模仿关于我们和新闻的功能模块).
(1)在 about 文件夹下新建 index.vue 文件, 并写入下面的代码:
- <template>
- <div>
- <h2>About Index page</h2>
- <ul>
- <li><a href="/">Home</a></li>
- </ul>
- </div>
- </template>
(2)在 news 文件夹下新建 index.vue 文件, 并写入下面的代码:
- <template>
- <div>
- <h2>News Index page</h2>
- <ul>
- <li><a href="/">Home</a></li>
- </ul>
- </div>
- </template>
(3)修改原来的 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>
- </style>
由于 Nuxt.JS 都为我们作好了, 不用写任何配置代码. 所以我们可以在页面上实现相关跳转.
2.<nuxt-link > 标签
虽然上面的例子跳转已经成功, 但是 Nuxt.JS 并不推荐这种 < a > 标签的作法, 它为我们准备了 < nuxt-link > 标签(vue 中叫组件). 我们先把首页的 < a > 标签替换成 < nuxt-link>, 改造如下:
- <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>
我们再次预览页面, 也是可以进行正常跳转的, 在实际开发中尽量使用标签的方法跳转路由.
3.params 传递参数
路由经常需要传递参数, 我们可以简单的使用 params 来进行传递参数, 我们现在向新闻页面 (news) 传递个参数, 然后在新闻页面进行简单的接收.
(1)我们先修改 pages 下的 Index.vue 文件, 给新闻的跳转加上 params 参数, 传递 3306.
- <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>
(2)在 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>
成功实现参数的传递.
第六节: Nuxt 的动态路由和参数校验
1. 动态路由, 其实动态路由就是带参数的路由. 比如我们现在新闻模块下面有很多新闻详细页, 这时候就需要动态路由的帮助了.
(1)新闻详细页面: 我在 news 文件夹下面新建了_id.vue 的文件, 以下画线为前缀的 Vue 文件就是动态路由, 然后在文件里边有 $route.params.id 来接收参数.
- /pages/news/_id.vue
- <template>
- <div>
- <h2>News-Content [{{$route.params.id}}]</h2>
- <ul>
- <li><a href="/">Home</a></li>
- </ul>
- </div>
- </template>
(2)修改新闻首页路由
我们在 / pages/news/index.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="/news/123">News-1</a></li>
- <li><a href="/news/456">News-2</a></li>
- </ul>
- </div>
- </template>
代码写好后, 打开 NPM run dev 进行查看, 我们已经进入了新闻详细页, 并在详细页中取得了传递过来的新闻 id.
2. 参数校验
进入一个页面, 对参数传递的正确性校验是必须的, Nuxt.JS 也贴心的为我们准备了校验方法 validate( ).
(1)在接受参数的页面添加
- /pages/news/_id.vue
- export default {
- validate ({ params }) {
- // Must be a number
- return /^\d+$/.test(params.id)
- }
- }
使用了 validate 方法, 并把 params 传递进去, 然后用正则进行了校验, 如果正则返回了 true 正常进入页面, 如果返回 false 进入 404 页面.
第七节: Nuxt 的路由动画效果
路由的动画效果, 也叫作页面的更换效果. Nuxt.JS 提供两种方法为路由提供动画效果, 一种是全局的, 一种是针对单独页面制作.
1. 全局路由动画
全局动画默认使用 page 来进行设置, 例如现在我们为每个页面都设置一个进入和退出时的渐隐渐现的效果. 我们可以先在根目录的 assets/CSS 下建立一个 normailze.CSS 文件.
(1)添加样式文件
- /assets/CSS/normailze.CSS(没有请自行建立)
- .page-enter-active, .page-leave-active {
- transition: opacity 2s;
- }
- .page-enter, .page-leave-active {
- opacity: 0;
- }
(2)文件配置
然后在 nuxt.config.JS 里加入一个全局的 CSS 文件就可以了.
CSS:['assets/css/main.css'],
这时候在页面切换的时候就会有 2 秒钟的动画切换效果了, 但是你会发现一些页面是没有效果的, 这是因为你没有是 < nuxt-link > 组件来制作跳转链接. 你需要进行更改.
比如我们上节课作的动态路由新闻页, 你就需要改成下面的链接.
<li><nuxt-link :to="{name:'news-id',params:{id:123}}">News-1</nuxt-link></li>
改过之后你就会看到动画效果了.
2. 单独设置页面动效
想给一个页面单独设置特殊的效果时, 我们只要在 CSS 里改变默认的 page, 然后在页面组件的配置中加入 transition 字段即可. 例如, 我们想给 about 页面加入一个字体放大然后缩小的效果, 其他页面没有这个效果.
(1)在全局样式 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;
- }
(2)然后在 about/index.vue 组件中设置
- export default {
- transition:'test'
- }
这时候就有了页面的切换独特动效了.
总结: 在需要使用的页面导入即可.
第八节: Nuxt 的默认模版和默认布局
在开发应用时, 经常会用到一些公用的元素, 比如网页的标题是一样的, 每个页面都是一模一样的标题. 这时候我们有两种方法, 第一种方法是作一个公用的组件出来, 第二种方法是修改默认模版. 这两种方法各有利弊, 比如公用组件更加灵活, 但是每次都需要自己手动引入; 模版比较方便, 但是只能每个页面都引入.
1. 默认模板
Nuxt 为我们提供了超简单的默认模版订制方法, 只要在根目录下创建一个 App.HTML 就可以实现了. 现在我们希望每个页面的最上边都加入 "学习 nuxt.js" 这几个字, 我们就可以使用默认模版来完成.
App.HTML 中:
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- {{ HEAD }}
- </head>
- <body>
- <p>
- 学习 nuxt.JS
- </p>
- {{ App }}
- </body>
- </HTML>
这里的 {{ HEAD }} 读取的是 nuxt.config.JS 里的信息,{{App}} 就是我们写的 pages 文件夹下的主体页面了. 需要注意的是 HEAD 和 App 都需要大写, 如果小写会报错的.
注意: 如果你建立了默认模板后, 记得要重启服务器, 否则显示不会成功; 但是默认布局是不用重启服务器的.
2. 默认布局
默认模板类似的功能还有默认布局, 但是从名字上你就可以看出来, 默认布局主要针对于页面的统一布局使用. 它在位置根目录下的 layouts/default.vue. 需要注意的是在默认布局里不要加入头部信息, 只是关于 < template > 标签下的内容统一订制.
需求: 我们在每个页面的最顶部放入 "学习 nuxt.js" 这几个字, 看一下在默认布局里的实现.
- <template>
- <div>
- <p > 学习 nuxt.JS</p>
- <nuxt/>
- </div>
- </template>
这里的 < nuxt/>就相当于我们每个页面的内容, 你也可以把一些通用样式放入这个默认布局里, 但会增加页面的复杂程度.
总结: 要区分默认模版和默认布局的区别, 模版可以订制很多头部信息, 包括 IE 版本的判断; 模版只能定制 < template > 里的内容, 跟布局有关系. 在工作中修改时要看情况来编写代码.
第九节: Nuxt 的错误页面和个性 meta 设置
当用户输入路由错误的时候, 我们需要给他一个明确的指引, 所以说在应用程序开发中 404 页面是必不可少的. Nuxt.JS 支持直接在默认布局文件夹里建立错误页面.
1. 建立错误页面
在根目录下的 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 > 的简单写法直接跟上路径就可以了.
2. 个性 meta 设置
页面的 Meta 对于 SEO 的设置非常重要, 比如你现在要作个新闻页面, 那为了搜索引擎对新闻的收录, 需要每个页面对新闻都有不同的 title 和 meta 设置. 直接使用 head 方法来设置当前页面的头部信息就可以了. 我们现在要把 New-1 这个页面设置成个性的 meta 和 title.
1. 我们先把 pages/news/index.vue 页面的链接进行修改一下, 传入一个 title, 目的是为了在新闻具体页面进行接收 title, 形成文章的标题.
- /pages/news/index.vue
- <li><nuxt-link :to="{name:'news-id',params:{id:123,title:'nuxt.com'}}">News-1</nuxt-link></li>
2. 第一步完成后, 我们修改 / pages/news/_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 方法获取数据
Nuxt.JS 贴心的为我们扩展了 Vue.JS 的方法, 增加了 anyncData, 异步请求数据.
(1)创建远程数据
在这里制作一些假的远程数据, 我选择的网站是 myjson.com, 它是一个 JSON 的简单仓库, 学习使用是非常适合的. 我们打开网站, 在对话空中输入 JSON 代码, 这个代码可以随意输入, key 和 value 均采用字符串格式创建.
- {
- "name": "Nuxt",
- "age": 18,
- "interest": "I love coding!"
- }
输入后保存, 网站会给你一个地址, 这就是你这个 JSON 仓库的地址了. https://api.myjson.com/bins/1ctwlm
(2)安装 Axios
Vue.JS 官方推荐使用的远程数据获取方式就 Axios, 所以我们安装官方推荐, 来使用 Axios. 这里我们使用 NPM 来安装 axios. 直接在终端中输入下面的命令:
NPM install axios --save
1.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/1ctwlm')
- .then((res)=>{
- console.log(res)
- return {info:res.data}
- })
- }
- }
- </script>
这时候我们可以看到, 浏览器中已经能输出结果了. asyncData 的方法会把值返回到 data 中. 是组件创建 (页面渲染) 之前的动作, 所以不能使用 this.info,
return {info:res.data}相当于在 data 中多了一个 info:''.
2.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>
第十一节: 静态资源和打包
1. 静态资源
(1)直接引入图片
在网上任意下载一个图片, 放到项目中的 static 文件夹下面, 然后可以使用下面的引入方法进行引用
<div><img src="~static/logo.png" /></div>
"~" 就相当于定位到了项目根目录, 这时候图片路径就不会出现错误, 就算打包也是正常的.
(2)CSS 引入图片
如果在 CSS 中引入图片, 方法和 HTML 中直接引入是一样的, 也是用 "~" 符号引入.
- <style>
- .diss{
- width: 300px;
- height: 100px;
- background-image: url('~static/logo.png')
- }
- </style>
这时候在 NPM run dev 下是完全正常的.
2. 打包
用 Nuxt.JS 制作完成后, 你可以打包成静态文件并放在服务器上, 进行运行.
在终端中输入:
NPM run generate
然后在 dist 文件夹下输入 live-server 就可以了.
总结: Nuxt.JS 框架非常简单, 因为大部分的事情他都为我们做好了, 我们只要安装它的规则来编写代码.
来源: https://www.cnblogs.com/bfwbfw/p/10040929.html