【Vue】如何搭建SPA项目--详细教程

                                                🎬 艳艳耶✌️：个人主页

                                               🔥 个人专栏 ：《Spring与Mybatis集成整合》《springMvc使用》

                                                ⛺️ 生活的理想，为了不断更新自己 !
 

目录

1.什么是vue-cli

 2.安装

 2.1.创建SPA项目

2.3.一问一答模式答案

 3.运行SPA项目

3.1.导入项目

3.2.运行项目 

4.基于SPA项目完成路由

4.1.案例实操

5.基于SPA项目完成嵌套路由

5.1.案例实操

5.2.效果展示

---

1.什么是vue-cli

      Vue CLI是一个基于Vue.js的官方脚手架工具，用于快速启动、构建和管理Vue.js项目。它提供了一套交互式的命令行界面，可以帮助开发者快速创建一个新的Vue项目，并集成了常用的开发工具和配置，比如代码打包、开发服务器、热重载等等。使用Vue CLI，开发者可以更加高效地进行Vue.js项目开发，节省了配置的时间和精力。同时，Vue CLI还支持插件系统，可以通过插件扩展功能，满足不同项目的需求。总之，Vue CLI是Vue.js开发的必备工具之一。

 2.安装

 2.1.创建SPA项目

           vue init webpack   项目名  

效果如下图：

创建SPA项目，成功之后会出现9个问题，做出回答即可创建完成

2.3.一问一答模式答案

九个问题：

 1.Project name：项目名，默认是输入时的那个名称spa1，直接回车

 2.Project description：项目描述，直接回车

3.Author：作者，随便填或直接回车

4.Vue build：选择题，一般选第一个

        4.1Runtime + Compiler: recommended for most users//运行加编译，官方推荐，就选它了

        4.2Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files  - render functions are required elsewhere//仅运行时，已经有推荐了就选择第一