正文

nuxt.js入门安装及灵活使用(代码片段)

一只楠喃  一只楠喃  2023-02-27  533

关键词：

Nuxt.js

1、案例入门
2、目录结构
- 2.1、目录
- 1.2、别名
3、路由
4、视图
5、ajax操作
6、Vuex 状态树
7、nuxt流程总结

1、案例入门

1.1、create-nuxt-app 介绍

Nuxt.js 提供了脚手架工具 create-nuxt-app
create-nuxt-app 需要使用 npx
npx 命令为 NPM版本5.2.0默认安装组件

1.2、安装

npx create-nuxt-app project-name

nuxtjs改善

1.3 启动

npm run dev

1.4、访问

http://localhost:3000

2、目录结构

2.1、目录

目录名称	描述
assets	资源目录，用于存放需要编译的静态资源。例如：LESS、SASS等默认情况下，Nuxt使用Webpack若干加载器处理目录中的文件
components	vue组件目录，Nuxt.js 不会增强该目录，及不支持SSR
layouts	布局组件目录
pages	页面目录，所有的vue视图，nuxt根据目录结构自动生成对应的路由。
plugins	插件目录
static	静态文件目录，不需要编译的文件
store	vuex目录
nuxt.config.js	nuxt个性化配置文件，内容将覆盖默认
package.json	项目配置文件

1.2、别名

assets 资源的引用：~ 或 @

// HTML 标签
<img src="~assets/13.jpg" style="height:100px;width:100px;" alt="">
<img src="~/assets/13.jpg" style="height:100px;width:100px;" alt="">
<img src="@/assets/13.jpg" style="height:100px;width:100px;" alt="">

// CSS
background-image: url(~assets/13.jpg);
background-image: url(~/assets/13.jpg);
background-image: url(@/assets/13.jpg);

static 目录资源的引用：/ 直接引用

//html标签
<img src="/12.jpg" style="height:100px;width:100px;" alt="">

//css
background-image: url(/12.jpg);

举个栗子吧

<template>
  <div>
    <!-- 引用 assets 目录下经过 webpack 构建处理后的图片 -->
    <img src="~assets/13.jpg" style="height:100px;width:100px;" alt="">

    <!-- 引用 static 目录下的图片 -->
    <img src="/12.jpg" style="height:100px;width:100px;" alt="">

    <!-- css -->
    <div class="img1"></div>
    <div class="img2"></div>
  </div>
</template>

<script>
export default 


</script>

<style>
  .img1 
    height: 100px;
    width: 100px;
    background-image: url(~assets/13.jpg);
    background-size: 100px 100px;
    display: inline-block;
  
  .img2 
    height: 100px;
    width: 100px;
    background-image: url(/12.jpg);
    background-size: 100px 100px;
    display: inline-block;
  
</style>

3、路由

3.1、路由概述

Nuxt.js 依据 pages 目录结构自动生成 vue-router 模块的路由配置。
要在页面之间切换路由，我们建议使用<nuxt-link> 标签。

标签名	描述
`<nuxt-link>`	nuxt.js中切换路由
`<Nuxt />`	nuxt.js的路由视图
`<router-link>`	vue默认切换路由
`<router-view/>`	vue默认路由视图

3.2、基础路由

自动生成基础路由规则

路径	组件位置及其名称	规则
/	pages/index.vue	默认文件 index.vue
/user	pages/user/index.vue	默认文件 index.vue
/user/one	pages/user/one.vue	指定文件

栗子

1：访问路径，由pages目录资源的名称组成（目录名称、文件的名称）
资源位置： ~/pages/user/one.vue
访问路径：http://localhost:3000/user/one
2：每一个目录下，都有一个默认文件 index.vue
资源位置： ~/pages/user/index.vue
访问路径：http://localhost:3000/user

/user 可以匹配的文件

pages/user.vue 文件【优先级高】
pages/user/index.vue 文件

3.3、动态路由

在 Nuxt.js 里面定义带参数的动态路由，需要创建对应的以下划线作为前缀的 Vue 文件或目录。

路由中路径匹配	组件位置及其名
/	pages/index.vue
/user/:id	pages/user/_id.vue
/:slug	pages/_slug/index.vue
/:slug/comments	pages/_slug/comments.vue

