一篇让你使用vue-cli搭建SPA项目

一.Vue-CLi

Vue CLI 是一个基于 Vue.js 快速开发单页应用的脚手架工具。它提供了一整套构建工具和开发环境，能够帮助开发者快速创建、配置和部署 Vue.js 项目。

Vue CLI 的主要功能包括：

1. 项目初始化：通过命令行工具或可视化界面创建新的 Vue.js 项目，并自动配置好项目结构和基本的开发环境。
2. 开发服务器：提供一个本地开发服务器，在开发过程中支持热重载（Hot Reload）和实时预览。
3. 项目构建：支持将 Vue.js 项目打包成生产环境所需的静态文件，包括优化、压缩、代码分割等功能。
4. 插件系统：可以扩展 Vue CLI 的功能，集成第三方插件或自定义插件。

Vue CLI 非常适合快速搭建和开发 Vue.js 单页应用，它提供了一系列的默认配置，同时也支持定制化配置，满足不同项目的需求。有了 Vue CLI，开发者可以更加专注于业务逻辑的实现，而无需过多关注构建和配置的细节。

二.SAP项目

SPA 项目是指基于单页应用（Single Page Application）的项目。在 SPA 项目中，整个应用的内容都加载在一个单独的页面中，通过前端路由（如 Vue Router 或 React Router）来动态切换不同的视图和组件，而无需重新加载整个页面。

SPA 项目有以下特点：

1. 前后端分离：SPA 项目通常采用前后端分离的架构，前端负责页面的呈现和交互，后端负责数据的提供。前端通过接口与后端进行数据交互，从而实现页面内容的动态更新。
2. 更快的用户体验：由于 SPA 只在初始加载时需要加载所有必要资源，之后的页面切换只需要加载相应的数据，因此用户体验更加流畅，无需频繁重新加载整个页面。
3. 增强的交互性：SPA 通过 JavaScript 动态更新页面内容，可以实现更丰富的交互效果和用户操作，提升用户体验。
4. 前端路由控制：SPA 项目使用前端路由来管理页面之间的切换，通过定义路由规则，响应用户操作并加载对应的组件或视图。

常见的 SPA 框架有 Vue.js 和 React，它们提供了相应的工具和生态系统来帮助开发者搭建和开发 SPA 项目。通过这些框架，开发者可以便捷地构建交互性强、用户体验良好的单页应用。

三.为什么使用vue-cli搭建SPA项目

使用 Vue CLI（Vue Command Line Interface）搭建 SPA（Single Page Application）项目有以下几个主要原因：

1. 快速搭建：Vue CLI 提供了一个命令行界面，可以快速创建和配置一个全功能的 Vue 项目。通过简单的命令，你可以快速生成项目结构和基础配置，省去了手动配置的繁琐过程，让你能够更快地开始开发。
2. 项目结构规范：Vue CLI 遵循了一套官方推荐的项目结构规范，这种规范的项目结构能够提高代码的可读性、可维护性和可扩展性。同时，Vue CLI 还提供了各种插件和预设，帮助你构建现代化的前端项目。
3. 丰富的插件生态系统：Vue CLI 支持各种插件和扩展，你可以根据项目需求选择和安装需要的插件，如路由管理、状态管理、代码检查、单元测试等等。这些插件能够大幅度提升开发效率，简化某些常用功能的集成。
4. 开发工具支持：Vue CLI 集成了开发所需的工具链，包括 webpack、Babel、ESLint 等等。这些工具对于构建、编译和调试应用非常重要，使用 Vue CLI 可以避免手动配置这些工具，减少出错的可能性，提高开发效率。
5. 易于扩展和定制：Vue CLI 支持自定义配置，并提供了丰富的插件系统，你可以根据项目需求进行扩展和定制。这使得你可以灵活地根据项目要求进行定制化开发，并添加自己的工具和功能。

使用 Vue CLI 搭建 SPA 项目可以帮助你快速启动项目，并且享受到 Vue 生态系统的众多优点和工具的支持，提高开发效率，同时也保持项目结构的规范和可维护性。

四. SPA项目的搭建

4.1.检查

Win+R，输入cmd，打开cmd窗口，输出如下命令:

node -v

npm -v

检查环境变量及配置是否已配置完成

如图:

在本人博客中有 node.js 的下载安装和环境搭建  :nodejs下载安装和环境搭建

4.2.安装

环境变量配置无误后，继续安装vue-cli ，输出如下命令:

npm install -g vue-cli

npm install webpack -g

注: 以上两个命令需要分开执行

操作如图 :

安装成功后，会出现如下文件，在node的下载路径的node_global文件中

安装完成之后打开命令窗口并输入 vue -V（注意这里是大写的“V”），如果出现相应的版本号，则说明安装成功。

4.3.构建

使用脚手架vue-cli(2.X版)来构建项目

在开发目录下面打开cmd窗口，输入以下指令继续项目创建 :

vue init webpack spa

注 : 其中 spa 是项目名称，可以自己进行修改项目名称。

