首页 > 代码库 > vue-cli 实战

vue-cli 实战

  最近,MVC、MVVM框架越发流行,当然必不可少的,我也趁着最近工作量小,学习了一个多星期的vue.js 2.0版本, 改造了一个购票项目,借此分享下学习心得,希望对一部分人有所帮助,当然,有任何不对的地方还望各路大神指出批评,谢谢啦!

  vue.js是一种流行的mvvm模式的框架,其核心思想是 数据驱动 和 组件化,相比于Angular.js , vue.js提供了更加简洁,更易理解的API, 使我们能够快速上手开发。

1、vue-cli 安装(默认你已有node.js环境)

npm install vue-cli -g

2、创建一个以webpack为模板的项目(一直yes就会有单元测试,eslint代码检查等,我的是默认vue init webpack后,一直enter)--我的根目录为m86xq

vue init webpack
npm install
npm install vuex vue-resource mint-ui --save (本项目用到的依赖,vuex管理应用程序的状态;vue-resource为vue的ajax库,现在推荐使用axios;mint-ui为饿了么的移动端ui框架)
npm install sass-loader node-sass --save-dev (vue文件用到sass,需要的依赖)

3、运行项目

npm run dev

4、浏览器自动打开后可以看到vue.js的界面,则运行成功

5、目录结构(由于项目是我做好了一部分的,所以有些文件是你们没有的,后面会说到)

技术分享

 

src/store目录下的是vuex的文件;

src/sass目录为各个组件的sass样式以及定义的变量,mixins等

router目录为项目路由设置

static/fonts为移动端的字体图标

static/css为页面初始化css(reset.css),我这是通过index.html直接写在head里

data.json是自定义的假数据

6、main.js

import Vue from ‘vue‘
import App from ‘./App‘
import VueResource from ‘vue-resource‘
import router from ‘./router‘
import store from ‘./store‘

import MintUi from ‘mint-ui‘
import ‘mint-ui/lib/style.css‘
import ‘../static/css/font-awesome.min.css‘

