【移動(dòng)應(yīng)用開發(fā)技術(shù)】web前端教程：Vue項(xiàng)目開發(fā)流程

【移動(dòng)應(yīng)用開發(fā)技術(shù)】web前端教程：Vue項(xiàng)目開發(fā)流程

一、企業(yè)項(xiàng)目開發(fā)流程

產(chǎn)品提需求

交互設(shè)計(jì)出原型設(shè)計(jì)

視覺設(shè)計(jì)出UI設(shè)計(jì)圖

前端開發(fā)出頁面模板

server端存取數(shù)據(jù)庫

驗(yàn)收測(cè)試

二、為什么要使用vue:

/v2/guide/comparison.html

5個(gè)前端，4個(gè)會(huì)vue，1個(gè)會(huì)react，那么你該如何選擇

客戶要求使用vue

...

三、如何選擇腳手架

自己搭建腳手架webpack

使用現(xiàn)成的腳手架

/zh/

vue-cli基于webpack3

@vue/cli基于webpack4

假設(shè)電腦中裝的時(shí)@vue/cli腳手架，但是想用vue-cli的模板，可以如下安裝指令

cnpminstall-g@vue/cli

cnpminstall-g@vue/cli-init

四、創(chuàng)建項(xiàng)目

@vue/cli

第一種創(chuàng)建方式：vuecreatemynewapp

第二種創(chuàng)建方式：vueui

第三種創(chuàng)建法師：vueinitwebpackmyapp

五、開始項(xiàng)目配置

1、如果做的移動(dòng)端，那么需要考慮300ms延時(shí)以及點(diǎn)擊穿透的問題，甚至是部分android手機(jī)不支持promise的解決辦法，在index.html中引入如下代碼，如果做的是pc端，忽略此步驟

//避免移動(dòng)端真機(jī)運(yùn)行雙擊屏幕會(huì)放大

<metaname="viewport"content="width=device-width,initial-scale=1.0,user-scalable=0">

<scriptsrc="/g/component/fastclick/1.0.6/fastclick.js"></script><script>if('addEventListener'indocument){document.addEventListener('DOMContentLoaded',function(){FastClick.attach(document.body);},false);}if(!window.Promise){document.writeln('<scriptsrc="/g/component/es6-promise/3.2.2/es6-promise.min.js"'+'>'+'<'+'/'+'script>');}</script>

2、修改目錄結(jié)構(gòu)

src

api

assets

components

lib

router

store

views

App.vue

main.js

3、修改App.vue結(jié)構(gòu)

cnpminode-sasssass-loader-D

<template>

<div>

<div>

<header>頭部</header>

<div>內(nèi)容</div>

</div>

<footer>底部</footer>

</div>

</template>

<script>

exportdefault{

name:'App'

}

</script>

<style>

@import'~@/lib/reset.scss';

html,body,.container,.detailContent{

@includerect(100%,100%);//width:100%;height:100%;

}

