vue-cli2创建一个基本的nuxt.js

Nuxt.js : vue-cli@2

前提：全局安装过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