创建完后，会有以下9个选择的选项，需要根据我们的需要进行选择。

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

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

   3.Author：作者，填写自己的笔名或者随便写之后直接回车

  4.Vue build：Runtime + Compiler: recommended for most users//运行加编译，官方推荐，就选它

   5.Install vue-router：是否需要vue-router，Y选择使用，这样生成好的项目就会有相关的路由配置文件

  6.Use ESLint to lint your code：是否用ESLint来限制你的代码错误和风格。N  新手就不用了，但实际项目中一般都会使用，这样多人开发也能达到一致的语法

   7.Setup unit tests：是否安装单元测试 选择N

   8.Setup e2e tests with Nightwatch?：是否安装e2e测试  选择N

  9.Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys)，选择Yes, use NPM即可。

操作如图 :

4.4. 启动

项目构建后进行项目启动

首先 cd 加速项目名进入项目路径下

命令 : cd spa

之后再输入命令启动项目:

npm run dev

项目启动成功后，会有一个访问路径，在浏览器中进行访问即可。

操作如图 :

进入以下页面后，说明成功开启:

4.5.导入

在去创建项目的路径中，将项目导入开发软件当中。

导入后了解项目结构 （如图） :

在项目开发过程中，命令窗口不可以关闭，不然就项目关闭，项目启动不了。

将以下命令窗口留在后台即可。

五.路由及嵌套使用

5.1.路由

在项目中找到src文件下的components文件，在该文件下创建两个主键

About.vue

<template>
  <div>
    <div>
    <div>本站格言：做西格玛男人</div>
  </div>
<div>
    <p>永远不掉落女人的陷阱</p>
  </div>
  </div>
</template>
<script>
export default {
  name: 'About',
  data () {
    return {
      msg: '嗨！嗨！嗨！'
    }
  }
}
</script>
<style>
</style>

Home.vue

<template>
  <div>
    <p>言情小说网</p>
    <div>本网站首页内容</div>
  </div>
</template>
<script>
export default {
  name: 'Home',
  data () {
    return {
      msg: '嗨！嗨！嗨！'
    }
  }
}
</script>
<style>
</style>

在项目中找到src文件下的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'
Vue.use(Router)
export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/Home',
      name: 'Home',
      component: Home
    },
    {
      path: '/About',
      name: 'About',
      component: About
    }
  ]
})

在项目中找到src文件下的App.vue中，修改为以下代码

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <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>

在次访问浏览器，效果如图 :

5.2.嵌套

在SPA项目中，路由的嵌套是为了实现页面的层级结构和组件的复用。通过路由的嵌套，可以将页面划分为多个层级，并在每个层级中加载对应的组件或子页面。

以下是一些原因解释为什么需要在SPA项目中使用路由嵌套：

• 页面层级结构：路由的嵌套可以实现页面的层级结构，使得页面之间可以有父子关系。这样可以更好地组织和管理页面，使得用户在使用应用时可以按照层级关系进行导航和操作。
• 组件复用：通过路由的嵌套，可以将一些通用的组件定义在父级路由中，然后在子级路由中使用。这样可以实现组件的复用，减少代码的重复编写，提高开发效率。
• 动态加载：通过路由的嵌套，可以实现按需加载页面和组件。在访问某个子页面时，只需要加载该子页面所需的组件和资源，而不需要加载整个应用的所有内容。这样可以减少初始加载时间，提高页面的加载速度。
• 权限控制：通过路由的嵌套，可以实现对不同层级页面的权限控制。例如，某些页面只有特定的用户或角色才能访问，可以通过路由的嵌套结构和路由守卫来实现权限控制的逻辑。
• 路由的嵌套在SPA项目中是为了实现页面的层级结构、组件的复用、动态加载和权限控制等功能。它可以提高项目的可维护性和开发效率，同时也能够提供更好的用户体验。

在项目中找到src文件下的components文件，在该文件下创建两个主键

AboutMe.vue

<template>
  <div>
    <div>本站格言：做西格玛男人</div>
  </div>
</template>
<script>
export default {
  name: 'AboutMe',
  data () {
    return {
      msg: '嗨！嗨！嗨！'
    }
  }
}
</script>
<style>
</style>

AboutMeaning.vue

<template>
  <div>
    <p>永远不掉落女人的陷阱</p>
  </div>
</template>
<script>
export default {
  name: 'AboutMeaning',
  data () {
    return {
      msg: '嗨！嗨！嗨！'
    }
  }
}
</script>
<style>
</style>

在项目中找到src文件下的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 AboutMeaning from '@/components/AboutMeaning'
Vue.use(Router)
export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/Home',
      name: 'Home',
      component: Home
    },
    {
      path: '/About',
      name: 'About',
      component: About,
      children:[{
      path: '/',
      name: 'AboutMe',
      component: AboutMe
      },{
      path: '/AboutMe',
      name: 'AboutMe',
      component: AboutMe
      },{
      path: '/AboutMeaning',
      name: 'AboutMeaning',
      component: AboutMeaning
      }]
    }
  ]
})

将About.vue修改为以下代码:

<template>
  <div>
    <router-link to="AboutMe">格言</router-link>
    <router-link to="AboutMeaning">意义</router-link>
     <router-view></router-view>
  </div>
</template>
<script>
export default {
  name: 'About',
  data () {
    return {
      msg: '嗨！嗨！嗨！'
    }
  }
}
</script>
<style>
</style>

访问修改如图 :

          好啦今天到这了，希望能帮到你！！！