vue 实验报告8 基于Nuxt.js开发一个Vue程序，实现登录和注册切换

一、步骤：

保证node.js版本在14以上

1. 全局安装create-nuxt-app:

npm install -g create-nuxt-app@2.9.x

2. 创建项目:

create-nuxt-app my-nuxt-demo

选项这么选：

然后输入：

cd my-nuxt-demo

3. 创建登录和注册页面:

在/pages目录下创建login.vue和register.vue文件。

二、代码

（1）login.vue:

<template>

  <div>

    <h2>登录</h2>

    <form @submit.prevent="login">

      <label for="username">用户名：</label>

      <input v-model="username" type="text" id="username" required />

      

      <label for="password">密码：</label>

      <input v-model="password" type="password" id="password" required />

      

      <button type="submit">登录</button>

      <router-link to="/register">去注册</router-link>

    </form>

  </div>

</template>



<script>

export default {

  data() {

    return {

      username: '',

      password: '',

    };

  },

  methods: {

    login() {

      // 实现登录逻辑

      console.log('点击了登录按钮!');

    },

  },

};

</script>

（2）register.vue:

<template>

  <div>

    <h2>注册</h2>

    <form @submit.prevent="register">

      <label for="username">用户名：</label>

      <input v-model="username" type="text" id="username" required />

      

      <label for="password">密码：</label>

      <input v-model="password" type="password" id="password" required />

      

      <label for="confirmPassword">确认密码：</label>

      <input v-model="confirmPassword" type="password" id="confirmPassword" required />

      

      <button type="submit">注册</button>

      <router-link to="/login">取消</router-link>

    </form>

  </div>

</template>



<script>

export default {

  data() {

    return {

      username: '',

      password: '',

      confirmPassword: '',

    };

  },

  methods: {

    register() {

      // 实现注册逻辑

      console.log('点击了注册按钮!');

    },

  },

};

</script>

安装完成后，运行以下命令启动应用：

npm run dev

访问 http://localhost:3000，应该能够看到默认生成的Nuxt.js欢迎页面。

然后通过路由访问创建的登录和注册页面:

http://localhost:3000/login 和 http://localhost:3000/register。

点击去注册，可以实现最基础的跳转：

三、实验总结 

Nuxt.js 是一个基于 Vue.js 的通用应用框架，它提供了一种构建 Vue 应用的高级结构和工具。Nuxt.js 主要用于帮助开发者构建服务器渲染的 Vue.js 应用，同时也提供了一些其他有用的功能。

下面是 Nuxt.js 的一些主要特性和用途：

（1）服务器端渲染 (SSR): Nuxt.js 最显著的特点之一就是支持服务器端渲染。通过使用 Nuxt.js，你可以在服务器端预渲染页面，这有助于提高应用的性能和搜索引擎优化（SEO）。对于一些需要更好首屏加载性能和对搜索引擎友好的项目，SSR 是一个强大的功能。

（2）自动生成路由: Nuxt.js 能够根据项目结构自动生成路由配置，无需手动配置路由，这样可以提高开发效率。

（3）中间件支持: Nuxt.js 支持中间件，这使得在页面渲染之前执行一些逻辑变得更加容易。中间件可以用于处理身份验证、权限检查等操作。

（4）插件系统: Nuxt.js 提供了一个插件系统，允许你通过简单地将插件添加到项目中来扩展其功能。插件可以用于添加第三方库、工具等。

（5）静态站点生成 (SSG): Nuxt.js 除了支持 SSR，还支持生成静态站点。这使得你可以预渲染整个站点并将其部署到静态文件服务器，以提供更快的加载速度。

（6）热加载: Nuxt.js 支持热加载，即在开发模式下，你对代码的修改会立即反映在浏览器中，无需手动刷新。

总体而言，Nuxt.js 旨在简化 Vue.js 项目的开发和部署，提供一些默认的最佳实践，同时仍然保持足够的灵活性，使得开发者可以根据项目需求进行定制。