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 } ] })