使用vue-cli搭建SPA项目

目录

引言

什么是SPA？

Vue CLI 是什么？

步骤1：安装 Vue CLI

为什么选择 Vue CLI 作为项目搭建工具

 安装vue-cli

步骤2：创建新的 Vue 项目

创建成功后的项目结构

步骤3：项目结构概述

vue项目结构说明

步骤4：开发SPA页面

SPA项目中套嵌路由

---

引言

什么是SPA？

单页应用（SPA）是一种Web应用程序或网站的设计模式，与传统的多页应用程序（MPA）相对。SPA的核心概念如下：

1. 单页面：SPA通常由单个HTML页面组成，用户在浏览应用时不需要加载多个不同的页面。相反，内容的更新和切换是通过JavaScript动态加载和渲染实现的。

2. 动态加载：在SPA中，页面的内容和数据是根据用户的交互和导航动态加载的，而不是在初始加载时一次性获取。这可以提高页面加载速度，因为只有需要的内容会被获取和显示。

3. 路由：SPA使用客户端路由器（通常是前端路由库或框架，如Vue Router或React Router）来管理URL和页面之间的映射关系。这使得在不刷新整个页面的情况下可以更改URL，从而实现导航和页面切换。

4. Ajax和API：SPA使用Ajax技术（异步JavaScript和XML）或更现代的API请求来从服务器获取数据，通常以JSON格式。这允许应用程序与后端服务器进行实时通信，而不必刷新整个页面。

5. 快速响应：由于SPA的内容是动态加载的，用户体验通常更加流畅和快速。只有在需要时才会加载新内容，而不是等待整个页面重新加载。

6. 前端框架和库：SPA通常使用现代的前端JavaScript框架或库，如Vue.js、React或Angular，以简化应用程序的开发和维护。这些工具提供了组件化、状态管理和路由等功能，有助于构建复杂的SPA。

7. SEO优化：由于SPA通常在客户端加载内容，而不是在服务器端生成HTML，对搜索引擎优化（SEO）的处理可能需要额外的注意。但现代的SPA框架和技术已经提供了解决方案，以改善SEO。

总之，SPA是一种现代的Web应用程序设计模式，它通过动态加载内容、使用客户端路由和前端技术等方法来提供更快速、流畅和交互性的用户体验。它已经成为许多Web应用程序的首选设计模式，尤其是那些需要高度交互性和实时性的应用。

Vue CLI 是什么？

Vue CLI 是一个强大的工具，用于快速搭建和管理单页应用（SPA）项目，特别是针对 Vue.js 框架。以下是关于 Vue CLI 作为快速搭建SPA项目的工具的详细介绍：

1. 项目初始化：Vue CLI 允许你使用简单的命令行工具创建新的 Vue 项目。通过运行 vue create my-project，你可以快速生成一个新的 Vue.js 项目，这个项目包括了一切你需要开始的基本结构。

2. 可配置的预设：Vue CLI 提供了一些预设（presets），它们是已经配置好的项目模板，可以根据不同的需求选择。例如，你可以选择默认的预设，也可以选择包含特定插件、样式预处理器（如Sass或Less）或路由配置的预设。这使得项目初始化非常灵活。

3. 自动化构建：Vue CLI 集成了强大的构建工具，包括Webpack和Babel。这些工具会自动处理代码打包、模块化、代码分割、热重载等任务，使得项目的开发和生产构建过程变得简单而高效。

4. 开发服务器：Vue CLI 包括一个内置的开发服务器，可以实时预览你的应用。它支持热重载，这意味着当你编辑代码时，应用会立即更新，而无需手动刷新浏览器。

5. 插件系统：Vue CLI 允许你使用插件来扩展项目的功能。社区提供了许多有用的插件，用于添加路由、状态管理、HTTP请求等功能。你也可以编写自己的自定义插件以满足特定需求。

6. Vue UI：除了命令行界面，Vue CLI 还提供了一个可视化用户界面（Vue UI）。它允许你在图形界面中创建、管理和配置项目，这对于那些不熟悉命令行的开发者来说特别有用。

7. 易于维护：Vue CLI 自动生成的项目结构非常清晰，有助于组织和维护代码。此外，Vue.js 的组件化开发模式使得代码更具可维护性和可重用性。

8. 社区支持：Vue CLI 是一个广泛采用的工具，因此你可以轻松找到关于它的文档、教程、插件和社区支持。这使得学习和解决问题变得更容易。

总的来说，Vue CLI 是一个开发 Vue.js 单页应用项目的强大工具，它提供了项目初始化、自动化构建、开发服务器、插件系统和可视化界面等功能，使得快速搭建和管理SPA项目变得更加便捷和高效。无论是初学者还是经验丰富的开发者，都可以受益于使用 Vue CLI 来加速他们的Vue.js项目开发过程。

• 本文的目标和结构概述

步骤1：安装 Vue CLI

为什么选择 Vue CLI 作为项目搭建工具

选择 Vue CLI 作为项目搭建工具有许多合理的理由，以下是一些主要原因：

1. Vue.js 的官方工具：Vue CLI 是由 Vue.js 的官方团队开发和维护的工具。这意味着它与 Vue.js 框架完美集成，并且通常会及时更新以支持最新的 Vue 版本。这种官方支持使得它成为构建Vue.js项目的首选工具之一。

