nuxt.js笔记

技术2022-07-16 72

介绍

基于 Vue.js 的通用应用框架。 SSR 服务端渲染。在服务端生成html发送至客户端特性：异步数据加载、中间件支持、布局支持等。优点：有利于SEO，加载速度快，自动配置路由依赖 node 和 npm npx（npx在NPM版本5.2.0默认安装）

实现原理

初始化项目

$ npx create-nuxt-app <项目名> （Nuxt.js团队创建了脚手架工具 create-nuxt-app） $ npm run dev （http://localhost:3000）

配置ip地址端口号

若端口号冲突，或想运行在本机ip，在package.json中添加config配置

{ "config":{ "nuxt":{ "host":"127.0.0.1", "port":"1818" } } }

重启项目即可

路由

根据目录结构自动生层router.js

标签跳转

<nuxt-link to="/">跳转首页</nuxt-link> <nuxt-link :to="{name: 'news',query:{id:'1'}}">跳转新闻页</nuxt-link> params 传值(id会显示地址栏，其他参数不会显示在地址栏) this.$router.push({ name: 'log-id', params:{ id:12, key:value }) //接受 async asyncData ({ params }) { // params.id 就是我们传进来的值 } // 或者 created () { this.$route.params.xxx } query传值(所有的参数都会显示在地址栏) this.$router.push({ name: 'log-id', query:{ id:12, key:value }) //接收 async asyncData ({app,query }) { // pquery.id 就是我们传进来的值 } // 或者 created () { this.$route.query.xxx }

动态路由

动态路由是不同的商品详情对应不同的路由地址，便于搜索引擎收录更多，被搜到的几率更大文件需以 _ 开头 //目录结构：goods文件夹下面动态路由_id文件 --| goods/ -----| _id.vue -----| index.vue //index.vue传参 <nuxt-link :to="{name: 'goods-id', params:{id: 1}}">苹果详情</nuxt-link> <nuxt-link :to=" '/goods/2' ">橘子详情</nuxt-link> //_id.vue接受参数，并校验参数，若参数不合格，将会跳转到404页面 <script> export default { validate({params}){ //params相当于url中的pathname , 而query是路由携带的参数?type=1 return \^\d+$\.test(params.id) } } </script>

嵌套路由

//路由结构：如下users.vue是父路由，其子路由需要放在与他同名的文件夹下users/ pages/ --| users/ -----| _id.vue -----| index.vue --| users.vue

父组件(.vue文件) 内增加用于显示子视图内容

路由切换添加过渡动画

全局动画

在assets文件下新建全局样式文件在 nuxt.config.js 中配置全局common.css module.exports = { css: [ '@assets/common.css' ] } //common.css .page-enter-active, .page-leave-active { transition: opacity .5s; } .page-enter, .page-leave-active { opacity: 0; }

单个页面动画

在全局样式里定义单独的过渡样式，然后在所需组件内transition 属性的值设置为 news //common.css .news-enter-active, .news-leave-active { transition: all .5s; color:red; } .news-enter, .news-leave-active { opacity: 0; color:blue; } //news.vue export default { transition: 'news' }

默认模板和默认布局（优选）

默认模板

在根目录下新建一个app.html 文件 <!DOCTYPE html> <html {{ HTML_ATTRS }}> <head {{ HEAD_ATTRS }}> {{ HEAD }} //nuxt.config.js中配置的head </head> <body {{ BODY_ATTRS }}> //可以在这写一段固定的代码，这样机会在每个页面都显示，例如： <h1>欢迎光临</h1> {{ APP }} //pages中的页面 </body> </html>

默认布局

可通过添加根目录下 layouts/default.vue 文件来扩展应用的默认布局 <template> //在默认布局中可以定义pc网站的头部和底部，这样就会在每个页面中显示 <nuxt/> </template>

自定义布局

在根目录的layouts文件夹下可以定义特殊的布局，例如某个页面需要特殊的头部 // layouts/blog.vue <template> <div> <div>我的博客导航栏在这里</div> <nuxt/> </div> </template> 在所需要的页面中引入自定义的布局 <template>  </template> <script> export default { layout: 'blog' // page component definitions } </script>

自定义错误页面

在layouts文件夹爱下创建 error.vue 文件 layouts/error.vue ，当404 或 500 的时候跳转 <template> <div class="container"> <h1 v-if="error.statusCode === 404">页面不存在</h1> <h1 v-else>应用发生错误异常</h1> <nuxt-link to="/">首页</nuxt-link> </div> </template> <script> export default { props: ['error'], //nuxt自己传递的error对象（包含statusCode） layout: 'blog' // 你可以为错误页面指定自定义的布局 } </script>

基本页面

asyncData 在渲染组件之前异步获取数据，即在服务端获取数据并生成页面如果在mounted中掉接口，则是在组件渲染之后获取到数据，然后通过js渲染在客户端返回一个数据对象给当前组件，可以直接使用，无需再data中定义由于asyncData方法是在组件初始化前被调用的，所以在方法内是没有办法通过 this 来引用组件的实例对象同步调用 async/await axios返回的是promise对象，是异步调用async/await是同步调用，在数据返回成功之后，才会执行后边的操作 <template> <h1 class="red">Hello {{ name }}!</h1> </template> <script> export default { data(){ return { title:this.$route.params.title } }, props:['name'], async asyncData (context) { // 每次组件加载之前调用，可以在这里调接口,设置组件的数据 const { data } = await axios.get('') return { initdata:data } //initdata可以像data重数据一样直接使用 }, async fetch ({ store, params }) { // 在渲染页面前填充应用的状态树（store）数据，与 asyncData 方法类似，不同的是它不会设置组件的数据。 let { data } = await axios.get('http://my-api/stars') store.commit('setStars', data) } head () { // 每个页面单独设置meta，title和content title:this.title, meta:{ content:'描述', name:'', hid:'' //唯一标识，跟原来的一样可以覆盖原来的meta } }, // and more functionality to discover ... } </script> <style> .red { color: red; } </style>

Processed: 0.070, SQL: 9