使用vue-cli搭建SPA项目

蔚落 2023-10-16 12:50 36阅读 0赞

**目录**

引言

什么是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**

输入后出现的结果图：

![9069a378987147cdbb3d30575da3c7f7.png][]

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

### 步骤2：创建新的 Vue 项目 ###

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

我这里创建的项目名为lzxspa

![76c9a3d27ba44cf29c606b082f1f2233.png][]

> 一问一答”模式
> 
> 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”不安装

创建成功页面：

![bb68ef9339fb4046948f47d61c0b2f22.png][]

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

启动项目 npm run dev

启动后效果图：

![8ad4e4b615144ff7b7e19cfd50602e6e.png][]

查看的页面：

![466aac01ee02415fba832b9f33e4b7d5.png][]

#### 创建成功后的项目结构 ####

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

![a0193e10a64c4d7494fc4c3a7393b90b.png][]

### 步骤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>

效果图：

![4151d8c9a1674fec86cac1b0b7a81b4e.png][]

点击后：

![7603dc488c9c436f807881d83bee474f.png][]

###  ###

[vue-cli]: https://so.csdn.net/so/search?q=vue-cli&spm=1001.2101.3001.7020
[9069a378987147cdbb3d30575da3c7f7.png]: https://img-blog.csdnimg.cn/9069a378987147cdbb3d30575da3c7f7.png
[76c9a3d27ba44cf29c606b082f1f2233.png]: https://img-blog.csdnimg.cn/76c9a3d27ba44cf29c606b082f1f2233.png
[bb68ef9339fb4046948f47d61c0b2f22.png]: https://img-blog.csdnimg.cn/bb68ef9339fb4046948f47d61c0b2f22.png
[8ad4e4b615144ff7b7e19cfd50602e6e.png]: https://img-blog.csdnimg.cn/8ad4e4b615144ff7b7e19cfd50602e6e.png
[466aac01ee02415fba832b9f33e4b7d5.png]: https://img-blog.csdnimg.cn/466aac01ee02415fba832b9f33e4b7d5.png
[a0193e10a64c4d7494fc4c3a7393b90b.png]: https://img-blog.csdnimg.cn/a0193e10a64c4d7494fc4c3a7393b90b.png
[4151d8c9a1674fec86cac1b0b7a81b4e.png]: https://img-blog.csdnimg.cn/4151d8c9a1674fec86cac1b0b7a81b4e.png
[7603dc488c9c436f807881d83bee474f.png]: https://img-blog.csdnimg.cn/7603dc488c9c436f807881d83bee474f.png