使用

1.npx create-nuxt-app <项目名>

npm run dev
npx作用
如果 create-nuxt-app 没安装会先执行 npm install,再执行 npx create-nuxt-app

目录结构

路由

用法一根组件

<template>
  <div>
    app
    <ul>
      <li><nuxt-link to="/">首页</nuxt-link></li>
      <li><nuxt-link to="/second">第二个</nuxt-link></li>
    </ul>
  <!-- 和vue的 router-view 一样 路由容器 -->
    <Nuxt />
  </div>
</template>

用法二父组件

<template>
  <div class="container">
      父组件
      <!-- 显示子组件容器 -->
      <nuxt-child />
  </div>
</template>

基础路由
假设 pages 的目录结构如下：

pages/
--| user/
-----| index.vue
-----| one.vue
--| index.vue

生成的配置路由配置文件

router: {
  routes: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
      name: 'user',
      path: '/user',
      component: 'pages/user/index.vue'
    },
    {
      name: 'user-one',
      path: '/user/one',
      component: 'pages/user/one.vue'
    }
  ]
}

嵌套路由
你可以通过 vue-router 的子路由创建 Nuxt.js 应用的嵌套路由。

创建内嵌子路由，你需要添加一个 Vue 文件，同时添加一个与该文件同名的目录用来存放子视图组件。
别忘了在父组件(.vue文件) 内增加 <nuxt-child/> 用于显示子视图内容。
假设文件结构如：

pages/
--| users/
-----| _id.vue
-----| index.vue
--| users.vue

生成路由配置文件：

router: {
  routes: [
    {
      path: '/users',
      component: 'pages/users.vue',
      children: [
        {
          path: '',
          component: 'pages/users/index.vue',
          name: 'users'
        },
        {
          path: ':id',
          component: 'pages/users/_id.vue',
          name: 'users-id'
        }
      ]
    }
  ]
}

动态路由
必须加下下划线(文件也可以加下下划线(多级嵌套),文件也可以加下下划线)

pages/
--| detail/
-----| _id.vue
-----| index.vue
--| list.vue

// 编程式导航 this.$router.push("/detail")

获取动态路由的参数

this.$route.params.myid;

路由重定向

可以通过nuxt.config.js配置

// 重定向
  router: {
    middleware: "redirect",//自动会找 middleware目录下的rediect.js文件
    extendRoutes(routes, resolve) {
      routes.push({
        path: "/",
        redirect: "/first"
      })
    }
  }

可以通过中间件实现

export default function({isHMR,app,store,route,params,error,redirect}) {
    // 热更新
    if(isHMR) return

    if(route.fullPath == "/second") {
        return redirect("/second/child")
    }
}

视图

每个组件都可以控制自己的视图模板。
在layouts 创建自己的视图模板，
需要组件属性 layout: "xxxx"

异步数据与资源文件

如果组件不需要异步获取数据，可以写在data属性里面

export default {
    data() {
        return {
            foo: "bar"
        }
    }
}

使用req/res(request/respone)对象

在服务器调用asyncData时，你可以访问用户请求的req和res对象
当页面刷新，服务端执行此函数
从其他页面跳转过来，客户端执行此函数

注意：

我们使用 axios 重构 HTTP 请求, 我们强烈建议您使用我们的 axios 模块用于您的 Nuxt 项目中。

// 在服务器那边执行 返回到前端页面模块
  asyncData({isDev, route, store, env, params, query, req, res, redirect, error}) {
        return axios({
            method:"POST",
            url:"https://xxxx.com/api/common/dict",
            data: {
                type: "ebm_product_freight"
            },
            headers:{

            }
        }).then((res) => {
            console.log(res.data);
            return {
                list: res.data.data // 目的 返回到前端 能够直接使用
            }
        })
    },

服务端没有跨域问题，但是当从客户端点击时，会出现跨域问题，咋样解决呢？
反向代理的配置（重启服务器）

npm i @nuxtjs/proxy --save

 modules: [
    // https://go.nuxtjs.dev/axios
    '@nuxtjs/axios',
    '@nuxtjs/proxy',//添加反向f代理
    // https://go.nuxtjs.dev/pwa
    '@nuxtjs/pwa',
    // https://go.nuxtjs.dev/content
    '@nuxt/content',
  ],

  // Axios module configuration (https://go.nuxtjs.dev/config-axios)
  axios: {
    proxy: true
  },
  proxy: {
    //   如果请求的路径 /ajax 会转发到 http://m.maoyan/com
    "/ajax": {
      target: "http://m.maoyan/com",
      changeOrigin: true
    }
  },

前端跨域请求问题解决了，但是后台服务刷新页面就会报错，咋样解决呢？
通过全局变量
process.server判断服务端渲染还是客户端渲染

<script>
export default {
    layout: "detailtemplate",

  data () {
    return {
      // params: ""
    }
  },
  asyncData({isDev, route, store, env, params, query, req, res, redirect, error}) {
    console.log(params)
    // 根据id获取详情
    return axios({
      url: process.server? "http://m.maoyan.com/ajax/xxxx":"/ajax/xxxx"
    }).then(res => {
      console.log(res.data);
      return {
        data: res.data.data;
      }
    })
    
  },
}
</script>

使用UI框架搭建页面

pugins目录下 element-ui.js

import Vue from 'vue'
import Element from 'element-ui'
import locale from 'element-ui/lib/locale/lang/en'

Vue.use(Element, { locale })

nuxt.config.js配置文件

 // Global CSS (https://go.nuxtjs.dev/config-css)
  css: [
    'element-ui/lib/theme-chalk/index.css'
  ],

  // Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
  plugins: [
    '@/plugins/element-ui'
  ],

  // Auto import components (https://go.nuxtjs.dev/config-components)
  components: true,

 <el-row>
  <el-button>默认按钮</el-button>
  <el-button type="primary">主要按钮</el-button>
  <el-button type="success">成功按钮</el-button>
  <el-button type="info">信息按钮</el-button>
  <el-button type="warning">警告按钮</el-button>
  <el-button type="danger">危险按钮</el-button>
</el-row>