nuxt.js笔记

发布时间：2020-07-31 17:09:09 来源：网络阅读：2971 作者：xxxpjgl 栏目：web开发

起步：
1、全局安装vue-cli：npm install vue-cli -g
2、初始化nuxt：vue init nuxt/starter（先进入项目目录文件夹）
3、安装依赖：npm install
4、开发环境启动项目：npm run dev
5、开发完成后打包代码：npm run build
6、启动服务：npm start
一、Nuxt常用配置项
1、配置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.
2、配置全局CSS
在nuxt.config.js里进行操作：

//assets/css/normailze.css
html{
    color:red;
}
//nuxt.config.js
css:['~assets/css/normailze.css'],

PS：~表示nuxt项目根目录

二、Nuxt的路由配置和参数传递
基本路由：
Nuxt根据文件目录结构，自动给我们配置好了路由
所以我们如果需要进行页面跳转，直接在pages目录下，新建对应的页面文件夹，比如about文件夹，然后在下面建立index.vue文件，这样访问 http://localhost:3000/about，
就可以访问到下面的页面了，比如：<nuxt-link to='/about'></<nuxt-link>
路由跳转不要使用a标签，因为这样会有页面的刷新跳转
使用<nuxt-link></<nuxt-link>标签

//index.vue
<template>
  <div>
      <h3>About Index page</h3>
      <ul>
            <li><nuxt-link to="/about">HOME</nuxt-link></li>
        <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>
//news/index.vue
<template>
  <div>
      <h3>News</h3>
       <ul>
        <li>userId:{{$route.params.newsId}}</li>
         <li><nuxt-link :to="{name:'index'}">home</nuxt-link></li>
      </ul>
  </div>
</template>

三、Nuxt的动态路由和参数校验
动态路由：即带参数的路由，模板结构都是一样的，根据参数的不同，显示不同的内容
动态路由命名都以 _xx 为前缀，比如_id.vue，接收使用：$route.params.id来接收参数。
这里的id和动态路由的名称一样

动态参数校验：
进入一个页面，对参数传递的正确性校验是必须的，Nuxt.js也贴心的为我们准备了校验方法validate( )。

//pages/news/_id.vue
export default {
  validate ({ params }) {
    // Must be a number
    return /^\d+$/.test(params.id)
  }
}

我们使用了validate方法，并把params传递进去，然后用正则进行了校验，如果正则返回了true正常进入页面，如果返回false进入404页面( nuxt已经帮我们默认建立好了 )。

四、Nuxt的路由动画效果
样式写在全局样式：normailze.css里面
1、全局路由动画
.page-enter-active,.page-leave-active{ transition:opacity 2s }
.page-enter,.page-leave-active{ opacity:0 }
2、单页路由动画
.test-enter-active, .test-leave-active {
transition: all 2s;
font-size:12px;

}
.test-enter, .test-leave-active {
opacity: 0;
font-size:40px;
}
然后在about/index.vue组件中设置

export default {
transition:'test'
}
这时候在进入about页面就有了页面的切换独特动效了。

五、Nuxt的默认模版和默认布局
目的：复用公共元素，比如网页标题等等

1、默认模板，可以定义包括head在内的一些公用的元素，命名为：app.html，一个完整的html文件
在根目录下创建一个app.html就可以实现默认模板的创建

<!DOCTYPE html>
<html lang="en">
<head>
   {{ HEAD }}
</head>
<body>
    <p>每个页面都会显示这个内容，而且是在pages每个组件内容的上面显示</p>
    {{ APP }}
</body>
</html>

这里的{{ HEAD }}读取的是nuxt.config.js里的head信息，{{APP}} 就是我们写的pages文件夹下的主体页面了，比如about、news等等。需要注意的是HEAD和APP都需要大写，如果小写会报错的。
修改删除app.html文件都需要重启服务

2、默认布局，这里是default.vue，一个vue组件，只可定制template里面的内容
默认布局主要针对于页面的统一布局使用。它在位置根目录下的layouts/default.vue。需要注意的是在默认布局里不要加入头部信息，只是关于<template>标签下的内容统一订制。

<template>
  <div>
    <p>JSPang.com  技术胖的博客</p>
    <nuxt/>
  </div>
</template>

这里的<nuxt/>就相当于我们每个页面的内容，你也可以把一些通用样式放入这个默认布局里，但是个人不建议这样写，会增加页面的复杂程度。
修改后不需要重启服务
总结：要区分默认模版和默认布局的区别，模版可以定制很多头部信息，包括IE版本的判断；布局只能定制<template>里的内容，跟布局有关系。在工作中修改时要看情况来编写代码。
注意：工作中一般都是定义默认布局