Vue.use(MintUi)
Vue.use(VueResource)
/* eslint-disable no-new */
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount(‘#app‘)

a、import为es6的语法,将模块导入进来,在main.js导入的,在全局都能使用

b、外部的一些库,例如mint-ui, vue-resource导入进来后,都需要通过Vue.use()使用

c、创建一个vue实例,挂载路由,数据启动(还不能运行,还要App.vue)

7、router/index.js

import Vue from ‘vue‘
import Router from ‘vue-router‘

Vue.use(Router)
import Index from ‘components/index‘
import Home from ‘components/home‘
import Order from ‘components/order‘
export default new Router({
  routes: [
      {
          path: ‘/index‘,
          component: Index,
          children: [
              {
                path: ‘‘,
                component: Home,
                meta: { hideHeader: true }
              },
              {
                path: ‘order‘,
                component: Order,
                meta: { hideHeader: false }
              }
          ]
      },
      {
          path: ‘/‘,
          redirect: ‘/index‘
      }
  ]
})

 

8、App.vue

<template>
  <div id="app">
      <v-menu></v-menu>
    <router-view></router-view>
  </div>
</template>

<script>
import menu from components/menu
export default {
    components: {
        vMenu: menu
    }
}
</script>
<style lang="scss">
    .menu {
        transition: all 0.2s cubic-bezier(0.55, 0, 0.1, 1);
    }
    .slide-left-enter, .slide-right-leave-active {
       opacity: 0;
       -webkit-transform: translate(30px, 0);
       transform: translate(30px, 0);
    }
    .slide-left-leave-active, .slide-right-enter {
       opacity: 0;
       -webkit-transform: translate(-30px, 0);
       transform: translate(-30px, 0);
    }
</style>

9、index.vue(作为滑动外层)

<template>
  <transition :name="transitionName">
    <router-view class="view"></router-view>
  </transition>
</template>
<script>
export default {
  name: index,
  data () {
    return {
      transitionName: slide-left
    }
  },
  watch: {
    $route: function (to, from) {
      const toDepth = to.path.split(/).length
      const fromDepth = from.path.split(/).length
      this.transitionName = toDepth < fromDepth ? slide-right : slide-left
    }
  }
}
</script>
<style lang="scss" scoped>
  .view{
    transition: all .2s ease;
  }
</style>

10、home.vue

<template>
    <div class="home">
        <mt-header>
          <router-link to="/" slot="left" class="logo"></router-link>
        </mt-header>
        <!-- icon -->
        <ul class="service_layer">
            <li v-for="(item, index) in service_a" :class="item.cln">
                <a :href=‘item.link‘ @click="showIndex(index)">
                    <div class="icon"><img :src="item.imgUrl"></div>
                    <p class="service_txt">{{ item.name }}</p>
                </a>
            </li>
        </ul>
        <!-- 广告 -->
        <div class="adv_layer" :class="{ ‘hide‘: !advStatus }">
            <span class="fa fa-close" @click="advClose"></span>
            <a class="adv_inner" href="http://mall.866xq.com/g_43">
                <img src="http://img.mall.8666.com/wxshop20170213/5ac796e10c.jpg"> 
                <p class="adv_title">
                    <span class="text">情人节尊享——买女士养颜谷花香送58元999大罐甘肃特级玫瑰
                          <small>(小区特供)</small>
                      </span>
                      <span class="adv_btn">马上抢购</span>
                </p>
            </a>
        </div>
        <div class="bar-title">中海誉城</div>
        <div class="residents_layer"> 
          <span class="residents_tit"><i></i>小区已入住&nbsp;6398&nbsp;</span>
          <span class="share_btn">马上邀请邻居入住</span>
      </div>
      <!-- 选择时间与方向 -->
      <div class="line-type">
        <span>时间</span>
        <mt-button type="primary" size="small" :plain="lineDateType != ‘workDay‘" @click.native="lineDateTypeHandle(‘workDay‘)">工作日</mt-button>
        <mt-button type="primary" size="small" :plain="lineDateType != ‘weekend‘" @click.native="lineDateTypeHandle(‘weekend‘)">周末</mt-button>
    </div>
    <div class="line-type">
        <span>方向</span>
        <mt-button type="primary" size="small" :plain="lineDirection !=‘go‘" @click.native="lineDirectionHandle(‘go‘)">出门</mt-button>
        <mt-button type="primary" size="small" :plain="lineDirection !=‘back‘" @click.native="lineDirectionHandle(‘back‘)">回家</mt-button>
    </div>
    <ul class="route-list">
        <li v-for="item in routeList">
            <div class="title">{{ item.title }}</div>

            <div class="content" v-for="con in item.items">
                <div class="route-name">{{ con.name }}</div>
                <div class="route">
                    <span class="beginPoint">{{ con.beginPoint }}</span><span class="endPoint">{{con.endPoint}}</span>
                </div>
                <div class="select-time">
            <mt-button type="primary" size="small" plain  v-for="itemTime in con.time"
                            @click.native="orderTo(con.name, itemTime)"
            >
                {{ itemTime }}
            </mt-button>
              </div>
              <div class="price"><span></span>{{ con.price }}</div>
            </div>
        </li>
    </ul>
    <footer>
        <p>?2016 xq.xxxx.com</p>
        <p>我司诚征PHP程序员,详情联系hr@xxxxx.com.cn</p>
    </footer>
    </div>
</template>
<script>
import { mapGetters } from vuex

export default {
    name: Home,
    data () {
        return {
            service_a: [
                { cln: serviceLi1, link: /#/index, name: 88巴士, imgUrl: http://css.xxxx.com/xq/images/bus_w.png },
                { cln: serviceLi2, link: /#/my/ticket, name: 我的车票, imgUrl: http://css.xxxx.com/xq/images/wodechepiao_w.png },
                { cln: serviceLi3, link: /#/my, name: , imgUrl: http://css.xxxx.com/xq/images/usericon_w.png }
            ],
            routeList: []
        }
    },
    computed: {
        ...mapGetters([advStatus, lineDateType, lineDirection])
    },
    created () {
        this.$http.get(../../static/data.json, {foo: bar}).then(response => {
            response = response.body
            this.routeList = response.routeList
        })
    },
    methods: {
        advClose () {
            this.$store.dispatch(advClose)
        },
        lineDateTypeHandle (value) {
            this.$store.dispatch(lineDateTypeSwitch, value)
        },
        lineDirectionHandle (value) {
            this.$store.dispatch(lineDirectionSwitch, value)
        },
        orderTo (id, time) {
            console.log(id:  + id + time: + time)
            console.log(this.$store.state.order.lineDateType +   + this.$store.state.order.lineDirection)
            this.$router.push({ path: /index/order })
        }
    }
}
</script>
<style lang=‘scss‘ scoped>
@import ‘../sass/home‘;
</style>

 

11、menu.vue

<template>
    <transition :name="transitionName">
          <div class="menu" v-if="isMenu">
              <div class="inner">
                  <a href="" class="avatar">
                      <img :src="user.image">
                      <div class="name">{{ user.name }}</div>
                  </a>
                  <mt-cell title="886巴士" to="/index" is-link v-if="nowRoute!=‘/index‘"><i slot="icon" class=‘fa fa-home‘></i></mt-cell>
          <mt-cell title="我的车票" to="/my/ticket" is-link><i slot="icon" class=‘fa fa-ticket‘></i></mt-cell>
          <mt-cell title="我的优惠券" to="/my/coupons" is-link><i slot="icon" class=‘fa fa-gift‘></i></mt-cell>
          <mt-cell title="个人中心" to="/my" is-link v-if="nowRoute!=‘/my‘"><i slot="icon" class=‘fa fa-gear‘></i></mt-cell>
          <mt-cell title="所有小区" to="/" is-link><i slot="icon" class=‘fa fa-map-signs‘></i></mt-cell>
              </div>
              <div class="spaceMask" @click="menuToggle"></div>
          </div>
      </transition>
</template>
<script>
    export default {
        data () {
            return {
                isMenu: true,
                transitionName: ‘‘,
                user: {
            name: 曾小闲,
            image: http://wx.qlogo.cn/mmopen/C1SzxNakKfYbL3cb4FOlXWv4WZwd3jc7sevqQx4Ku89ibxmGfVGd9ophyu6dhG6jtPzWvj9VDTHP7YxjaToJ8dscB9icx026X8/0,
            phone: 135******80,
            credit: 50
          },
          nowRoute: this.$route.path
            }
        },
        methods: {
            menuToggle () {
                this.isMenu = !this.isMenu
                this.transitionName = this.isMenu ? slide-left : slide-right
            }
        }
    }
</script>
<style lang="scss" scoped>
    @import ‘../sass/menu‘
</style>

12、order.vue

<template>
    <div class="order-wrap">
        <mt-header fixed title="购票">
          <router-link to="/" slot="left">
            <mt-button icon="back">返回</mt-button>
          </router-link>
        </mt-header>
        <div class="overflow-scroll">
            <div class="lineInfo-box">
                <div class="carIndicator">上车点<br>指示图</div>
                <!-- 单个起点/终点info块 -->
                <div class="info-con">
                    <div class="title start">起点:岭南雅筑/中海誉城</div>
                    <ul class="routeDetail">
                        <li><span class="time">07:00</span><span class="routeInfo">[岭南雅筑]正门路边</span></li>
                        <li><span class="time"></span><span class="routeInfo">请在途经点到达时间前候车,仅供参考.)</span></li>
                        <li><span class="time">07:03</span><span class="routeInfo">[金色梦想]中海公寓公交站(靠中海别墅那边)</span></li>
                        <li><span class="time">07:05</span><span class="routeInfo">[中海誉城]洋城一路公交站(南苑扶梯大门对面)</span></li>
                    </ul>
                </div>
                <!-- 单个起点/终点info块 -->
                <div class="info-con">
                    <div class="title end">终点:岭南雅筑/中海誉城</div>
                    <ul class="routeDetail">
                        <li><span class="time">07:00</span><span class="routeInfo">[岭南雅筑]正门路边</span></li>
                        <li><span class="time"></span><span class="routeInfo">请在途经点到达时间前候车,仅供参考.)</span></li>
                        <li><span class="time">07:03</span><span class="routeInfo">[金色梦想]中海公寓公交站(靠中海别墅那边)</span></li>
                        <li><span class="time">07:05</span><span class="routeInfo">[中海誉城]洋城一路公交站(南苑扶梯大门对面)</span></li>
                    </ul>
                </div>
                <ul class="carRules" v-for="item in rules">
                    <li>{{item}}</li>
                </ul>
                <div class="ticket_price">
          <span class="price">¥14.00</span><span class="unit">/座</span>
        </div>
            </div>
            <div class="warning lineInfo-box">

                <p>如有更多疑问请联系<i class="fa fa-phone"></i><a href="tel:137-1936-7437">137-1936-7437</a></p>
                <p>(班车正常情况准点从发车点发车,不接受申请让班车等待乘客,请提前候车。)</p>
            </div>
        </div>
        <footer>
            <div class="rule-confirm">
                <label class="checkbox">

                    <input type="checkbox" v-model="agreement">
                    <i></i>
                    我已阅读
                </label>
                <a class="a_lnk" href="#/index/gtxz">购票退票规则</a>
            </div>
            <mt-button type="primary" size="large" :disabled="buttonDisabled" @click.native="orderPop">购票&nbsp;&nbsp;¥14.00/座</mt-button>
        </footer>
    </div>
</template> 
<script>
import { Indicator } from mint-ui
export default {
    data () {
    return {
      agreement: true,
      popupLoading: false,
      rules: [
          * 占座即需要购票,不设站票,儿童购票票价不变;,
        * 车型、车牌号请购票后到【我的车票】页面查看;,
        * 请提前5分钟候车,认准车牌号上车,并对号入座;,
        * 发车前20分钟不可退票,如因个人原因误车恕不退票;,
        * 如需更改班次请尽早退票或者改签,把座位释放给其他乘客购买;,
        * 严抓逃票,非上车前购票请统一到首页底部补票窗口补票。
      ]
    }
  },
    computed: {
        buttonDisabled: function () {
       return !this.agreement || this.popupLoading
    }
    },
    methods: {
        orderPop () {
            Indicator.open({
                spinnerType: fading-circle
            })
        }
    }
}
</script>
<style lang="scss" scoped>
@import ‘../sass/order‘;
</style>

13、vuex的使用

目录结构:

技术分享

index.js为集中所有状态导出去,其中state为数据源,getters为过滤数据源(相当于vue里边的computed),mutations为定义的方法,actions为提交mutations的方法(即调用mutations里的函数)

import Vue from ‘vue‘
import Vuex from ‘vuex‘

import getters from ‘./getters‘
import mutations from ‘./mutations‘
import actions from ‘./actions‘

import adv from ‘./modules/adv‘
import order from ‘./modules/order‘

Vue.use(Vuex)

export default new Vuex.Store({
    modules: {
        adv,
        order
    },
    getters,
    mutations,
    actions
})

mutation-types.js为定义的方法名

export const ADV_CLOSE = ‘ADV_CLOSE‘             // 关闭广告
export const LINE_DATE_TYPE = ‘LINE_DATE_TYPE‘   // 路线时间
export const LINE_DIRECTION = ‘LINE_DIRECTION‘   // 路线方向

 modules/adv.js为广告相关代码

import * as types from ‘../mutation-types‘
const state = {
    adv: {
        data: ‘‘,
        status: true
    }
}

const getters = {
    advStatus: state => state.adv.status
}

const mutations = {
    [types.ADV_CLOSE] (state) {
        state.adv.status = false
    }
}

const actions = {
    advClose ({commit}) {
        commit(types.ADV_CLOSE)
    }
}

export default {
    state,
    getters,
    mutations,
    actions
}

modules/order.js为选择车票的相关操作

 

import * as types from ‘../mutation-types‘
const state = {
    lineDateType: ‘workDay‘,
    lineDirection: ‘go‘ //go表示去   back表示回程
}

const getters = {
    lineDateType: state => state.lineDateType,
    lineDirection: state => state.lineDirection
}

const mutations = {
    [types.LINE_DATE_TYPE] (state, value) {
        state.lineDateType = value =http://www.mamicode.com/== ‘workDay‘ ? ‘workDay‘ : ‘weekend‘
    },
    [types.LINE_DIRECTION] (state, value) {
        state.lineDirection = value =http://www.mamicode.com/== ‘go‘ ? ‘go‘ : ‘back‘
    }
}

const actions = {
    lineDateTypeSwitch ({ commit }, value) {
        commit(types.LINE_DATE_TYPE, value)
    },
    lineDirectionSwitch ({ commit }, value) {
        commit(types.LINE_DIRECTION, value)
    }
}

export default {
    state,
    getters,
    mutations,
    actions
}

总结:

  1、主要难点在于vuex状态管理,对于首次运用mvvm的我来说,这是比较难理解的。现在看看其实很简单,就是把一些全局需要用到的,有影响的数据提取到vuex里边集中管理,这样当在a处修改数据时,b处能及时响应更新

  2、由于vue.js是组件化,数据驱动思想,所以在任何时候,需要修改页面内容或者结构时,首先想到的应该是通过操作数据从而达到结构变化的目的。多处用到的可以提取出来作为组件复用

  3、由于这边用到了vue-cli + webpack,所以在写scss时,浏览器兼容问题构建工具来处理

 

  

vue-cli 实战