栗子：获得id值，创建资源 user/_id.vue

<template>
  <div>
    查询详情 this.$route.params.id
  </div>
</template>

<script>
export default 
  transition: 'test',
  mounted() 
    console.info(this.$route)
  ,

</script>

<style>

</style>

3.4、动态命名路由

路径 /news/123 匹配_id.vue还是_name.vue ？
我们可以使用<nuxt-link>解决以上问题
- 通过name 确定组件名称：“xxx-yyy”
- 通过params 给对应的参数传递值

<nuxt-link :to="name:'news-id',params:id:1002">第2</nuxt-link>
<nuxt-link :to="name:'news-name',params:name:1003">第3</nuxt-link>

3.5、默认路由

路径	组件位置及其名称
不匹配的路径	pages/_.vue

3.6、嵌套路由

创建嵌套子路由，你需要添加一个父组件Vue 文件，同时添加一个与该文件同名的目录用来存放子视图组件。
- 要求：父组件使用<nuxt-child/> 显示子视图内容

pages/
--| book/						//同名文件夹
-----| _id.vue
-----| index.vue
--| book.vue					//父组件

编写父组件 pages/child/book.vue

<template>
  <div>
      <nuxt-link to="/child/book/list">书籍列表</nuxt-link> |
      <nuxt-link to="/child/book/123">书籍详情</nuxt-link> |
      <hr>
      <nuxt-child />
  </div>
</template>

<script>
export default 


</script>

<style>

</style>

编写子组件 pages/child/book/list.vue

<template>
  <div>书籍列表</div>
</template>

<script>
export default 


</script>

<style>

</style>

编写子组件 pages/child/book/_id.vue

<template>
  <div>书籍详情$route.params.id </div>
</template>

<script>
export default 


</script>

<style>

</style>

3.7、过渡动效

3.7.1 全局过渡动效设置

Nuxt.js 默认使用的过渡效果名称为 page
- .page-enter-active样式表示进入的过渡效果。
- .page-leave-active样式表示离开的过渡效果。

创建 assets/main.css，编写如下内容：

.page-enter-active, .page-leave-active
transition: opacity .5s;

.page-enter, .page-leave-active
opacity: 0;

nuxt.config.js 引入main.css文件

module.exports =
css: [
‘assets/main.css’
]

3.7.2、自定义动画

如果想给某个页面自定义过渡特效的话，只要在该页面组件中配置 transition 字段即可：

在全局样式 assets/main.css 中添加名称为test的过渡效果

.test-enter-active, .test-leave-active 
  transition: all 2s;
  font-size:12px;

 .test-enter, .test-leave-active 
  opacity: 0;
  font-size:40px;

需要使用特效的vue页面编写如下：

export default 
  transition: 'test'

4、视图

4.1、默认模板

定制化默认的 html 模板，只需要在应用根目录下创建一个 app.html 的文件。
默认模板：

<!DOCTYPE html>
<html  HTML_ATTRS >
  <head  HEAD_ATTRS >
     HEAD 
  </head>
  <body  BODY_ATTRS >
     APP 
  </body>
</html>

修改模板，对低版本IE浏览器进行支持（兼容IE浏览器）

<!DOCTYPE html>
<!--[if IE 9]><html lang="en-US" class="lt-ie9 ie9"  HTML_ATTRS ><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html  HTML_ATTRS ><!--<![endif]-->
  <head  HEAD_ATTRS >
     HEAD 
  </head>
  <body  BODY_ATTRS >
     APP 
  </body>
</html>

4.2、默认布局

4.2.1、布局概述

布局：Nuxt.js根据布局，将不同的组件进行组合。
模板：html页面，是布局后所有组件挂载的基础。

4.2.2、布局分析

layouts/default.vue 默认布局组件
- 访问路径根据路由，确定执行组件
- 组件具体显示的位置，有布局来确定

4.2.3、公共导航

修改 layouts/default.vue

<template>
  <div>
    <nuxt-link to="/">首页</nuxt-link> |
    <nuxt-link to="/user/login">登录</nuxt-link> |
    <nuxt-link to="/user/123">详情</nuxt-link> |
    <nuxt-link to="/about">默认页</nuxt-link> |
    <nuxt-link to="/nuxt/async">async</nuxt-link> |
    <hr/>
    <Nuxt />
  </div>
