Vue 單頁面開發----實戰一 搭建及安裝樣式庫

【一】環境的搭建

         (1)vue 環境的搭建，網上很多，安裝步驟就不多說了。

         (2)搭建項目

先切換到安裝目錄，新建項目：vue init webpack 項目名
先切換到項目目錄，運行項目： npm run dev

安裝過程中按照提示輸入即可，

運行項目後，如果可以看到下面的界面就代表搭建成功。

【二】安裝樣式庫

在這裏安利一個樣式庫：VUE YDUI樣式庫。安裝裏面的npm 安裝即可。樣式庫的問題就解決了。

main.js配置
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import YDUI from 'vue-ydui'   //YDUI
import 'vue-ydui/dist/ydui.rem.css'
import { Confirm, Alert, Toast, Notify, Loading } from 'vue-ydui/dist/lib.rem/dialog'
import router from './router'   //路由

//定義YDUI-五種彈框類型
Vue.prototype.$dialog = {
  confirm: Confirm,
  alert: Alert,
  toast: Toast,
  notify: Notify,
  loading: Loading
};

// YDUI
Vue.use(YDUI);

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

【三】路由配置

(1)先來看一下我的項目目錄：我已經把helloword.vue換成了login.vue了

要搞懂index.html，app.vue  ,helloWord.vue之間的關係。

 一般index.html和app.vue不需要更改的。index.html可以放一些樣式文件及js文件之類的。

真正需要操作的是.vue文件。如下

【四】簡單配置一個路由跳轉的例子

現在有一個場景，打開地址，顯示登錄，登陸成功後，顯示首頁。這裏我們以微信界面爲原型來設計界面。

(1)一個簡單的登錄

按照樣式庫給的簡單寫個登錄頁面。

這裏就不做賬號密碼驗證了，點擊登錄切換路由即可。

路由配置：

// VUE：我，發現，通訊錄，微信
import tabbar from '@/components/tabbar/tabbar'

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

login.vue:
<template>
    <section class="yd-flexview">
      <section class="yd-scrollview">
     <yd-cell-group>
       <form>
        <yd-cell-item>
            <span slot="left">用戶名：</span>
            <yd-input slot="right" :show-success-icon="false" :show-error-icon="false" v-model="personCode" max="20" placeholder="請輸入用戶名"></yd-input>
        </yd-cell-item>
        <yd-cell-item>
            <span slot="left">密碼：</span>
            <yd-input slot="right" type="password" v-model="password" placeholder="請輸入密碼"></yd-input>
        </yd-cell-item>
       </form>
    </yd-cell-group>   
    <yd-button size="large" type="primary" shape="circle" @click.native="getPersonInfo()">立即登錄</yd-button>
      </section>
    </section>
</template>

<script>
export default {
  name: 'login',
  data () {
    return {
      personCode: '',
      password: '',
      loading: false,
      msg: 'HelloWrold.vue'
    }
  },
  methods: {
    getPersonInfo: function() {
      let that = this;
      this.$dialog.loading.open('很快加載好了');
      setTimeout(() => {
        //this.$dialog.loading.close();
        this.$router.push({
          path: '/tabbar'
        })
      }, 3000);
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

(2)配置路由

我的compons目錄文件下有tabbar目錄和login.vue文件，而tabbar目錄下又有五個vue文件。

tabbar.vue是微信的底部導航欄。點擊'微信'，'通訊錄'，'發現'，'我'分別顯示不同的頁面信息。

所有我們的佈局思路就是：底部的tabbara.vue是不變的，切換到哪個頁面時顯示不同的頁面即可。及那四個vue文件相當於tabbar.vue的子組件，替換佈局中的'身體'一樣的意思。

登陸成功後，路由切換到tabbar.vue組件，然後默認顯示me.vue組件的內容，配置redirect即可。

點擊不同的tab切換不同的組件，並且tab高亮顯示。

// VUE：我，發現，通訊錄，微信
import tabbar from '@/components/tabbar/tabbar'
import me from '@/components/tabbar/me'
import discover from '@/components/tabbar/discover'
import communica from '@/components/tabbar/communica'
import weixin from '@/components/tabbar/weixin'


{
      path: '/tabbar',
      name: 'tabbar',
      component: tabbar,
      redirect: 'me',
      children:[
        {
          path: '/me',
          name: 'me',
          component: me
        },
        {
          path: '/discover',
          name: 'discover',
          component: discover
        },
        {
          path: '/communica',
          name: 'communica',
          component: communica
        },
        {
          path: '/weixin',
          name: 'weixin',
          component: weixin
        }
      ]
    }

tabbar.vue: 這裏面的一些寫法需要參照API去理解。可以看出用vue的方式來實現還是簡潔一些的。比jsp簡化了不少代碼。

v-for，@click，v-if的用法等，需要了解

<template>
    <section class="yd-flexview" style="height:100%;">

      <section id="scrollview" class="yd-scrollview">
        <!-- 切換的路由在這裏進行展示 -->
        <router-view></router-view>
      </section>  

      <yd-tabbar slot="tabbar" fixed>
        <yd-tabbar-item v-for="(item, index) in tabbarList" :key="index" :title="item.tabbarName" 
              @click.native="changeTabbar(item.tabbarUrl, item.orderTag)"
              :dot="item.orderTag == 3 ? true : false" 
              :active="item.orderTag == currentTag ? true : false">
            <yd-icon :name="item.tabbarIcon" slot="icon"></yd-icon>
            <yd-badge slot="badge" type="danger" v-if="item.orderTag == 1">999+</yd-badge>
        </yd-tabbar-item>          
      </yd-tabbar>
    </section>
   
</template>

<script>
export default {
  name: 'tabbar',
  data() {
    return {
      currentTag: 4,  //默認展示'我'
      tabbarList:[
        {'tabbarName': '微信', 'tabbarUrl': '/weixin', 'tabbarIcon': 'weixin', orderTag: 1},
        {'tabbarName': '通訊錄', 'tabbarUrl': '/communica', 'tabbarIcon': 'time', orderTag: 2},
        {'tabbarName': '發現', 'tabbarUrl': '/discover', 'tabbarIcon': 'discover', orderTag: 3},
        {'tabbarName': '我', 'tabbarUrl': '/me', 'tabbarIcon': 'ucenter-outline', orderTag: 4}
      ]
    }
  },
  methods: {
    changeTabbar: function(url, orderTag) {
      if (this.currentTag == orderTag) {  //如果已經是當前tab，則不進行路由切換
        return false;
      }
      this.currentTag = orderTag;  //設置選擇的顏色
      this.$router.push({
        path: url
      });
    }
  },
  mounted: function() {
    this.$dialog.loading.close();
  }
}
</script>

實現效果：

                       

 

一個簡單的例子就成功了。下面就是實現與後臺交互，登陸驗證了

我的想法是：由於這是一個單頁面的應用，都是組件之間的切換，相當於jsp的body的內容動態更換一樣。

由於自己也是剛剛接觸這個，還有很多不是很清楚，這裏也沒有解釋的很清楚。還是要好好做個例子，慢慢摸索前進。