src包:
入口文件 :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' ------->当前路径下,文件名为App的文件
import router from './router'
import './assets/styles/reset.css'
// 路由:根据网址不同,返回不同的页面。
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',----->指的是index.html中div的id,而App.vue中template的div的挂载点是app,最后生成的模板会替换index.html中的div
router: router, ----->引入上面导入的router,还是ES6规则,键值相同时写一次即可
components: { App : App }, ----->声明有哪些组件,ES6的写法,键值相同时,只需要写一次
template: '<App/>' ----->使用哪个组件,将components中的组件渲染出来
})
App.vue:[*.vue:单文件组件]
<template> ----->vue的模板标签
<div id="app">
<router-view/> <!--显示当前路由地址对应的内容-->
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
color: #cccccc;
}
</style>
router包中的index.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/pages/home/Home'
import List from '@/pages/list/List' ----->@即src目录
Vue.use(Router)
export default new Router({ ----->导出路由配置项
routes: [ ----->路由数组
{
path: '/', ----->根路径的组件声明
name: 'home', ----->首页
component: Home
}, {
path: '/list', ----->首页点击链接跳转的路由
name: 'List',
component: List
}
]
})