初始化创建项目
yarn create nuxt-app <项目名>
css预编译
安装 yarn add node-sass scss-loader sass-loader --save-dev
路由管理
在nuxt中路由已经被集成到框架中,所以不需要再单独引入配置,而且当页面文件创建后, router会生成响应的路由,路由文件在.nuxt/router.js文件,用法上基本不变, 与vue-router用法不同部分记录如下
跳转与传参
- nuxt路由跳转同样是分为两种方式(声明式和编程式),不同的是在nuxt中用跳转标签nuxt-link而不是router-link
- 传参demo如下
1 <nuxt-link :to="{name:'home',params:{newsId:3306}}">home1</nuxt-link> 2 接收参数 3 asyncData({ params }) { 4 console.log('home1', params); 5 }, 6 <nuxt-link :to="{path:'home',query:{newsId:3306}}">home2</nuxt-link> 7 接收参数 8 asyncData({ query }) { 9 console.log('home2', query); 10 }
页面切换动效
路由动效分为全局动效和单独页面动效
- 创建动效文件,在asset文件下创建动效样式文件(这里定义文件名changePage.css)
- 定义动画效果,这里定义简单的淡入淡出效果
// 页面默认的页面切换类名为page-enter、page-enter-active、page-leave-active .page-enter-active, .page-leave-active { transition: opacity 1s; } .page-enter, .page-leave-active { opacity: 0; }
引入定义的动效文件,在nuxt.config.js文件中配置中引入该css文件
定义单独页面动效
- 在页面文件中定义样式类名
1 export default { 2 transition: 'home' 3 }
在css文件中定义动画效果
.home-enter-active, .home-leave-active { transition: all 2s; font-size: 12px; } .home-enter, .home-leave-active { opacity: 0; font-size: 40px; }
嵌套路由
开发业务中,有