上一章筆者介紹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零售商城專案原始碼