vue项目文件解析

一、项目文件

main.js 入口文件：

new Vue ({
  el:'#app',        //挂载到<div id="app"></div>上
  router,           //2、用router简写router：router, 1、import router from './router' 先引入router变量，路由：网址URL不同，返回内容不同
  components:{App}, //简写{App:App}, import App from './App'    App.vue文件
  template:'<App/>' //
})

App.vue 单文件组件

<template>
  <div id="app">
    <router-view/>        //展示当前路由当前内容
  </div>
</template>

router/index.js 配置

export default new Router({
  routes:[
    path:'/',               //当访问跟路径时，组件是HelloWorld
    name:'HelloWorld', 
    components:HelloWorld //import HelloWorld from '@/compontents/HelloWorld',没有{}
  ]
})

HelloWorld.vue 单文件组件

页面展示的内容，vue.js官网首页

二、做自己的项目，展示内容不同，新建组件，配置路由

删除components下面的HelloWorld.vue文件

展示首页内容

（1）新建pages-->Home.vue

<template>
  <div>这是首页</div>
</template>
<script>
export default{
  name:'Home'
}
</scripy>
<style>
</style>

（2）修改router配置下的index.js文件

import HelloWorld from '@/compontents/HelloWorld' 改成 import Home from '@/pages/Home'

routes:[{
  path:'/',
  name:'Home', //路由项名称
  components:  Home// 组件
}]

（3）访问时页面展示Home组件内容，这是首页

访问其他页面

（1）继续修改router配置下的index.js文件，routes数组增加

import List from '@/pages/List'

{
  path:'/list',
  name:'List',
  compontents:List
}

（2）新建pages-->List.vue

（3）访问时显示当前组件List内容