六、Nuxt的错误页面和个性meta设置
当用户输入路由错误的时候，我们需要给他一个明确的指引，所以说在应用程序开发中404页面是必不可少的。Nuxt.js支持直接在默认布局文件夹里建立错误页面。
1、建立错误页面
在根目录下的layouts文件夹下建立一个error.vue文件，它相当于一个显示应用错误的组件

<template>
  <div>
      <h3 v-if="error.statusCode==404">404页面不存在</h3>
      <h3 v-else>500服务器错误</h3>
      <ul>
          <li><nuxt-link to="/">HOME</nuxt-link></li>
      </ul>
  </div>
</template>

<script>
export default {
  props:['error'],
}
</script>

代码用v-if进行判断错误类型，需要注意的是这个错误是你需要在<script>里进行声明的，如果不声明程序是找不到error.statusCode的。
注：这里的error和statusCode都是nuxt定义好的

2、个性meta设置
页面的Meta对于SEO的设置非常重要，每个页面都应该有属于自己内容的title和meta设置。直接使用head方法来设置当前页面的头部信息就可以了。
我们先把pages/news/index.vue页面的链接进行修改一下，传入一个title，目的是为了在新闻具体页面进行接收title，形成文章的标题。

//pages/news/index.vue
<li><nuxt-link :to="{name:'news-id',params:{id:123,title:'jspang.com'}}">News-1</nuxt-link></li>
///pages/news/_id.vue
<template>
  <div>
      <h3>News-Content [{{$route.params.id}}]</h3>
      <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,
    }
  },
//独立设置news内容页的head信息
  head(){
      return{
        title:this.title,
        meta:[
          {hid:'description',name:'news',content:'This is news page'}
        ]
      }
    }
}

</script>

注意：为了避免子组件中的meta标签不能正确覆盖父组件中相同的标签而产生重复的现象，建议利用 hid 键为meta标签配一个唯一的标识编号。

七、asyncData异步方法获取数据
在项目中需要在初始化页面前先得到数据，也就是我们常说的异步请求数据

1、普通vue方式异步获取远程数据

<template>
    <div class="">
        <ul>
            <li>姓名：{{info.name}}</li>
            <li>年龄：{{info.age}}</li>
            <li>兴趣：{{info.interest}}</li>
        </ul>
    </div>
</template>

<script>
import axios from 'axios'
export default{
    name:'asyncData',
    data(){
        return {
            name:'hello world',
            info:{}
        }
    },
    created(){
        return axios.get('https://api.myjson.com/bins/1hjiso')
        .then((data)=>{
            console.log(data.data)
            this.info = data.data
        })

    }
}
</script>

2、使用nuxt封装的anyncData方法，直接在data下面书写anyncData方法，不用写在methods里面

<template>
    <div class="">
        <ul>
            <li>姓名：{{info.name}}</li>
            <li>年龄：{{info.age}}</li>
            <li>兴趣：{{info.interest}}</li>
        </ul>
    </div>
</template>

<script>
import axios from 'axios'
export default{
    name:'asyncData',
    data(){
        return {
            name:'hello world',
            info:{}
        }
    },
    asyncData(){
        return axios.get('https://api.myjson.com/bins/8gdmr')
        .then((res)=>{
            console.log(res)
            return {info:res.data}
        })
    }
}
</script>

八、静态资源和打包
1、图片、样式路径均使用~，这种引用方法是不用估计相对路径的，“~”就相当于定位到了项目根目录
2、打包静态HTML并运行
npm run generate，生成dist文件夹，在dist文件夹下使用命令：live-server即可查看打包后的效果

九、博文搬录：
1、快速模板
在已经安装了 vue-cli 的前提下，可以快速创建一个 nuxt 的项目模板
vue init nuxt-community/starter-template MyProject
// 其中 MyProject 是项目文件夹名称，可自定义
通过 npm install（似乎用 yarn install 更顺利）安装依赖之后，可以直接 npm run dev 在开发环境启动项目
默认启动的地址为 http://localhost:3000/，可以在 package.json 中添加以下配置来修改主机端口号

 "config": {
    "nuxt": {
      "host": "0.0.0.0",
      "port": "7788"
    }
  },

开发完成后执行 npm run build 打包代码，最后 npm start 启动服务
2、重要目录
生成的项目目录如下
nuxt.js笔记
大部分文件夹名称都是 nuxt 默认保留的，不可修改
其中比较关键的目录有三个：

components 组件目录：
nuxt.js笔记
一般用来存放非页面级别的组件，如 header、footer 等公共组件
该目录下的组件具有常规 vue 组件的方法和特性，不会被 nuxt.js 扩展特性

layouts 布局目录
nuxt.js笔记
可以修改该目录下的 default.vue 来修改默认布局

