搭建SPA项目&&SPA项目中使用路由&&嵌套路由

目录

一、vue-cli建立SPA项目

        1.1 安装vue-cli

        1.2 命令构建SPA项目

        1.3 导入编码器

        1.4 SPA项目运行访问过程

二、SPA项目使用路由

        2.1 定义组件

        2.2 定义组件与路由的关系

        2.3 定义触发事件

        2.4 测试

三、嵌套路由

        3.1 嵌套路由案例

        3.2 实现步骤：

        3.3 结论

---

一、vue-cli建立SPA项目

        1.1 安装vue-cli

                两个下载指令：

                        npm install -g vue-cli

                        npm install webpack -g

第二个指令：

下载好后：

        1.2 命令构建SPA项目

                我们在一个非中文目录的文件夹中运行cmd，

                输入指令：

                vue init webpack spa

脚手架构建完成

项目目录：

        1.3 导入编码器

                接着我们就把我们构建好的项目导入我们的编码器中，Leaf这里用的是前端代码编码器HBuilderX；

然后一定记得要先进入我们的项目，再输入运行指令：npm run dev

运行测试一下我们的项目：

然后我们就会得到一个地址，我们复制下来进行访问；

运行页面：