vue项目实践教程2：使用vux设计登录注册，并讲解vue路由，切换页面标题等内容

上一章笔者介绍vux项目的搭建和简介，这里笔者设计几个登录注册页面，来讲解vux中的相关组件的使用，和vue的相关基础知识。

1.我们在与components文件夹同级的目录下创建一个views文件夹，文件夹中再创建一个user文件夹，用于存放和用户相关的页面操作。

在user文件夹下，笔者先创建一个Regist.vue文件。

2.现在注册组件已经有了，但是我们怎么才能让这个组件显示出来呢？我们知道，vue是组件化机制比较明显的一个框架，我们创建的每个vue文件都是一个组件，那我们怎么才能让这个组件显示在页面上呢？其中一种方式，通过路由的形式，连接到这个组件，让组件显示出来。

我们找到src/router目录，该目录下有一个index.js文件，打开该文件，可以看到有import语句，其中HelloWord就是通过import导入进来的，同样，我们将Regist.vue通过import 的形式导入进来。我们将组件导入进来之后，就需要去使用它，那么怎么使用呢？

仔细往下看，有一个routes数组，这个数组中保存的就是各组件的信息。

{
path:'/Regist',
name:'Regist',
component:Regist
}

我们以这样的形式，将注册组件添加到路由中去，path代表的路由路径，也就是你要访问的链接路径，name代表这个路由的名称，你在后续进行路由跳转的时候，可以通过path跳转，也可以通过name进行跳转，component表示引用的哪个组件。

路由注册成功只有，我们就可以通过访问该路由访问到注册组件。

3.既然我们的注册组件已经可以显示出来了，那么我们就要往这个组件中添加内容。

在vue组件中，template标签内的是要显示在页面中的元素节点，该标签内需要包含一个标签，该组件想要表现的内容需要全部放到这个标签中，如果template标签下的字标签出现了两个同极标签，编译会报错。

script中主要保存一些数据，和写一些逻辑。

style中用于写页面样式，如果我们想要让我们写的样式只针对本组件产生效果，我们需要在style里添加scoped。

<style scoped lang="less">

由于我们的vue组件最终会打包成一个文件，我们在一个组件内的写的样式有可能会对其他组件产生影响，当然，我们也可以不用加那个字段，那就需要人为可以的防止产生样式冲突。

如果我们用less或者sass编写css，就需要通过lang=”“的方式来声明。在vux项目中，已经通过webpack对less和sass进行了引入声明，因此，我们直接使用就可以。

下面看一下注册的部分代码：

<template>
<div class="regist">
<group>
<x-input title="" name="mobile" placeholder="请输入手机号" v-model="mobile" keyboard="number" is-type="china-mobile" required></x-input>
<x-input title="" type="text" placeholder="请输入验证码" v-model="code" required>
<x-button slot="right" type="primary" mini :disabled="getCode.disabled" @click.native="handleGetCode" style="width: 100px;">{{getCode.txt}}</x-button>
</x-input>
<x-input title="" type="password" placeholder="请设置登录密码" v-model="password" :min="6" :max="16" required></x-input>
<x-input title="" type="password" placeholder="确认密码" v-model="passwordC" :min="6" :max="16" required></x-input>
</group>
<p><span>注册后，您的微信账号和手机号都可以登录</span></p>
<box gap="10px 25px">
<x-button type="primary" @click.native="handleRegist">注册</x-button>
</box>
<p>
<router-link to="/Login">已有账号？去登录</router-link>
</p>
</div>
</template>

<script>
import { XInput, Box, Group, XButton } from 'vux'

export default {
name: 'regist',
data() {
return {
mobile: '', //手机号
code: '', //验证码
password: '', //密码
passwordC: '', //确认密码
getCode: {
txt: '获取验证码',
disabled: false,
}
}
},
methods: {
handleGetCode() {
if(this.mobile) {
this.getCode.disabled = true;
this.getCode.txt = '获取中...';
let seconds = 60;
let self = this;
let time = setInterval(function() {
--seconds;
self.getCode.txt = seconds + 's';
if(seconds <= 0) {
clearInterval(time);
self.getCode.disabled = false;
self.getCode.txt = '获取验证码';
}
}, 1000)
} else {
this.$vux.toast.text('请先填写手机号');
}
},
handleRegist() {
if(!this.mobile || !this.code || !this.password || !this.passwordC) {
this.$vux.toast.text('您有未填项，不能注册')
} else if(this.password != this.passwordC) {
this.$vux.toast.text('两次输入的密码不一致')
} else {
this.$vux.toast.text('注册成功')
}
}
},
created() {
window.document.title = '注册';
},
components: {
XInput,
XButton,
Group,
Box
}
}
</script>

在这里我们用到了vuxUI框架中的XInput，Box， Group, XButton组件，因此，我们需要把他们按需引入进来，引入进来后，需要在components中声明一下，这样才能正常使用相关组件。

对于各个组件的使用，我这里不做过多讲解，同志们可以直接去查看相关技术文档，那里比我这里讲的要详细。

这里需要声明一点，对于XButton按钮的点击事件，我们需要使用@click.native的形式声明。

有读者可能会问，this.$vux.toast.text()是怎么回事，这里调用了vux中的Toast组件，但是我们为什么没有导入声明呢？其实已经导入了，但是不是在这里，而是在main.js 中。

我们打开main.js，加入下面的内容：

import  { ToastPlugin, LoadingPlugin } from 'vux'

Vue.use(ToastPlugin)
Vue.use(LoadingPlugin)

我们以插件的形式引入了Toast相关内容，并且通过Vue.use()的形式去声明使用。

上述代码中，data()中的内容主要用于保存数据，这里面返回的数据可以绑定到页面标签内，从而实现页面数据的展示。

methods中主要是写一些逻辑方法，比如上述中的按钮点击事件方法，方法的编写形式，如果刚入门可以按照平时js中函数的编写形式写就行。如果想操作data()中的数据，可以通过“this.变量”的形式拿到数据，然后进行操作。

create()中的内容是干什么的呢？这里是当该vue组件被创建的时候调用的内容，这里涉及到vue声明周期的相关的内容，感兴趣的读者可以直接去官网，或者搜索相关资料了解。

因为我们操作的都是组件，不像那些一个个html我们可以直接写title,所以，如果我们想让每个组件显示不同的标题该怎么办？

通过 window.document.title = ‘注册’ 的形式就可以。该直接放在script标签内也可以，但是最好放在create()内，保证每次组件创建都会修改标题内容。

好，我们看一下页面的表现效果。



同样我们可以将登录组件编写出来，那么这两个组件之间怎么进行跳转呢？答案见上述代码，有这么一句话：

<router-link to="/Login">已有账号？去登录</router-link>

如果我们想要通过点击页面某个元素然后进行跳转，可以通过上述router-link的形式，to表示的是你要跳转的路由组件，我们可以以路经的形式，也可以直接通过路由名称进行跳转，另外to的内容也可以这样写：

:to="{path:'/Login'}"

同样可以达到效果。

那么，如果我们想要通过js来实现路由跳转，该怎么办呢？在点击事件中通过如下方式来实现路由跳转。

this.$router.push({
path:'/Login'
})

好，如果还有不明白的读者，可以直接访问项目地址，查看源码。

vue零售商城项目源码