<template>
  <div>
    <my-header></my-header>
    <nuxt/>
    <my-footer></my-footer>
  </div>
</template>

其中 <nuxt/> 是必需的，页面的主体内容会显示在这里（类似于根节点的 <router-view/>）
此外还可以在目录下新增 error.vue 作为错误页面，具体的写法可以参考官方文档

3、pages 页面目录
nuxt.js笔记
用于存放页面级别的组件，nuxt 会根据该目录下的页面结构生成路由
比如上图中的页面结构，会生成这样的路由配置：

router: {
  routes: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
      name: 'about',
      path: '/about',
      component: 'pages/about.vue'
    },
    {
      name: 'cla***oom',
      path: '/cla***oom',
      component: 'pages/cla***oom.vue',
      children: [
        {
          path: 'student',
          component: 'pages/cla***oom/student.vue',
          name: 'student'
        },
        { //定义带参数的动态路由，需要创建对应的以下划线作为前缀的 Vue 文件或目录
          path: ':id',
          component: 'pages/cla***oom/_id.vue',
          name: 'cla***oom-id'
        }
      ]
    }
  ]
}

此外，该目录下的 vue 组件还具备一些 Nuxt.js 提供的特殊功能特性
其中 asyncData 方法比较常用，支持异步数据处理
这个方法会在页面组件每次加载之前被调用，然后获取数据并返回给当前组件

asyncData ({ params, error }) {
    return axios.get(`api/posts/${params.id}`)
    .then((res) => {
      return { name: res.data.name}
    })
    .catch((e) => {
      error({ statusCode: 404, message: 'not found' })
    })
  }

asyncData 方法的第一个参数为上下文对象 context，具体属性可以查看这里
由于asyncData方法是在组件初始化前被调用的，所以在方法内是没有办法通过 this 来引用组件的实例对象
4、使用插件
如果项目中还需要引入其他的第三方插件，可以直接在页面中引入，这样在打包的时候，会将插件打包到页面对应的 js 里面
但要是别的页面也引入了同样的插件，就会重复打包。如果没有需要分页打包的需求，这时候可以配置 plugins
以 element-ui 为例，在安装了 element-ui 之后，在 plugins 目录下创建 elementUI.js
nuxt.js笔记
然后在根目录的 nuxt.config.js 中添加配置项 build.vendor 和 plugins

build: {
    vendor: ['~/plugins/elementUI.js']
  },
  plugins: [
    {src: '~/plugins/elementUI.js'},
  ]

这里的 plugins 属性用来配置 vue.js 插件，也就是可以用 Vue.user() 方法的插件
默认只需要 src 属性，另外还可以配置 ***: false，让该文件只在客户端被打包引入
如果是像 axios 这种第三方（不能 use）插件，只需要在 plugins 目录下创建 axios.js

// axios.js

import Vue from 'vue'
import axios from 'axios'

const service = axios.create({
  baseURL: '/api'
})

Vue.prototype.$ajax = axios
export default service

然后在 build.vendor 中添加配置（不需要配置 plugins）

build: {
  vendor: ['~/plugins/axios.js']
}

这样在打包的时候，就会把 axios 打包到 vendor.js 中
5、Vuex 状态树
如果在 store 目录下创建了 index.js，nuxt.js 会根据该目录下的文件创建 Vuex 状态树

// store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import Axios from '~/plugins/axios.js';

Vue.use(Vuex)

const store = () => new Vuex.Store({
  state: {
    author: 'WiseWrong',
    info: ''
  },
  mutations: {
    setInfo (state, val) {
      state.info = val
    }
  },
  actions: {
    loadAboutMeInfo ({commit, state}) {
      return Axios.get(`/about`)
        .then(res => {
          console.log('ajax is success')
          console.log(res.data.info)
          commit('setInfo', res.data.info)
        })
        .catch(err => {
          console.log('error')
        })
    }
  }
})

export default store

// Nuxt.js 内置引用了 vuex 模块，不需要额外安装
上面的代码中，我在 actions 中写了一个 loadAboutMeInfo() 方法，用来请求 /api/about 接口
然后在 about.vue 页面中调用

// about.vue 

<template>
  <section class="container">
    <div>
      <img src="~/assets/about.png" alt="">
    </div>
    <h2>{{$store.state.info}}</h2>
  </section>
</template>

<script>
export default {
  fetch({ store }) {
    return store.dispatch('loadAboutMeInfo')
  },
  name: 'about',
  data () {
    return {}
  }
}
</script>

成果演示：
nuxt.js笔记

向AI问一下细节

nuxt.js笔记

猜你喜欢

最新资讯

相关推荐

相关标签