全局安装create-nuxt-app
npm install create-nuxt-app -g
创建项目名为my-nuxt-demo
create-nuxt-app my-nuxt-demo
- JavaScrip
- Npm
- None
- Axios
- ESLint
- None
- SSR
- Server
- jsconfig.json
- github name
- git
成功后运行
cd .\my-nuxt-demo\
npm run dev
浏览器访问
http://localhost:3000/
实现功能
在pages下创建login.vue 和 register.vue
- login.vue
<template>
<div>
<form class="Container">
<div>用户名:</div>
<input type="text" v-model="name">
<div>密码:</div>
<input type="password" v-model="password">
<div></div>
<button @click="summit">登录</button>
<button @click="jumpTo">注册</button>
<nuxt-link to="/register">注册</nuxt-link>
</form>
</div>
</template>
<script>
export default {
methods: {
jumpTo () {
this.$router.push('/register')
},
summit(){
alert("登录成功!")
}
}
}
</script>
- register.vue
<template>
<div>
<form class="Container">
<div>用户名:</div>
<input type="text" v-model="name">
<div>密码:</div>
<input type="password" v-model="password1">
<div>再次确认密码:</div>
<input type="password" v-model="password2">
<div></div>
<button @click="summit">注册</button>
<button @click="jumpTos">取消</button>
</form>
</div>
</template>
<script>
export default {
methods: {
jumpTos () {
this.$router.push('/login')
},
summit(){
alert("注册成功!")
}
}
}
</script>
在layouts下创建全局样式
default.vue
<template>
<div>
<nuxt />
</div>
</template>
<style>
.Container {
border-radius: 15px;
background-clip: padding-box;
margin: 180px auto;
width: 350px;
padding: 15px 35px 15px 35px;
background: #fff;
border: 1px solid #eaeaea;
box-shadow: 0 0 25px #cac6c6;
}
</style>
注意事项
-
路由
Nuxt.js提供了非常方便的自动路由机制,当它检测到pages目录下的文件发生变更时,会自动更新.muxt\router.js下的路由。这也是我们为什么不用配置路由的原因。 -
跳转页面
Nuxt 提供了两种路由跳转方式
1.1 声明式跳转
如代码中的:<nuxt-link to="/register">注册</nuxt-link>
2.2 编程式跳转
<button @click="jumpTo">注册</button>
methods: {
jumpTos () {
this.$router.push('/login')
}
}
推荐使用nuxt-link,跳转页面,更利于seo收录,使用this.$router.push跳转相同路由存在一些问题。
效果图