</template>

4.3、自定义布局

在layouts目录下创建组件：layouts/blog.vue

<template>
	<div>
        开头<br/>
        <nuxt/>
        结束<br/>
    </div>
  
</template>

<script>
export default 


</script>

<style>

</style>

在需要的视图中使用 blog布局

<script>
export default 
  layout: 'blog'
  //...

</script>

4.4、错误页面

编写layouts/error.vue页面，实现个性化错误页面

<template>
  <div>
    <div v-if="error.statusCode == 404">
      404 页面不存在 error.message
    </div>
    <div v-else>
      应用程序错误
    </div>
    <nuxt-link to="/">首 页</nuxt-link>
  </div>
</template>

<script>
export default 
  props: ['error']

</script>

<style>

</style>

解决问题： 404 、500、连接超时（服务器关闭）
总结：所学习的技术中，有2种方式处理错误页面
- 方式1：默认路径，_.vue （先执行）
- 方式2：错误页面，~/layouts/error.vue

4.5、Nuxt组件特殊配置

页面组件实际上是 Vue 组件，只不过 Nuxt.js 为这些组件添加了一些特殊的配置项

特殊配置项	特殊配置项
asyncData	SSR进行异步数据处理，也就是服务器端ajax操作区域。
fetch	在渲染页面之前获取数据填充应用的状态树（store）
head	配置当前页面的 Meta 标签
layout	指定当前页面使用的布局
transition	指定页面切换的过渡动效
scrollToTop	布尔值，默认: false。用于判定渲染页面前是否需要将当前页面滚动至顶部。

4.5.1、模板代码

<template>
  <h1 class="red">Hello  name !</h1>
</template>

<script>
export default 
	//异步处理数据, 每次加载之前被调用
  asyncData (context) 
    // called every time before loading the component
    return  name: 'World' 
  ,	
	//用于在渲染页面之前获取数据填充应用的状态树（store）
  fetch () 
    // The fetch method is used to fill the store before rendering the page
  ,
	//配置当前页面的 Meta 标签
  head: 
    // Set Meta Tags for this Page
  ,
  // and more functionality to discover
  ...

</script>

<style>
.red 
  color: red;

</style>

4.5.2、 head

html模板代码

<html>
<head>
	<meta charset="UTF-8" />
	<title>我是标题</title>
	<link rel="stylesheet" type="text/css" href="css外部文件"/>
	<script src="js外部文件" type="text/javascript" charset="utf-8"></script>
</head>
<body>
</body>
</html>

通过nuxt提供head属性，可以给单个也是设置：标题、外部css、外部js 等内容。

<template>
  <div>
    详情页 $route.params.id <br/>

    <div class="bg2"></div>
    <div class="bg3"></div>

  </div>
</template>

<script>
export default 
  head: 
    title: '详情页',
    link: [
      rel:'stylesheet',href:'/style/img.css',....
    ],
    script: [
       type: 'text/javascript', src: '/js/news.js' 
    ]
  

</script>

<style>
  .bg2 
    background-image: url('~static/img/2.jpg');
    width: 300px;
    height: 300px;
    background-size: 300px;
  
</style>

5、ajax操作

5.1、整合 axios

5.1.1 默认整合

在构建项目时，如果选择axios组件，nuxt.js将自动与axios进行整合

5.1.2 手动整合

手动整合

“dependencies”:
“@nuxtjs/axios”: “^5.13.1”,
,

安装

npm install

nuxt.config.js 以模块的方式添加axios

modules: [
// https://go.nuxtjs.dev/axios
‘@nuxtjs/axios’,
],

5.1.3、常见配置

修改 nuxt.config.js 进行baseURL的配置

// Axios module configuration: https://go.nuxtjs.dev/config-axios
axios:
baseURL:‘http://localhost:10010/’
,

5.2、使用axios发送ajax

在vue页面中，通过 this. $a x i o s . x x x () 操作 a j a x 。 t h i s .$ axios 与之前 axios等效。

this.$axios.post("/search-service/search",this.searchMap).then( res =>
//获得查询结果
this.searchResult = res.data.data;
);

5.3、使用asyncData发送 ajax

