nuxt.js笔记
起步:
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.csshtml{ color:red;}//nuxt.config.jscss:['~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.vueexport 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 默认保留的,不可修改
其中比较关键的目录有三个:
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.jsimport Vue from 'vue'import axios from 'axios'const service = axios.create({ baseURL: '/api'})Vue.prototype.$ajax = axiosexport default service
然后在 build.vendor 中添加配置(不需要配置 plugins)
build: { vendor: ['~/plugins/axios.js']}
这样在打包的时候,就会把 axios 打包到 vendor.js 中
5、Vuex 状态树
如果在 store 目录下创建了 index.js,nuxt.js 会根据该目录下的文件创建 Vuex 状态树
// store/index.jsimport 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>
成果演示:
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。