使用Vue-cli构建SPA项目

最新推荐文章于 2024-06-14 10:39:01 发布

theHider

最新推荐文章于 2024-06-14 10:39:01 发布

阅读量45

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/theHider/article/details/131861875

版权

1.SPA项目构建及目录讲解

安装vue-cli

npm install -g vue-cli

出现版本号即安装成功

项目构建

vue init webpack rw_spa

项目运行

npm run dev

在这里插入图片描述

2.SPA项目中的路由跳转

About.vue

<template>
  <div>
  	关于本站的发展历史，更新日志
  </div>
</template>


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


<style>
</style>

Home.vue

<template>
  <div>这是首页，展示网站最新的内容</div>
</template>

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


<style>
</style>

在这里插入图片描述

3.SPA项目中的嵌套路由

About.vue

<template>
  <div>
    <router-link to="/aboutMe">关于站长</router-link>
    <router-link to="/aboutWebSite">关于网站</router-link>
    <router-view/>
  </div>
</template>


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


<style>
</style>

AboutMe.vue

<template>
  <div>关于本站创始人的经验：来自于XXX公司，担任XXX职位，负责过XXX项目</div>
</template>

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

<style>
</style>

AboutWebSite.vue

<template>
  <div>本站致力于xxx事业，目前发展了xxx,将要发展xxx</div>
</template>

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

<style>
</style>

Home.vue

<template>
  <div>这是首页，展示网站最新的内容</div>
</template>

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


<style>
</style>

router/index.js

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 AboutWebSite from '@/components/AboutWebSite'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/home',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: About,
      children:[
        {
        path: '/aboutMe',
        name: 'AboutMe',
        component: AboutMe,
        },
        {
          path: '/aboutWebSite',
          name: 'AboutWebSite',
          component: AboutWebSite
        }
      ]
    }
  ]
})

App.vue

<template>
  <div id="app">
    <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>