使用vue-cli搭建SPA项目

目录

一、vue-cli构建SPA项目及SPA项目结构介绍

利用vue-cli构建SPA

spa的访问过程：

安装vue-cli

二、SPA完成路由的开发

步骤：

三、嵌套路由

children：[ ]

---

一、vue-cli构建SPA项目及SPA项目结构介绍

利用vue-cli构建SPA

        安装vue-cli命令-npm install (-g、-s、-d)

        -g：js依赖会下载到node_global中

        -s：会被打包（安装到dependencies里面）

        -d：只会在开发环境中被依赖

spa的访问过程：

        （1）访问index.html

        （2）index.html通过main.js中的vue实例管理#app边界，同时指定App.vue模板

        （3）App.vue中包含了图片以及锚点，而锚点与组件的对应关系存在router/index.js中，所以就指向了一个组件

        （4）最终App.vue中就显示了logo图片以及helloworld.vue的内容

   vue-cli是vue.js的脚手架，用于自动生成vue.js+webpack的项目模板，创建命令如下：           

   vue init webpack xxx                    

   注1：xxx 为自己创建项目的名称

   注2：必须先安装vue,vue-cli，webpack，node等一些必要的环境

安装vue-cli

npm install -g vue-cli

npm install webpack -g

 

 

 

 

 更改端口号8080——>8083：

二、SPA完成路由的开发

步骤：

1、引入路由js依赖：main.js中已经完成

2、定义组件：呈现形式是以.vue文件展示

        template标签中定义组件内容

        通过export default指定组件的名字

3、定义路由与组件之间的对应关系

        router/index.js文件中进行定义

4、获取路由对象：main.js中已经完成

5、挂载Vue实例：main.js中已经完成

6、定义锚点：App.vue 使用 router-view

7、触发事件：App.vue 使用 router-link to

Home.vue:

<template>
  <div>
    这是首页内容，展示最新的10篇博客
  div>
template>
 
<script>
  export default {
    name: 'Home',
    data () {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    }
  }
script>
 
<style>
style>

About.vue:

<template>
  <div>
    这是关于本站显示的内容区域，本站的发展史...
  div>
template>
 
<script>
  export default {
    name: 'About',
    data () {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    }
  }
script>
 
<style>
style>

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

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>

运行：

三、嵌套路由

children：[ ]

AboutMe.vue：

<template>
  <div>
    站长 杨总 拥有阿里云公司N年项目经验，带领数百位成员完成了YYY重大项目研发
  div>
template>
 
<script>
  export default {
    name: 'AboutMe',
    data () {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    }
  }
script>
 
<style>
style>

AboutWebSite.vue：

<template>
  <div>
    网站的迭代日志：2020.09.05更新了一个版本，2021.10.06更新了第二版本；
    由于其他原因，网站将不再更新，敬请谅解......
  div>
template>
 
<script>
  export default {
    name: 'AboutWebSite',
    data () {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    }
  }
script>
 
<style>
style>

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

 

 About.vue：

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

运行：

 

 

 

 今日分享结束啦~再见！