vue-cli2创建一个基本的nuxt.js
Nuxt.js : [email protected]
前提:全局安装过vue-cli工具 vue -V 查看安装版本号 若大于2的版本需要进行桥接 桥接方式 见文章最后
初始化一个nuxt 项目 : vue init nuxt/starter<项目名称>
Nuxt.js 页面结构:
修改了package.json文件,需要重启服务
配置nuxt.js IP地址:package.json文件:
配置全局css文件: nuxt.config.js
配置于webpack: nuxt.config.js 文件中 build 对象里
Nuxt路由:
nuxt路由 无需配置router,根据pages文件夹目录下自动检测(比如:在pages下新建一个about目录,创建index.vue,那么/about即是路由地址) 可在 .nuxt 文件夹下router.js文件夹中查看路由配置
<nuxt-link :to="{name:'路由地址',params:{}}"> : 通过nuxt-link标签 :to 进行路由之间的跳转 name无需指定/,params传参
pages/index.vue 传参:
pages/news/index.vue 接收:
动态路由:动态路由 需要 以 _动态路由参数名.vue命名
在pages/news文件目录下 新建 _id.vue 做为动态路由
动态路由传参: name 中指定动态路由 : -动态路由名称
_id.vue 中接收 :$route.params.id
_id.vue路由参数效验:
路由动画效果: 需要使用 nuxt-link 生成的超链接才可以,普通的a标签没有效果
全局动画:
单独动画:(在需要使用单独动画的组件中使用transition:test test指定的是css样式中前面的test)
默认模板和默认布局
相同点:都是为了处理每一个页面都存在的某个部分
不同点:默认模板 可定制 head中的内容,默认布局只能适用于template中的内容
默认模板: 项目根目录下新建app.html 改了模板需要重启服务
默认布局:layouts/default.vue
Nuxt配置404错误界面
layouts 下 建立 error.vue (必须是error.vue)
Nuxt配置个性meta标签设置
在需要单独设置meta标签的vue组件中使用head()方法
Nuxt异步获取数据
代码仓:https://gitee.com/weiZhiXiang1219/nuxtDemo