vue-cli安装与搭建SPA项目

- build 存放构建相关的配置和脚本文件
- src
  - assets：存放静态资源，如图片、字体等
  - components：存放可复用的Vue组件
  - views：存放页面级别的Vue组件
  - router：存放Vue Router的配置文件
  - store：存放Vuex的状态管理文件
  - services：存放与后端API通信的服务文件
  - utils：存放工具函数或辅助类
  - styles：存放全局样式文件
  - App.vue：根组件
  - main.js：入口文件，初始化Vue应用并挂载根组件
- public：存放不需要经过打包处理的静态资源，如index.html
- node_modules 文件夹中包含了项目所需的各种第三方库和模块
- package.json：项目的依赖配置文件
- babel.config.js：Babel的配置文件
- vue.config.js：Vue CLI的配置文件

<template>
  <div> {{msg}}</div>
</template>
<script>
  export default {
    name: 'Home',
    data () {
      return {
        msg: 'Welcome to Your Vue.js Home App'
      }
    }
  }
</script>
<style>
</style>

<template>
    <div>
      关于本站哈哈哈哈哈
    </div>
</template>
<script>
  export default {
    name: 'About',
    data () {
      return {
        msg: 'Welcome to Your Vue.js App About'
      }
    }
  }
</script>
<style>
</style>

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Home from '@/components/Home'
import About from '@/components/About'
Vue.use(Router)
export default new Router({
  routes: [
    {
    path: '/Home',
    name: 'Home',
    component: Home
    },   {
      path: '/Home',
      name: 'Home',
      component: Home
    }, {
      path: '/About',
      name: 'About',
      component: About
    }
  ]
})

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-link to='/Home'>首页</router-link>
    <router-link to='/About'>关于</router-link>
    <router-view/>
  </div>
</template>
<script>
export default {
  name: 'App'
}
</script>
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

<template>
    <div>
     {{msg}}
    </div>
</template>
<script>
  export default {
    name: 'AboutMe',
    data () {
      return {
        msg: '我是站长'
      }
    }
  }
</script>
<style>
</style>

<template>
    <div>
     {{msg}}
    </div>
</template>
<script>
  export default {
    name: 'AboutWeb',
    data () {
      return {
        msg: '本站哈哈哈哈'
      }
    }
  }
</script>
<style>
</style>

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Home from '@/components/Home'
import About from '@/components/About'
import AboutMe from '@/components/AboutMe'
import AboutWeb from '@/components/AboutWeb'
Vue.use(Router)
export default new Router({
  routes: [{
    path: '/Home',
    name: 'Home',
    component: Home
  }, {
    path: '/Home',
    name: 'Home',
    component: Home
  }, {
    path: '/About',
    name: 'About',
    component: About,
    children:[{
      path: '/AboutMe',
      name: 'AboutMe',
      component: AboutMe
    }, {
      path: '/AboutWeb',
      name: 'AboutWeb',
      component: AboutWeb
    }]
  }]
})

<template>
    <div>
      <router-link to='/AboutMe'>关于我</router-link>
      <router-link to='/AboutWeb'>关于本站</router-link>
      <router-view></router-view>
    </div>
</template>
<script>
  export default {
    name: 'About',
    data () {
      return {
        msg: 'Welcome to Your Vue.js App About'
      }
    }
  }
</script>
<style>
</style>