一、步骤：
保证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 项目的开发和部署，提供一些默认的最佳实践，同时仍然保持足够的灵活性，使得开发者可以根据项目需求进行定制。