asyncData中的ajax将在“前端服务端执行”，在浏览器看到是数据，而不是ajax程序。

5.3.1 发送一次请求

语法：

export default 
	async asyncData( context )   //context就相当于其他地方的this
        //发送ajax
        let  data  = await context.$axios.get('路径','参数')
        // 返回结果
        return 变量查看详情  
                
part3-3-3nuxt.js基础(代码片段)
...Nuxt.js主要关注的是应用的UI渲染。我们的目标是创建一个灵活的应用框架，你  查看详情  
                
kong入门及docker安装(代码片段)
一.Kong介绍Kong(https://github.com/Kong/kong)是一个云原生，高效，可扩展的分布式API网关。自2015年在github开源后，广泛受到关注，目前已收获1.9w+的star，其核心价值在于高性能和可扩展性。二.安装前准备安装好docker稳定版本会docker的...  查看详情  
                
elasticsearch入门（下载安装）(代码片段)
目录elasticsearchES入门下载安装可能出现的问题及解决RESTful&JSON客户端安装ES的数据格式elasticsearch一个分布式免费开源的搜索分析引擎，elastic表示可伸缩灵活的意思，search表示查询的意思，所以这个引擎的核心其实...  查看详情  
                
elasticsearch入门（下载安装）(代码片段)
目录elasticsearchES入门下载安装可能出现的问题及解决RESTful&JSON客户端安装ES的数据格式elasticsearch一个分布式免费开源的搜索分析引擎，elastic表示可伸缩灵活的意思，search表示查询的意思，所以这个引擎的核心其实...  查看详情  
                
kibana快速入门及安装（十四）(代码片段)
Kibana介绍　　Kibana 是一款开源的数据分析和可视化平台，它是 ElasticStack 成员之一，设计用于和 Elasticsearch 协作。您可以使用 Kibana 对 Elasticsearch 索引中的数据进行搜索、查看、交互操作。您可...  查看详情  
                
入门学python一定要知道的requests模块安装及使用(代码片段)
requests模块我们来学习如何在代码中实现我们的爬虫1.requests模块介绍requests文档http://docs.python-requests.org/zh_CN/latest/index.html复制代码**1.1requests模块的作用：**发送http请求，获取响应数据复制代码1.2requests模块是一个第三方...  查看详情  
                
atom编辑器入门到精通安装及使用基础(代码片段)
原创时间:2015-12-18更新时间:2016-12-08为什么选择使用AtomAtom是GitHub推出的一款编辑器,被称为21世纪的黑客编辑器.其主要的特点是现代,易用,可定制.本人以前用过多款编辑器,现在来总结一下个人对各编辑器的看法:Vim是我使用最久也...  查看详情  
                
nuxt.js的学习(代码片段)
...是3.7.1，而我学习的是2.15.0，所以我需要指定版本安装（方便学习） 下载指定nuxt.js的版本npminstall-gcreate-nuxt-app@v2.15.0 2、 创建项目  查看详情  
                
nuxt.js中使用markdown编辑器(代码片段)
1.安装npminstallmavon-editor--save2.在plugins中创建vue-markdown.jsimportVuefrom'vue'importmavonEditorfrom'mavon-editor'Vue.use(mavonEditor)3.在nuxt.config.js中引入css:[src:"mavon-editor/dist/css/index.css",],plugins:[src:"~plugins/vue-markdown.js",ssr:false,...  查看详情  
                
flume安装及ganglia使用(代码片段)
一、flume是什么??????Flume是Cloudera提供的一个高可用的，高可靠的，分布式的海量日志采集、聚合和传输的系统。Flume基于流式架构，灵活简单。flume的架构：flume的组成架构：二、flume的组件介绍1、AgentAgent是一个JVM进程，它以事...  查看详情  
                
express脚手架安装及使用(代码片段)
入门简介Express是基于nodejs的web开发框架。优点是易上手、高性能、扩展性强。易上手：nodejs最初就是为了开发高性能web服务器而被设计出来的，然而相对底层的API会让不少新手望而却步。express对web开发相关的模块进行了适度的...  查看详情  
                
vscode开发工具的入门及基本使用(代码片段)
VsCode开发工具的入门及基本使用一、VsCode介绍1.VsCode简介2.VsCode特点二、安装VsCode1.下载VsCode2.安装VsCode3.打开VsCode三、设置VsCode中文1.搜索中文语言插件2.安装中文语言插件四、初识VsCode1.VsCode左侧栏模块2.系统设置功能五、VsCode初...  查看详情  
                
无法在 Cloud9 打开 Nuxt.js 入门模板
】无法在Cloud9打开Nuxt.js入门模板【英文标题】：Can\'topenNuxt.jsstartertemplateatCloud9【发布时间】：2017-09-2304:42:29【问题描述】：无法在浏览器中打开Nuxt.jsstartertemplate（我看到Cloud9页面：此处似乎没有运行应用程序！Cloud9无法将您带...  查看详情  
                
airflow入门及使用(代码片段)
Airflow入门及使用Airflow入门及使用什么是Airflow？Airflow是一个使用python语言编写的datapipeline调度和监控工作流的平台。Airflow是通过DAG（Directedacyclicgraph有向无环图）来管理任务流程的任务调度工具，不需要知道业务数据的具体内...  查看详情  
                
python从入门到进阶5变量的定义及数据类型(代码片段)
接上篇《4、pycharm的安装及使用》上一篇我们学习了python编程工具pycharm的安装及基本使用。后续篇章我们正式来学习Python语言的语法和特性，本篇我们主要学习Python变量的定义及数据类型。一、注释1、注释介绍在工作编码的...  查看详情  
                
arcternpandas入门-前后端渲染(代码片段)
????Arctern基于开源大数据生态，构建灵活、强大、高性能的时空数据分析平台，帮助用户应对5G/IoT带来的新型数据挑战,加速时空数据的处理、分析、模型预测与呈现。本文中将会介绍Arcternpandas安装和简单使用Arctern安装????参照官...  查看详情  
                
webpack使用入门及常用配置总结(代码片段)
转自：https://www.cnblogs.com/y896926473/articles/6011711.html官网：https://www.webpackjs.com/concepts/1.webpack简介webpack是一个模块打包工具。它使得模块相互依赖并且可构建等价于这些模块的静态资源。相比于已经存在的模块打包器（modulebundler）...  查看详情



      
        
          免责声明：如内容涉及版权或违规等问题，请在尽快内联系我们pp114#vip.qq.com，我们将在第一时间删除内容。

正文

nuxt.js入门安装及灵活使用(代码片段)

Nuxt.js

1、 案例入门

1.1、create-nuxt-app 介绍

1.2、安装

1.3 启动

1.4、访问

2、目录结构

2.1、 目录

1.2、别名

3、路由

3.1、路由概述

3.2、基础路由

3.3、动态路由

3.4、动态命名路由

3.5、默认路由

3.6、嵌套路由

3.7、过渡动效

3.7.1 全局过渡动效设置

3.7.2、 自定义动画

4、视图

4.1、默认模板

4.2、默认布局

4.2.1、 布局概述

4.2.2、 布局分析

4.2.3、 公共导航

4.3、自定义布局

4.4、错误页面

4.5、Nuxt组件特殊配置

4.5.1、 模板代码

4.5.2、 head

5、ajax操作

5.1、整合 axios

5.1.1 默认整合

5.1.2 手动整合

5.1.3、常见配置

5.2、使用axios发送ajax

5.3、使用asyncData发送 ajax

5.3.1 发送一次请求

part3-3-3nuxt.js基础(代码片段)

kong入门及docker安装(代码片段)

elasticsearch入门（下载安装）(代码片段)

elasticsearch入门（下载安装）(代码片段)

kibana快速入门及安装（十四）(代码片段)

入门学python一定要知道的requests模块安装及使用(代码片段)

atom编辑器入门到精通安装及使用基础(代码片段)

nuxt.js的学习(代码片段)

nuxt.js中使用markdown编辑器(代码片段)

flume安装及ganglia使用(代码片段)

express脚手架安装及使用(代码片段)

vscode开发工具的入门及基本使用(代码片段)

无法在 Cloud9 打开 Nuxt.js 入门模板

airflow入门及使用(代码片段)

python从入门到进阶5变量的定义及数据类型(代码片段)

arcternpandas入门-前后端渲染(代码片段)

webpack使用入门及常用配置总结(代码片段)