Nuxt.js入门安装及灵活使用

1、 案例入门

1.1、create-nuxt-app 介绍

• Nuxt.js 提供了脚手架工具 create-nuxt-app

• create-nuxt-app 需要使用 npx

• npx 命令为 NPM版本5.2.0默认安装组件

1.2、安装

npx create-nuxt-app project-name

• nuxtjs改善
  

1.3 启动

npm run dev

1.4、访问

http://localhost:3000

2、目录结构

2.1、 目录

目录名称	描述
assets	资源目录，用于存放需要编译的静态资源。例如：LESS、SASS等 默认情况下，Nuxt使用Webpack若干加载器处理目录中的文件
components	vue组件目录，Nuxt.js 不会增强该目录，及不支持SSR
layouts	布局组件目录
pages	页面目录，所有的vue视图，nuxt根据目录结构自动生成对应的路由。
plugins	插件目录
static	静态文件目录，不需要编译的文件
store	vuex目录
nuxt.config.js	nuxt个性化配置文件，内容将覆盖默认
package.json	项目配置文件

1.2、别名

• assets 资源的引用：~ 或 @

  // HTML 标签
  <img src="~assets/13.jpg" style="height:100px;width:100px;" alt="">
  <img src="~/assets/13.jpg" style="height:100px;width:100px;" alt="">
  <img src="@/assets/13.jpg" style="height:100px;width:100px;" alt="">
  
  // CSS
  background-image: url(~assets/13.jpg);
  background-image: url(~/assets/13.jpg);
  background-image: url(@/assets/13.jpg);
  

• static 目录资源的引用：/ 直接引用

  //html标签
  <img src="/12.jpg" style="height:100px;width:100px;" alt="">
  
  //css
  background-image: url(/12.jpg);
  

• 举个栗子吧

<template>
  <div>
    <!-- 引用 assets 目录下经过 webpack 构建处理后的图片 -->
    <img src="~assets/13.jpg" style="height:100px;width:100px;" alt="">

    <!-- 引用 static 目录下的图片 -->
    <img src="/12.jpg" style="height:100px;width:100px;" alt="">

    <!-- css -->
    <div class="img1"></div>
    <div class="img2"></div>
  </div>
</template>

<script>
export default {
     

}
</script>

<style>
  .img1 {
     
    height: 100px;
    width: 100px;
    background-image: url(~assets/13.jpg);
    background-size: 100px 100px;
    display: inline-block;
  }
  .img2 {
     
    height: 100px;
    width: 100px;
    background-image: url(/12.jpg);
    background-size: 100px 100px;
    display: inline-block;
  }
</style>

3、路由

3.1、路由概述

• Nuxt.js 依据 pages 目录结构自动生成 vue-router 模块的路由配置。
• 要在页面之间切换路由，我们建议使用<nuxt-link> 标签。

标签名	描述
<nuxt-link>	nuxt.js中切换路由
<Nuxt />	nuxt.js的路由视图
<router-link>	vue默认切换路由
<router-view/>	vue默认路由视图

3.2、基础路由

• 自动生成基础路由规则

路径	组件位置及其名称	规则
/	pages/index.vue	默认文件 index.vue
/user	pages/user/index.vue	默认文件 index.vue
/user/one	pages/user/one.vue	指定文件

栗子

1：访问路径，由pages目录资源的名称组成（目录名称、文件的名称）
资源位置： ~/pages/user/one.vue
访问路径：http://localhost:3000/user/one
2：每一个目录下，都有一个默认文件 index.vue
资源位置： ~/pages/user/index.vue
访问路径：http://localhost:3000/user

• /user 可以匹配的文件

• pages/user.vue 文件 【优先级高】
• pages/user/index.vue 文件

3.3、动态路由

• 在 Nuxt.js 里面定义带参数的动态路由，需要创建对应的以下划线作为前缀的 Vue 文件 或 目录。

路由中路径匹配	组件位置及其名
/	pages/index.vue
/user/:id	pages/user/_id.vue
/:slug	pages/_slug/index.vue
/:slug/comments	pages/_slug/comments.vue

栗子：获得id值，创建资源 user/_id.vue

<template>
  <div>
    查询详情 {
  {this.$route.params.id}}
  </div>
</template>

<script>
export default {
     
  transition: 'test',
  mounted() {
     
    console.info(this.$route)
  },
}
</script>

<style>

</style>

3.4、动态命名路由

• 路径 /news/123 匹配_id.vue还是_name.vue ？
  

• 我们可以使用<nuxt-link>解决以上问题

  • 通过name 确定组件名称：“xxx-yyy”
  • 通过params 给对应的参数传递值

<nuxt-link :to="{name:'news-id',params:{id:1002}}">第2</nuxt-link>
<nuxt-link :to="{name:'news-name',params:{name:1003}}">第3</nuxt-link>

3.5、默认路由

路径	组件位置及其名称
不匹配的路径	pages/_.vue

3.6、嵌套路由

• 创建嵌套子路由，你需要添加一个 父组件Vue 文件，同时添加一个与该文件同名的目录用来存放子视图组件。

  • 要求：父组件 使用<nuxt-child/> 显示子视图内容

pages/
--| book/						//同名文件夹
-----| _id.vue
-----| index.vue
--| book.vue					//父组件

1. 编写父组件 pages/child/book.vue

<template>
  <div>
      <nuxt-link to="/child/book/list">书籍列表</nuxt-link> |
      <nuxt