mvvm 架构下的单页面 spa web 应用

#### main.js引入格式

import Vue from ‘vue’ import VueRouter from ‘vue-router’ import App from ‘./App’ import MuseUI from ‘muse-ui’ import ‘muse-ui/dist/muse-ui.css’

// 使用路由插件 Vue.use(VueRouter) Vue.use(MuseUI)

// 引入路由配置文件 import routes from ‘./config/routes’

// 使用配置文件规则 const router = new VueRouter({ mode: ‘history’, base: __dirname, routes: routes })

new Vue({ router: router, render: h => h(App) }).$mount(’#app’)

#### 路由配置格式

// 路由规则设置 export default [ { path: ‘/’, component: require(’../page/dynamic/index’) }, { path: ‘/dynamic’, component: require(’../page/dynamic/index’) }, { path: ‘/more’, component: require(’../page/more/index’) }, { path: ‘/device’, component: require(’../page/device/index’) }, { path: ‘/device/control’, component: require(’../page/device/deviceControl/deviceControl’) }, { path: ‘/login’, component: require(’../page/login/login/index’) }, { path: ‘/regist’, component: require(’../page/login/regist/index’) }, { path: ‘/resetCheck’, component: require(’../page/login/resetCheck/index’) }, { path: ‘/resetMail’, component: require(’../page/login/resetMail/index’) } ]

## vue模块部分

#### template 结构

sprite基本结构

<script>
// 引入资源
  import avatar from '../../../assets/images/switch_icon.png'
// 引入模块/控制
  import UINavigation from '../../../components/UINavigation'
  import deviceControlList from './deviceControlList.vue'
  export default {
    name: 'deviceControlList',
	// 外部传入参数
    props: {
      avatar: {
        type: String,
        default: avatar
      },
      items: {
        type: Array,
        default: {}
      }
    },
   // 调用控件
    components: {
      UINavigation,
      deviceControlList
    },
    created: function () {
    },
    beforeDestory: function () {
    },
    methods: {
    // 事件处理回调
      itemClick: function (index) {
        this.$emit('itemClick', String(index))
      }
    }
  }
</script>

vue 基本事件处理

//路由跳转
this.$router.replace({ path: '/regist' })
//点击事件,文本变化事件...传回其引用者
this.$emit('itemDidClick', index, deviceId)