nuxt.js笔记

原创

xxxpjgl 2019-04-16 09:14:57 博主文章分类：vue ©著作权

©著作权归作者所有：来自51CTO博客作者xxxpjgl的原创作品，请联系作者获取转载授权，否则将追究法律责任

起步： 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>
      <h2>About Index page</h2>
      <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>
      <h2>News</h2>
       <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>
      <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的。注：这里的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>
      <h2>News-Content [{{$route.params.id}}]</h2>
      <ul>
        <li><a rel="nofollow" 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 默认保留的，不可修改其中比较关键的目录有三个：

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

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

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

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

3、pages 页面目录用于存放页面级别的组件，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.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>
    {{$store.state.info}}
  </section>
</template>

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

成果演示：