.container,.detailContent{

@includeflexbox();//display:flex

@includeflex-direction(column);//flex-direction:column

.box{

@includeflex();

@includerect(100%,auto);

@includeflexbox();

@includeflex-direction(column);

.header{

@includerect(100%,0.44rem);

@includebackground-color(#f66);

}

.content{

@includeflex();//flex:1;

@includerect(100%,auto);

@includeoverflow(auto);

}

}

.footer{

@includerect(100%,0.5rem);

@includebackground-color(#efefef);

@includeflexbox();

a{

@includeflex();

@includerect(auto,100%);

@includeflexbox();

@includejustify-content();//justify-content:center;

@includealign-items();//align-items:center;

@includetext-color(#333);

&.active{

@includetext-color(#f66);

}

}

}

}

</style>

4、依據(jù)結(jié)構(gòu)設(shè)計(jì)頁面

views/home/index.vue

views/kind/index.vue

views/cart/index.vue

views/user/index.vue

以home為例

<template>

<div>

<header>首頁頭部</header>

<div>首頁內(nèi)容</div>

</div>

</template>

<script>

exportdefault{

}

</script>

<style>

</style>

5、配置路由

router/index.js

importVuefrom'vue'

importRouterfrom'vue-router'

importroutesfrom'./routes'

Vue.use(Router)

exportdefaultnewRouter({

routes

})

router/routes.js命名視圖+命令路由+路由的懶加載+路由重定向

//如果一個(gè)頁面不需要底部，那么就不要傳footer，比如kind無需底部

constroutes=[

{

path:'/',

redirect:'/home'

},

{

path:'/home',

name:'home',

components:{

default:()=>import('@/views/home'),

footer:()=>import('@/components/Footer')

}

},

{

path:'/kind',

name:'kind',

components:{

default:()=>import('@/views/kind'),

footer:()=>import('@/components/Footer')

}

},

{

path:'/cart',

name:'cart',

components:{

default:()=>import('@/views/cart'),

footer:()=>import('@/components/Footer')

}

},

{

path:'/user',

name:'user',

components:{

default:()=>import('@/views/user'),

footer:()=>import('@/components/Footer')

}

}

]

exportdefaultroutes

修改App.vue命名視圖（多視圖路由）defaultfooter

<template>

<div>

<router-view></router-view>

<router-viewname="footer"></router-view>

</div>

</template>

6、底部點(diǎn)擊切換路由

components/Footer.vue,需要在App.vue中修改布局樣式

<template>

<footer>

<ul>

<router-linktag="li"to="/home">

<span></span>

<p>首頁</p>

</router-link>

<router-linktag="li"to="/kind">

<span></span>

<p>分類</p>

</router-link>

<router-linktag="li"to="/cart">

<span></span>

<p>購(gòu)物車</p>

</router-link>

<router-linktag="li"to="/user">

<span></span>

<p>我的</p>

</router-link>

</ul>

</footer>

</template>

<script>

exportdefault{

}

</script>

7、編寫頁面

PC：element-ui

https://element.eleme.io/

iview

/

移動(dòng)端：mint-ui

http://mint-ui.github.io/

vant

https://youzan.github.io/vant/

mint-ui為例

cnpmimint-ui-S

cnpminstallbabel-plugin-component-D

修改.babelrc文件

{

"presets":[

["env",{

"modules":false,

"targets":{

"browsers":[">1%","last2versions","notie<=8"]

}

}],

"stage-2"

],

"plugins":["transform-vue-jsx","transform-runtime",["component",[

{

"libraryName":"mint-ui",

"style":true

}

]]],

"env":{

"test":{

"presets":["env","stage-2"],

"plugins":["transform-vue-jsx","transform-es2015-modules-commonjs","dynamic-import-node"]

}

}

}

7.1main.js入口文件處引入mintui

importVuefrom'vue'

importAppfrom'./App'

importrouterfrom'./router'

importMintUIfrom'mint-ui'

VductionTip=false

Vue.use(MintUI)

7.2封裝了banner.vue和prolist.vue組件

banner.vue組件中使用了UI庫輪播圖默認(rèn)占據(jù)整個(gè)高度，提前設(shè)置好一個(gè)父容器

<template>

<div>

<mt-swipe:auto="4000">

<mt-swipe-item>11</mt-swipe-item>

<mt-swipe-item>22</mt-swipe-item>

<mt-swipe-item>33</mt-swipe-item>

</mt-swipe>

</div>

</template>

<script>

importVuefrom'vue'

import{Swipe,SwipeItem}from'mint-ui'

Vue.use(Swipe,SwipeItem)

exportdefault{

}

</script>

<style>

.banner{

height:150px;

}

</style>

prolist.vue

<template>

<ul>

<li>

肖生客的救贖

</li>

</ul>

</template>

<script>

exportdefault{

}

</script>

home/index.vue中引用組件

<template>

<div>

<header>首頁頭部</header>

<div>

<Banner/>

<Prolist/>

</div>

</div>

</template>

<script>

importBannerfrom'@/components/Banner'

importProlistfrom'@/components/Prolist'

exportdefault{

components:{

Banner,

Prolist

}

}

</script>

<style>

.banner{

height:150px;

}

</style>

8、數(shù)據(jù)請(qǐng)求

cnpmiaxios-S

8.1添加mock數(shù)據(jù)功能開發(fā)前期后端沒有接口時(shí)這樣用

cnpmimockjs-D

api/mock.js

//引入mockjs

constMock=require('mockjs')

constRandom=Mock.Random

constdoubandata=function(){

letarticles=[]

for(leti=0;i<10;i++){

letnewArticleObject={

title:Random.csentence(5,30),

thumbnail_pic_s:Random.dataImage('300x250','mock的圖片'),

author_name:Rame(),

date:Random.date()+''+Random.time()

}

articles.push(newArticleObject)

}

returnarticles

}

//Mock.mock(url,post/get,返回的數(shù)據(jù))；

Mock.mock('/douban','get',doubandata)

api/index.js

importaxiosfrom'axios'

import{Indicator}from'mint-ui'

constbaseUrl=process.env.NODE_ENV==='development'?'':''

console.log(baseUrl)

//添加請(qǐng)求攔截器

erceptors.request.use(function(config){

//在發(fā)送請(qǐng)求之前做些什么

Indicator.open()

returnconfig

},function(error){

//對(duì)請(qǐng)求錯(cuò)誤做些什么

Indicator.close()

returnPromise.reject(error)

})

//添加響應(yīng)攔截器

erceptors.response.use(function(response){

//對(duì)響應(yīng)數(shù)據(jù)做點(diǎn)什么

Indicator.close()

returnresponse

},function(error){

//對(duì)響應(yīng)錯(cuò)誤做點(diǎn)什么

Indicator.close()

returnPromise.reject(error)

})

constapi={

requestGet(url){

returnnewPromise((resolve,reject)=>{

axios.get(baseUrl+url)

.then(data=>resolve(data.data))

.catch(err=>reject(err))

})

},

requestPost(url,params){

returnnewPromise((resolve,reject)=>{

axios.post(baseUrl+url,params)

.then(data=>resolve(data.data))

.catch(err=>reject(err))

})

}

}

exportdefaultapi

main.js處引入mock，項(xiàng)目上線以及由接口時(shí)則刪掉即可

importVuefrom'vue'

importAppfrom'./App'

importrouterfrom'./router'

importMintUIfrom'mint-ui'

import'@/api/mock'

8.2假設(shè)后端已經(jīng)有了接口，但是可能會(huì)存在跨域問題，如果有跨域問題，開發(fā)時(shí)需要使用到反向代理

刪掉main.js出的mock

config/index.js處配置反向代理

proxyTable:{

'/daxun':{

target:'/',

changeOrigin:true,

pathRewrite:{

'^/daxun':''

}

},

},

修改api/index.js的baseUrl地址

constbaseUrl=process.env.NODE_ENV==='development'?'/daxun':''

重啟服務(wù)器，查看效果，預(yù)期一致

9、數(shù)據(jù)處理

本組件內(nèi)部處理data

狀態(tài)管理器處理

data處理方式

home/index.vue

<template>

<div>

<header>首頁頭部</header>

<div>

<Banner/>

<Prolist:prolist="prolist"/>

</div>

</div>

</template>

<script>

importBannerfrom'@/components/Banner'

importProlistfrom'@/components/Prolist'

importapifrom'@/api'

exportdefault{

data(){

return{

bannerdata:[],

prolist:[]

}

},

components:{

Banner,

Prolist

},

mounted(){

api.requestGet('/douban').then(data=>{

console.log(data)

list=data

})

}

}

</script>

<style>

.banner{

height:150px;

}

</style>

prolist.vue

<template>

<ul>

<liv-for="(item,index)ofprolist":key="index">

{{item.title}}

</li>

</ul>

</template>

<script>

exportdefault{

props:{

prolist:Array

}

}

</script>

mock.js修改了模擬地址，以后切換更加簡(jiǎn)單

Mock.mock('/daxun/douban','get',doubandata)

以后切換mock和開發(fā)服務(wù)器只需要添加和刪除main.js中的mock字段即可

10、狀態(tài)管理器

cnpmivuex-S

創(chuàng)建store/index.js,store/home.js,store/kind.js

index.js

importVuefrom'vue'

importVueXfrom'vuex'

importhomefrom'./home'

importkindfrom'./kind'

Vue.use(VueX)

conststore=newVueX.Store({

modules:{

home,

kind

}

})

exportdefaultstore

kind.js

exportdefault{

state:{},

getters:{},

actions:{},

mutations:{}

}

home.js

importapifrom'@/api'

conststore={

state:{

bannerdata:[1,2,3],

prolist:[]

},

getters:{

prolistLength(state){

returnlist.length

}

},

actions:{

getprolist({commit}){//參數(shù)的解構(gòu)賦值context

api.requestGet('/douban')

.then(data=>{

console.log(data)

commit('changeprolist',data)//mit('changeprolist',data)

}).catch(err=>console.log(err))

}

},

mutations:{

changebannerdata(state,data){

state.bannerdata=data

},

changeprolist(state,data){

list=data

}

}

}

exportdefaultstore

home/index.vue通過mapState輔助函數(shù)可以直接獲取狀態(tài)管理器中的值，通過dispatch觸發(fā)異步的actions

<template>

<div>

<header>首頁頭部</header>

<div>

<Banner/>

<Prolist:prolist="prolist"/>

{{bannerdata}}

</div>

</div>

</template>

<script>

importBannerfrom'@/components/Banner'

importProlistfrom'@/components/Prolist'

import{mapState}from'vuex'

exportdefault{

computed:{

...mapState({

bannerdata:(state)=>state.home.bannerdata,

prolist:(state)=>list

})

},

components:{

Banner,

Prolist

},

mounted(){

this.$store.dispatch('getprolist')//dispatch一個(gè)action(異步操作)

}

}

</script>

<style>

.banner{

height:150px;

}

</style>

使用mapActions的等價(jià)寫法

<template>

<div>

<header>首頁頭部</header>

<div>

<Banner/>

<Prolist:prolist="prolist"/>

{{bannerdata}}

</div>

</div>

</template>

<script>

importBannerfrom'@/components/Banner'

importProlistfrom'@/components/Prolist'

import{mapState,mapActions}from'vuex'

exportdefault{

computed:{

...mapState({

bannerdata:(state)=>state.home.bannerdata,

prolist:(state)=>list

})

},

components:{

Banner,

Prolist

},

methods:{

...mapActions(['getprolist'])//生成一個(gè)同名的函數(shù)functiongetprolsit(){this.$store.dispatch('getprolist')}

},

mounted(){

this.getprolist()

}

}

</script>

<style>

.banner{

height:150px;

}

</style>

11、列表進(jìn)入詳情

編寫詳情頁面detail/index.vue,一定要記得修改App.vue中的樣式

<template>

<div>

<div>

<header>詳情頭部</header>

<div>內(nèi)容</div>

</div>

<footer>詳情底部</footer>

</div>

</template>

<script>

exportdefault{

}

</script>

修改routes.js

{

path:'/detail/:id',

name:'detail',

components:{

default:()=>import('@/views/detail')

}

}

聲明式跳轉(zhuǎn)

prolist.vue

<router-linktag="li":to="{name:'detail',params:{id:item.id}}"v-for="(item,index)ofprolist":key="index">

{{item.title}}

</router-link>

編程時(shí)跳轉(zhuǎn)

<liv-for="(item,index)ofprolist":key="index"@click="goDetail(item)">

{{item.title}}

</li>

methods:{

goDetail(item){

//this.$router.push('/detail/'+item.id)

this.$router.push({

name:'detail',

params:{id:item.id}

})

}

}

詳情頁面可以通過

this.$route.params.id

拿到傳遞過來的數(shù)據(jù)

12、頁面切換效果

App.vue使用transition包裹router-view

<template>

<div>

<transitionname="slide">

<router-view></router-view>

</transition>

<router-viewname="footer"></router-view>

</div>

</template>

<script>

exportdefault{

name:'App'

}

</script>

<style>

@import'~@/lib/reset.scss';

html,body,.container{

@includerect(100%,100%);//width:100%;height:100%;

}

.container{

max-width:640px;

margin:0auto;

box-shadow:002px#ccc;

@includeflexbox();//display:flex

@includeflex-direction(column);//flex-direction:column

.box{

@includeflex();

@includerect(100%,auto);

@includeflexbox();

@includeflex-direction(column);

.header{

@includerect(100%,0.44rem);

@includebackground-color(#f66);

}

.content{

@includeflex();//flex:1;

@includerect(100%,auto);

@includeoverflow(auto);

}

}

.footer{

@includerect(100%,0.5rem);

@includebackground-color(#efefef);

ul{

@includerect(100%,100%);

@includeflexbox();

li{

@includeflex();

@includerect(auto,100%);

@includeflexbox();

@includejustify-content();//justify-content:center;

@includealign-items();//align-items:center;

@includetext-color(#333);

&.router-link-exact-active,.router-link-active{

@includetext-color(#f66);

}

}

}

}

}

.slide-enter{

transform:translateX(100%);

}

.slide-enter-active{

transition:all.3s;

}

.slide-enter-to{

transform:translateX(0%);

}

.slide-leave{

transform:translateX(0%);

}

.slide-leave-active{

transition:all0s;

}

.slide-leave-to{

transform:translateX(-100%);

}

</style>

13、下拉刷新以及上拉加載功能

以分類為例

<template>

<div>

<header>分類頭部</header>

<div>

<mt-loadmore:top-method="loadTop":bottom-method="loadBottom":bottom-all-loaded="allLoaded"ref="loadmore">

<ul>

<liv-for="(item,index)ofkindlist":key="item.id">{{item.title}}{{index}}</li>

</ul>

</mt-loadmore>

</div>

</div>

</template>

<script>

importVuefrom'vue'

import{Loadmore}from'mint-ui'

importapifrom'@/api'

Vue.use(Loadmore)

exportdefault{

data(){

return{

kindlist:[],

allLoaded:false,//所有的數(shù)據(jù)是否已經(jīng)加載完畢

pageCode:1//頁碼

}

},

mounted(){//請(qǐng)求一次數(shù)據(jù)

api.requestGet('/douban')

.then(data=>{

this.kindlist=data

})

},

methods:{

loadTop(){//下啦刷新函數(shù)請(qǐng)求了第一頁的數(shù)據(jù)

api.requestGet('/douban')

.then(data=>{

this.kindlist=data//替換數(shù)據(jù)

this.pageCode=1//刷新完畢，頁碼歸1

this.allLoaded=false//刷新完畢，表示可以繼續(xù)加載下一頁

this.$refs.loadmore.onTopLoaded()//更新列表

})

},

loadBottom(){

api.requestGet('/douban?count=20&start='+this.pageCode*20)

.then(data=>{

if(data.length===0){//沒有數(shù)據(jù)的條件

this.allLoaded=true//若數(shù)據(jù)已全部獲取完畢

}

this.pageCode+=1//頁碼加一，下一次請(qǐng)求數(shù)據(jù)時(shí)用

this.kindlist=[...this.kindlist,...data]//組合數(shù)據(jù)

this.$refs.loadmore.onBottomLoaded()//更新列表

})

}

}

}

</script>

<style>

.kindlist{

li{

height:40px;

border-bottom:1pxsolid#ccc;

line-height:40px;

}

}

</style>

如果想要結(jié)合vuex實(shí)現(xiàn)

kind/index.vue

<template>

<div>

<header>分類頭部</header>

<div>

<mt-loadmore:top-method="loadTop":bottom-method="loadBottom":bottom-all-loaded="allLoaded"ref="loadmore">

<ul>

<liv-for="(item,index)ofkindlist":key="item.id">{{item.title}}{{index}}</li>

</ul>

</mt-loadmore>

</div>

</div>

</template>

<script>

importVuefrom'vue'

import{Loadmore}from'mint-ui'

import{mapState}from'vuex'

Vue.use(Loadmore)

exportdefault{

data(){

return{

allLoaded:false,

pageCode:1

}

},

computed:{

...mapState({

kindlist:(state)=>state.kind.kindlist

})

},

mounted(){

this.$store.dispatch('getkindlist')

},

methods:{

loadTop(){

this.$store.dispatch('loadTop').then(()=>{

this.pageCode=1

this.allLoaded=false

this.$refs.loadmore.onTopLoaded()

})

},

loadBottom(){

this.$store.dispatch('loadBottom',{pageCode:this.pageCode}).then(data=>{

if(data.length===0){

this.allLoaded=true

}else{

this.pageCode+=1

}

this.$refs.loadmore.onBottomLoaded()

})

}

}

}

</script>

<style>

.kindlist{

li{

height:40px;

border-bottom:1pxsolid#ccc;

line-height:40px;

}

}

</style>

store/kind.js

importapifrom'@/api'

exportdefault{

state:{

kindlist:[]

},

getters:{},

actions:{

getkindlist({commit}){

api.requestGet('/douban')

.then(data=>{

commit('changekindlist',data)

})

},

loadTop({commit}){

returnnewPromise((resolve,reject)=>{

api.requestGet('/douban')

.then(data=>{

commit('changekindlist',data)

resolve()

})

})

},

loadBottom({commit,state},params){

console.log(params)

returnnewPromise((resolve,reject)=>{

api.requestGet('/douban?count=20&start='+params.pageCode*20)

.then(data=>{

console.log('bottom',data)

constarr=[...state.kindlist,...data]

console.log('arr',arr)

commit('changekindlist',arr)

resolve(data)

})

})

}

},

mutations:{

changekindlist(state,data){

state.kindlist=data

}

}

}

14、回到頂部

components/BackTop.vue

<template>

<span@click="backtop">返回頂部</span>

</template>

<script>

exportdefault{

methods:{

backtop(){

console.log('1')

document.getElementById('content').scrollIntoView()

}

}

}

</script>

<style>

.backtop{

position:fixed;

right:10px;bottom:60px;

}

</style>

使用時(shí)可以給需要的地方添加一個(gè)

<divid="content"></div>

15、購(gòu)物車業(yè)務(wù)邏輯

<template>

<div>

<header>購(gòu)物車頭部</header>

<div>

<inputtype="checkbox"v-model="allChecked"@change="test">

<ul>

<liv-for="(item,index)ofcartlist":key="index">

<inputtype="checkbox"v-model="item.flag"@change="fn(item)"/>

{{}}

<button@click="item.num-=1">-</button>{{item.num}}<button@click="item.num+=1">+</button>￥{{item.price}}小計(jì)：{{item.num*item.price}}

</li>

</ul>

<h2>總數(shù)為：{{totalNum}}</h2>

<h2>總價(jià)為：{{totalprice}}</h2>

</div>

</div>

</template>

<script>

exportdefault{

data(){

return{

allChecked:false,

cartlist:[

{

id:1,

name:'蘋果',

price:4.8,

num:2,

flag:false

},

{

id:2,

name:'香蕉',

price:3,

num:5,

flag:false

},

{

id:3,

name:'榴蓮',

price:29.8,

num:1,

flag:false

}

]

}

},

methods:{

test(){

if(this.allChecked){

this.cartlist.map(item=>{

item.flag=true

})

}else{

this.cartlist.map(item=>{

item.flag=false

})

}

},

fn(item){

if(!item.flag){

this.allChecked=false

}else{

letbool=true

this.cartlist.map(item=>{

if(!item.flag){

bool=false

}

})

this.allChecked=bool

}

}

},

computed:{

totalNum(){

letnum=0

this.cartlist.map(item=>{

item.flag?num+=item.num:num+=0

})

returnnum

},

totalprice(){

letprice=0

this.cartlist.map(item=>{

item.flag?price+=item.num*item.price:price+=0

})

returnprice.toFixed(2)

}

},

watch:{

allChecked(newVal){

}

}

}

</script>

<style>

</style>

16、注冊(cè)功能計(jì)算屬性

<template>

<div>

<header>注冊(cè)</header>

<div>

<mt-fieldplaceholder="請(qǐng)輸入用戶名":state="usernameState"v-model="username"></mt-field>

<mt-fieldplaceholder="請(qǐng)輸入密碼"type="password"v-model="password":state="passwordState"></mt-field>

<mt-fieldplaceholder="驗(yàn)證碼"v-model="code":state="codeState">

<mt-button@click="sendCode":disabled="sendState">{{msg}}</mt-button>

</mt-field>

<mt-button:disabled="disabledtype"@click="register":type="type"size="large">注冊(cè)</mt-button>

</div>

</div>

</template>

<script>

importVuefrom'vue'

import{Field,Button}from'mint-ui'

importapifrom'@/api'

Vue.use(Field,Button)

exportdefault{

data(){

return{

username:,

password:'123456',

msg:'發(fā)送驗(yàn)證碼',

time:10,

sendState:false,

code:'',

adminCode:''

}

},

computed:{

usernameState(){

if(this.username===''){

return''

}elseif(/^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(this.username)){

return'success'

}else{

return'error'

}

},

passwordState(){

if(this.password===''){

return''

}elseif(this.password.length>5){

return'success'

}else{

return'error'

}

},

codeState(){

if(this.code===''){

return''

}elseif(this.code===this.adminCode){

return'success'

}else{

return'error'

}

},

disabledtype(){

if(this.usernameState==='success'&&this.passwordState==='success'&&this.codeState==='success'){

returnfalse

}

},

type(){

if(this.usernameState==='success'&&this.passwordState==='success'&&this.codeState==='success'){

return'primary'

}else{

return'default'

}

}

},

methods:{

getCode(){

api.requestGet('/users/sendCode?tel='+this.username)

.then(data=>{

if(data===0){

console.log('驗(yàn)證碼發(fā)送失敗')

}elseif(data===1){

console.log('手機(jī)號(hào)已經(jīng)注冊(cè)過')

}e