今天完成的事：

一、学习vue的目录结构

App.vue是所有组件的入口

index是根目录，会渲染App.vue到页面中

各类插件中，带有dev的文件是开发过程中使用的，在上线时不会打包到服务器

二、npm

npm是node包管理器，它会帮助我们集中管理第三方的node模块

三、看vue基础的项目搭建 

项目目录

dist: 打包的项目目录(打包后会生成)

node_modules: 项目依赖

public: 共用资源

src: 项目目标,书写代码的地方

    -- assets:资源

    -- components:组件

    -- views:视图组件

    -- App.vue:根组件

    -- main.js: 入口js

    -- router.js: 路由文件

    -- store.js: 状态库文件

vue.config.js: 项目配置文件(没有可以自己新建)

四、配置vue路由

main.js 引入路由

app.js 添加各组件

import Login from '@/components/Login'

import Main from '@/components/Main'

router.js中配置，通常情况下是默认的

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

实例化router   router/index.js中

export default new Router({

      routes: [

                      各路径{

                       }

                   ]

}}

定义路由（各跳转路径）

    {

      path: '/',

      name: 'Login',

      component: Login,

      meta:{

        keepalive:false

      }

    },

export default new Router({
 mode: 'history',
 base: process.env.BASE_URL,
 routes: [
    {
     path: '/',
     name: 'login',
     component: () => import('@/components/login.vue')
    },
    {
     path: '/home',
     name: '/home',
     component: () => import('@/components/home.vue'),
     children: [
        {
         path: 'welcome',
         name: 'welcome',
         component: () => import('@/components/home/welcome.vue')
         },
        {
         path: 'Article',
         name:'Article',
         component: () => import('@/components/home/Article.vue')
         }
       ]
     }
  ]

mode:history是模式，使用history模式后点击切换路由页面不会刷新

routes是一个数组，其中放置对应的路径

name可以省略，在使用时使用的是path

compenent这种写法可以懒加载，点击路由后再载入相应的文件

五、main.js中挂载

new Vue({

  el: '#app',

  router，

  render: h => h(App)

})

render函数是渲染一个视图，然后提供给el挂载，如果没有render那页面什么都不会出来

<template>
 <div id="app">
   <router-view/>
 </div>
</template>

在模板中定义路由显示的位置

<router-link to="/home/welcome">欢迎页</router-link>

嵌套路由直接写路径就可以

注意要在最前面加上/

5、根组件的模板里面放上这句话   <router-view></router-view>      

Vue组件使用：

第一步先在components创建vue文件比如：Home

Home文件可以正常写内容就行

然后再script引入组件

<script>
    /*1引入组件 2; 挂载组件3:在模块中使用*/
    import Home from './components/Home';
    import News from './components/News';
 export default {
   data() {
     return {
         msg: 'vue',
     }
     },
     components:{
       'v-home':Home ,/*自定义组件，可以说是一个标签*/
         'v-news':News,
     }
 }
</script>

在components方法里面定义：

'v-home':Home ,/*自定义组件，可以说是一个标签*/

最后就是要在templata里面定义: <v-home><v-home>

<template>
  <!--vue的模块里面 所以的内容要被一个根节点包含起来-->
  <div id="app">    
      <h2>{{msg}}</h2>
      <v-home></v-home>
      <hr>
      <hr>
      <v-news></v-news>
  </div>
</template>