1.main.js 程序入口文件,加载各种公共组件
render函数是渲染一个视图,然后提供给el挂载,如果没有render那页面什么都不会出来
接受传入的参数 h 函数,返回 h(App)
import 'babel-polyfill'
import Vue from 'vue'
import App from './App'
import router from './router'
import fastclick from 'fastclick'
import 'common/stylus/index.styl'
fastclick.attach(document.body)
/* eslint-disable no-new */
new Vue({
el: '#app',
render: h => h(App),
router
})
2.App.Vue 页面入口文件
<template>
<div id="app">
<m-header>m-header>
<tab>tab>
<router-view>router-view>
div>
template>
<script type="text/ecmascript-6">
import MHeader from 'components/m-header/m-header.vue'
import Tab from 'components/tab/tab.vue'
export default {
components: {
MHeader,
Tab
}
}
script>
<style scoped="stylus" rel="stylesheet/stylus">
style>
3.router index.js 把准备好路由组件注册到路由里
import Vue from 'vue'
import Router from 'vue-router'
import Recommed from 'components/recommend/recommend'
import Singer from 'components/singer/singer'
import Rank from 'components/rank/rank'
import Search from 'components/search/search'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
component: Recommed
},
{
path: '/recommend',
component: Recommed
},
{
path: '/singer',
component: Singer
},
{
path: '/rank',
component: Rank
},
{
path: '/search',
component: Search
}
]
})
这里用一个组件作为例子
<template>
<div class="search">
搜索
div>
template>
<script type="text/ecmascript-6">
script>
<style lang="stylus" rel="stylesheet/stylus">
style>