SPA项目搭建及嵌套路由

目录

上期与大家分享了什么是SPA（单页Web应用），今天来给大家分享如何使用vue-cli搭建一个SPA项目。

一、SPA项目搭建

1. 什么是vue-cli?

2、安装vue-cli

3、使用vue-cli搭建vue项目（跟着步骤一步步来即可）

 二、SPA项目结果介绍

 三、嵌套路由的使用

1、定义路由组件

 2、定义组件与路由的对应关系

3、定义锚点和跳转

 4、运行效果

---

上期与大家分享了什么是SPA（单页Web应用），今天来给大家分享如何使用vue-cli搭建一个SPA项目。

一、SPA项目搭建

前提：搭建好NodeJS环境

1. 什么是vue-cli?

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

   注1：xxx 为自己创建项目的名称
   注2：必须先安装vue,vue-cli，webpack，node等一些必要的环境

2、安装vue-cli

 npm install -g vue-cli
 npm install -g webpack

   注1：安装成功后，会出现如下文件
        D:\initPath
             node-v10.15.3-win-x64
               node_global
                 vue
                 vue.cmd 
                 vue-init
                 vue-init.cmd
                 vue-list
                 vue-list.cmd
   注2：安装完成之后打开命令窗口并输入 vue -V（注意这里是大写的“V”），如果出现相应的版本号，则说明安装成功。

 

3、使用vue-cli搭建vue项目（跟着步骤一步步来即可）

 v-cli下载成功后，输入Hubliderx项目存放路径