创建项目

yarn create nuxt-app <project-name>

---

引入第三方UI

以 Element UI 为例

yarn add element-ui -S

在 plugins / element-ui.js

import Vue from "vue"
import Element from "element-ui"
Vue.use(Element)

配置 nuxt.config.js

plugin:[
    "@/plugins/elemen-ui.js"
],
css:[
    "element-ui/lib/theme-chalk/index.css"
]

---

静态路由与动态路由

静态路由

在 page 文件中创建的目录结构默认为静态路由的路径

动态路由

使用 下划线 + 名称 创建的文件为动态路由；例如 ：_id.vue

获取动态路由的参数

<template>
    <div>{{id}}</div>
</template>
<script>
export default {
    // nuxt的生命周期
    asyncData({params}){
        const id = params.id;
        return {id}
    }
}
</script>

---

布局

在 layouts 文件中创建 default.vue 和 error.vue 分别用于默认的布局和异常页面跳转的布局页面

创建 default.vue

<template>
    <div>
        <header>头部模块</header>
        <main> <Nuxt/> </main>
        <footer>尾部模块</footer>
    </div>
</template>

使用 <Nuxt/> 模块嵌套 page 中的页面

自定义布局文件

在 layouts 中创建 new_layout.vue 文件

在 pages 文件中 index.vue 中配置

<script>
export default {
    layout:"new_layout"
}
</script>

---

配置 axios 和开发环境的代理

在 nuxt.config.js 文件中

axios:{
    base:'http://xxx.xxx'
},
proxy:{
    "/api/":{
        target:"http://xxx.xxx"
    }
}
​