Nuxt.js 的详细使用以及踩的坑

Nuxt.js 的使用

安装

1、nuxt.js 基于 vue 因此使用 vue 进行项目创建,nuxt.js 官方提供一个模板,我们就以这个模板进行 nuxt 项目的创建。其创建代码为:

vue init nuxt-community/starter-template '你的项目名称'

回车之后会进行模板下载,务必联网
模板下载好之后,会让你填写一些基本信息,可以直接回车选择默认就好,如下图:
在这里插入图片描述

模板的目录结构如下:
node_modules 文件夹是需要我们安装依赖之后才有的;
在这里插入图片描述
2、安装依赖
进入到项目根目录,依赖安装:

npm install

如果依赖安装成功则会出现以下图标:
在这里插入图片描述

3、运行 nuxt.js 项目
经过以上两个步骤之后,我们就可以运行 nuxt.js 项目了;
在项目根目录下,运行:

npm run dev

等待项目运行。。。。
nuxt.js 项目成功运行会给出一个默认地址:http://localhost:3000/
在这里插入图片描述

把网址复制到页面中,就可以看到这样的一个页面:
在这里插入图片描述

这样,我们的 nuxt.js 项目就正式创建完成了,接下就是编码了;

目录结构讲解

.nuxt 里面是放置 nuxt 项目的配置信息,最好不要动
assets 会放置一些静态资源,如 js 文件,SASS,LESS 文件等;
components 专门放置页面中的组件;
layouts 专门放置项目的模板;
middleware 专门放置项目的中间件;
pages 专门放置项目的页面;
plugins 专门放置项目的插件;
static 主要放置项目的静态资源,如图片;
store 用于项目的 vuex 状态文件;
nuxt.config.js 项目的配置文件,比较重要;
package.json 里面主要是项目的依赖关系;

引入 Iconfont(阿里图标)

1、将项目下载到本地(省略阿里图标库的项目创建和添加图标。。。)
在这里插入图片描述

2、解压之后将所有文件复制到项目中去
我将图标文件放到 static 文件夹下,新建一个 font 文件夹,将所有解压的文件放到 font 中
在这里插入图片描述

3、图标配置
在 nuxt.config.js 文件中进行图标的配置
在这里插入图片描述

4、图标在页面中的使用
在代码中使用

<i class="iconfont">&#xe623;</i>

图标在页面中的显示
在这里插入图片描述

引入 Element-UI

1、使用 npm 进行 elemnt-ui 安装

npm i element-ui -S

2、在 plugins 文件夹下创建 element-ui.js 文件(plugins 文件夹是专门放插件的)
在文件中进行全局引入

import Vue from 'vue'
import ElementUI from 'element-ui'
Vue.use(ElementUI);

3、在 nuxt.config.js 中添加配置

css: [
  'element-ui/lib/theme-chalk/index.css'  // 引入全局样式
],
 plugins: [
  {src: '~/plugins/ElementUI', ssr: false }
],
build: {
  vendor: ['element-ui'] // 防止重复打包
}

4、测试一下看看是否可以
在页面中使用

<el-pagination
        background
        layout="prev, pager, next"
        :total="1000">
      </el-pagination>

页面中显示
在这里插入图片描述

http 请求(简易用法)

1、安装

 npm install @nuxtjs/axios

2、nuxt.config.js 配置

module.exports = {
  modules: [
    '@nuxtjs/axios',
  ],
  axios: {
    baseURL: '需要请求的URL', // 如:http://www.baidu.com
  }
}

3、在代码中使用

// 以 GET 为例,其他请求用法相同
this.$axios.$get('后端给的接口').then(res => {
  /* 在这里将值取出来 */
  console.log(res);
});

项目打包和运行

1、进入到项目根目录下,用一下命令进行打包

npm run build

2、当控制台命令执行结束时,我们看到原来的项目目录结构并没有发生什么变化,这时我们将一下四个文件单独放到另外一个文件夹下
在这里插入图片描述

3、我们到那四个文件的根目录下运行安装依赖

npm install

安装之后的目录结构如下
在这里插入图片描述

4、在根目录下运行打包之后的 nuxt 项目

npm start

利于 SEO

要想利于 SEO 就要在组件渲染之前就将数据获取到;
因此页面的所有请求必须放在 asyncData 函数里面,这个函数是 Nuxt 框架独有的,专门为了 SEO 设计;
该函数是在组件渲染之前就会执行,因此在这个函数内部是不能使用 this 关键字获取全局变量或方法;
asyncData 官网介绍(传送门

简单实例:

/*
参数介绍:
	只有一个参数时:
  	asyncData(context):该参数就是当前页面的上下文对象,也就是我们常用的 this
  有多个参数时:
  	asyncData({app, query, store}):默认第一个参数是上下文对象,当前这个例子中的第二个参数是获取别的页面传来参数,当前例子中的第三个参数是 状态管理
*/

async asyncData({app, query, store}) {
  // 两个请求
	let [res1, res2] = await Promise.all([
        app.$http.getA(),
        app.$http.getB(),
  ])
 	// res1 res2 就是请求到的结果,还可以增加多几个请求。
  
  // 想要把该函数内的数据传出去,就要将数据通过 return 返回回去。return 返回的数据必须是json数据,并且键值必须在 data 内已经定义过的
  return {
    id: aid,	// aid 是asyncData函数内的数据
    					// id 是把 aid 的值带出去
  }
}

注意:
	当我们只有一个请求的使用,也要写 []
	例:
  let [res1] = await Promise.all([
        app.$http.getA(),
  ])

注意:
如果使用 setTimeout 来控制页面的延时显示,千万不要使用 v-if 来控制。

nuxt 项目去掉页面源代码 window.NUXT

之前在网上看到很多大佬说 屏蔽 掉3行代码可以达到效果,不过会出现一些问题,像 store 。。。。
通过摸索,我发现 **屏蔽 **这一行代码也可以达成去掉页面源代码 xindow._ NUXT_ 的效果,可能项目功能比较小,因此并未发现项目出现问题。
node_modules/@nuxt/vue-renderer/dist/vue-renderer.js
搜索:${serializedSession}

**这个文件必须是在服务器上的文件
**
后续持续观察,如发现问题,立即更新。。。
在这里插入图片描述

路由

nuxt 的路由是框架自动生成的,相关规则(官网传送门

路由跳转方式

方式一:使用标签跳转

<nuxt-link to="/index">首页</nuxt-link>

方式二:使用 js 进行跳转

1. 
// 在 asyncData 方法内跳转,这个方法是在页面没有挂载之前就调用的,所以不存在 this,但它的参数是有可以使用的,它的第一个参数就表示页面上下文
asyncData({app}) // 这里是结构出 app 这个变量出来,这里的 app 就相当于 this

2. 
在一般方法页面跳转的方式和vue是一样的

注意

1、根目录使用 “~” 来表示,如“~/assets/a.png。static 文件夹比较特殊,引用路径为:“/a.png”
2、项目根目录下的 .nuxt 文件夹,当项目重新编译的时候,里面的内容会重新刷新且覆盖
3、在使用变量进行 img(图片) 的 src 绑定时,路径必须使用 require() 函数进行处理,如:require(‘~/static/image/bg.png’)
4、在使用 layout(模板)时,有一个小小需要注意的地方:
在 A 中,使用 layout,在 B 中引入 A,则模板不会编译有,但是直接打开 A 是有的。如果需要在 B 也显示模板,只能在 B 中也设置模板

持续更新中。。。

个人博客 http://www.sharekong.xyz 欢迎访问

  • 11
    点赞
  • 78
    收藏
    觉得还不错? 一键收藏
  • 6
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值