nuxt简介

概念

Nuxt.js 是一个基于 Vue.js 的通用应用框架。

通过对客户端/服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的 UI渲染。SSR服务器

SSR在服务端将vue渲染成html返回给浏览器。

优点：

• 基于 Vue.js
• 自动代码分层
• 服务端渲染
• 强大的路由功能，支持异步数据
• 静态文件服务
• ES6/ES7 语法支持
• 打包和压缩 JS 和 CSS
• HTML头部标签管理
• 本地开发支持热加载
• 集成ESLint
• 支持各种样式预处理器： SASS、LESS、 Stylus等

安装

npx create-nuxt-app 文件名

运行命令

npm run dev

目录结构

添加路由

• 新建组件

<template>
  <div>
      <h1>登录</h1>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

• 在index.vue中直接引入

<template>
  <div class="container">
    <nuxt-link to="/login">登录</nuxt-link>
  </div>
</template>

<script>
export default {}
</script>

<style>

</style>

在nuxt中，一个文件即是一个路由地址，直接引入即可访问

关于layouts文件夹下的default.vue

default.vue相当于每个页面都会加载的组件，在跳转其它页面时，也会默认加载该组件，在该vue文件内引入的components文件夹下的文件，都会被展示

<template>
  <div>
    <Nuxt />
    <h1>这是固定界面</h1>
    <Logo></Logo>
    <test></test>
  </div>
</template>
<script>
import logo from '../components/Logo'
import test from '../components/test'
export default {
  components:{
    logo
  }
}
</script>
<style>
html {
  font-family:
    'Source Sans Pro',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    'Helvetica Neue',
    Arial,
    sans-serif;
  font-size: 16px;
  word-spacing: 1px;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
}

.button--green {
  display: inline-block;
  border-radius: 4px;
  border: 1px solid #3b8070;
  color: #3b8070;
  text-decoration: none;
  padding: 10px 30px;
}

.button--green:hover {
  color: #fff;
  background-color: #3b8070;
}

.button--grey {
  display: inline-block;
  border-radius: 4px;
  border: 1px solid #35495e;
  color: #35495e;
  text-decoration: none;
  padding: 10px 30px;
  margin-left: 15px;
}

.button--grey:hover {
  color: #fff;
  background-color: #35495e;
}
</style>

运行结果：