一、安装和运行
二、页面、导航和路由
1、页面
创建pages目录，在pages目录中创建index.vue
<template> <h1>Hello world!</h1> </template>
启动项目
npm run dev
访问项目：http://localhost:3000/
再在pages目录中创建一个about.vue页面用于后面的测试
<template> <h1>关于我们</h1> </template>
访问页面：http://localhost:3000/about
2、导航
使用<NuxtLink>标签可以在程序中的不同页面之间导航，相当于<a>标签的作用。一般情况下我们使用<NuxtLink>连接程序内部的不同的路由地址，使用<a>标签连接站外地址。
pages/index.vue
<template> <div> <NuxtLink to="/about"> 关于我们 </NuxtLink> <NuxtLink to="/lend"> 我要投资 </NuxtLink> <NuxtLink to="/user"> 用户中心 </NuxtLink> <a href="http://atguigu.com" target="_blank">尚硅谷</a> <h1>Home page</h1> </div> </template>
3、自动路由
在vue项目中我们需要创建页面，并为每一个页面配置路由，而Nuxt会根据pages路径中的页面自动生成路由配置。
- 基本路由1： /user 指向 pages/user.vue页面
<template> <div> <h1>用户中心</h1> </div> </template>
- 基本路由2： /lend 指向 pages/lend/index.vue页面
<template> <div> <h1>投资产品列表</h1> <NuxtLink to="/lend/1"> 产品1 </NuxtLink> <NuxtLink to="/lend/2"> 产品2 </NuxtLink> </div> </template>
- 动态路由：/lend/1、lend/2 等 指向 pages/lend/_id.vue页面，过 this.$route.params.id 获取动态路径
<template> <h1>投资产品 {{ id }}</h1> </template> <script> export default { data() { return { id: null, } }, created() { this.id = this.$route.params.id }, } </script>
- 嵌套路由：如果 pages/user.vue 和 pages/user/index.vue 同时存在，我们可以利用嵌套路由pages/user.vue
<template> <div> <h1>用户中心</h1> <NuxtLink to="/user"> 用户信息 </NuxtLink> <NuxtLink to="/user/account"> 用户账户 </NuxtLink> <!-- user目录下的页面的路由出口 --> <NuxtChild /> </div> </template>
pages/user/index.vue
<template> <h1>用户信息</h1> </template>
pages/user/account.vue
<template> <h1>用户账户</h1> </template>
二、布局Layout
1、默认布局
如果想拥有统一的页面风格，例如：一致的页头和页尾，可以使用Layout，布局文件的默认的名字是default.vue，放在layouts目录中
注意：新创建的layout重启前端服务器后应用
layouts/default.vue
<template> <div> <Nuxt /> <div>default footer</div> </div> </template>
2、自定义布局
也可以自定义Layout：layouts/my.vue
<template> <div> <Nuxt /> <div>my footer</div> </div> </template>
在page中使用layout属性指定布局文件：pages/user.vue
<script> export default { layout: 'my', } </script>
3、重启服务测试
三、配置文件
1、Meta Tags and SEO
我们可以在nuxt.config.js中配置如下内容，Nuxt会自动生成网站的<head>标签，这也是搜索引擎优化的一个必要手段。
module.exports = { head: { title: '尚融宝', meta: [ { charset: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-scale=1' }, { hid: 'meta-key-words', name: 'keywords', content: '尚融宝官网_纽交所上市企业，网络借贷平台，解决个人小额借款、短期借款问题。 资金银行存管，安全保障。', }, { hid: 'description', name: 'description', content: '尚融宝官网_纽交所上市企业，网络借贷平台，解决个人小额借款、短期借款问题。 资金银行存管，安全保障。', }, ], link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }], }, }
注意：/favicon.ico 放在 static 目录下
2、样式
step1：创建 assets/css/main.css
body { background-color: pink; }
step2：在nuxt.config.js中配置样式（和head同级别）
css: [ // CSS file in the project '~/assets/css/main.css', ],