2. 项目初始化简单：Vue CLI 提供了一个快速的项目初始化过程，通过几个简单的命令就能创建一个基本的Vue.js项目结构。这使得你可以在几分钟内开始编写代码，而不必手动配置项目。

3. 可配置性：尽管项目初始化是简单的，但 Vue CLI 也提供了丰富的配置选项。你可以根据项目的特定需求自定义预设，包括插件、样式预处理器、路由和状态管理等。这种灵活性使得适用于各种项目类型。

4. 自动化构建：Vue CLI 集成了强大的构建工具，包括Webpack和Babel。这些工具自动处理诸如代码拆分、热重载、压缩和优化等任务，使得项目的开发和生产构建更加高效。

5. 开发服务器：Vue CLI 包括一个内置的开发服务器，支持热重载。这意味着你可以实时查看代码更改的效果，无需手动刷新浏览器。这极大地提高了开发效率。

6. 插件系统：Vue CLI 的插件系统使得扩展项目的功能变得容易。你可以通过添加社区提供的插件来集成路由、状态管理、HTTP请求等功能，也可以编写自己的自定义插件来满足特定需求。

7. 可视化界面：除了命令行界面，Vue CLI 还提供了一个可视化用户界面（Vue UI），使得项目的管理和配置变得更加直观和容易。这对于不熟悉命令行的开发者来说特别有帮助。

8. 社区支持：由于 Vue CLI 是一个广泛采用的工具，你可以轻松找到与之相关的文档、教程、插件和社区支持。这使得学习和解决问题变得更加便捷。

综上所述，选择 Vue CLI 作为项目搭建工具的主要原因包括其官方支持、简单的初始化过程、可配置性、自动化构建、开发服务器、插件系统、可视化界面以及强大的社区支持。这使得Vue CLI成为开发Vue.js单页应用项目的理想工具，能够加速项目的开发和提高开发效率。

 安装vue-cli

 前提是必须安装好node.js

打开cmd窗口 打开命令提示符，输入以下指令：

npm install -g vue-cli

npm install -g webpack

输入后出现的结果图： 

安装成功后就可以使用脚手架vue-cli来构建项目了。

步骤2：创建新的 Vue 项目

• 使用 vue init webpack+项目名 命令创建新项目

我这里创建的项目名为lzxspa

  一问一答”模式

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

         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//仅运行时，已经有推荐了就选择第一个了

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

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

         7.Set up 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                    

             Yes, use Yarn

             No, I will handle that myself     //选择题：选第一项“Yes, use NPM”是否使用npm install安装依赖

        全部选择好回车就进行了生成项目，出现如下内容表示项目创建完成

        # Project initialization finished!

        # ========================

        

        实在不会选，就回车选择“默认”或是选择“N”不安装  

 创建成功页面：

 使用cmd命令  cd lzxspa进入创建好的项目

启动项目   npm run dev

启动后效果图：

 查看的页面：

创建成功后的项目结构

导入开发工具后的项目结构

步骤3：项目结构概述

• vue项目结构说明

    build文件夹                       这个文件夹主要是进行webpack的一些配置

       webpack.base.conf.js            webpack基础配置,开发环境,生产环境都依赖

       webpack.dev.conf.js             webpack开发环境配置

       webpack.prod.conf.js            webpack生产环境配置

       build.js                        生产环境构建脚本      

       vue-loader.conf.js              此文件是处理.vue文件的配置文件

     config文件夹

       dev.env.js                      配置开发环境

       prod.env.js                     配置生产环境

       index.js                        这个文件进行配置代理服务器，例如：端口号的修改

         

     node_modules文件夹                存放npm install时根据package.json配置生成的npm安装包的文件夹

     src文件夹                         源码目录(开发中用得最多的文件夹)

       assets                          共用的样式、图片

       components                      业务代码存放的地方，里面分成一个个组件存放，一个页面是一个组件，一个页面里面还会包着很多组件

       router                          设置路由   

       App.vue                         vue文件入口界面

       main.js                         对应App.vue创建vue实例，也是入口文件，对应webpack.base.config.js里的入口配置  

     static文件夹                      存放的文件不会经过webpack处理，可以直接引用，例如swf文件如果要引用可以在webpack配置

                                       对swf后缀名的文件处理的loader，也可以直接将swf文件放在这个文件夹引用

                                         

     package.json                      这个文件有两部分是有用的：scripts 里面设置命令以及在dependencies和devDependencies中，

                                       分别对应全局下载和局部下载的依赖包

步骤4：开发SPA页面

SPA项目中套嵌路由

在单页面应用（SPA）项目中，套嵌路由（Nested Routes）是一种常见的路由管理技巧，它允许您在一个父路由内嵌套多个子路由，以更好地组织和管理应用程序的不同页面或组件。这在具有复杂页面结构的应用中特别有用，如管理面板、仪表板等。

AboutMe.vue：

<template>
  <div>
     修脚
    </div>
</template>
 
<script>
export default {
  name: 'AboutMe',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>
 
<style>
</style>

AboutWebsite.vue：

<template>
  <div>
    商务SPA
    </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'
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">高级项目1</router-link>
    <router-link to="/AboutWebsite">高级2</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>

效果图：

点击后：