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的内容动态更换一样。

由于自己也是刚刚接触这个，还有很多不是很清楚，这里也没有解释的很清楚。还是要好好做个例子，慢慢摸索前进。