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

2023-09-22 13:13:26

目录

一.Vue-CLi

二.SAP项目

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

四. SPA项目的搭建

4.1.检查

 4.2.安装

 4.3.构建

 4.4. 启动

4.5.导入

 ​编辑

 五.路由及嵌套使用

5.1.路由

 5.2.嵌套

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

一.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>

访问修改如图 : 

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

更多推荐

小白入门pytorch(一)

本文为小白入门Pytorch中的学习记录博客小白入门pytorch基础知识导入torch，查看torch版本importtorchprint(torch.__version__)输出结果：1.12.1+cu113张量在pytorch中，张量（tensor）是最基本的数据结构。零维张量—》标量，维度为0，一个单独的值,只

【Unity3D】资源管理

1前言Unity中资源管理方案主要有Resources、TextAsset、ScriptableObject、AssetDatabase、PlayerPrefs、Addressables、AssetBundle、SQLite，本文将介绍其中大部分方案。2ResourcesResources主要用于加载资源，被加载的资源

涂刷三防漆的规范

刷涂法是最简单的涂覆方法。通常用于局部的修补和维修，也可用于实验室环境或小批量试制/生产，一般是涂覆质量要求不是很高的场合。刷涂法的优点：是几乎不需设备夹具投资；节省涂覆材料；一般不需要遮盖工序。缺点：是适用范围窄；效率最低；整板刷涂时有遮蔽效应，涂覆一致性差，因人工操作，易出现气泡、有波纹、厚度不均匀等缺陷；需要大量

网络安全--防火墙

一、防火墙二、防火墙实验拓扑图第一步、准备条件1、云的设置单击云设备，先选择UDP，再增加，增加之后就会记录在下面。再增加一个虚拟的网卡，选择一个电脑中的虚拟网卡，然后增加。先选择对应端口，勾选上双向通道，点击添加，右边会自动生成端口映射表。2、防火墙设置导入防火墙的配置即可。需要包的点击连接下载：https://pa

大厂面试-16道面试题

1java集合类有哪些？List是有序的Collection，使用此接口能够精确的控制每个元素的插入位置，用户能根据索引访问List中元素。常用的实现List的类有LinkedList，ArrayList，Vector，Stack。ArrayList是容量可变的非线程安全列表，其底层使用数组实现。当几何扩容时，会创建更

爱看小说手机网源码全站带数据带自动采集程序/ThinkPHP内核小说网站源码+书库数据库带自动采集

爱看小说手机网源码全站带数据带自动采集程序，爱看小说程序源码+2W条数据全站打包,自动采集程序网站源码,后台已经更新5个采集规则可以采集小说30万本大概约10G。分享的这一款自带2w数据爱看小说网源码全站带数据打包,ThinkPHP内核小说网站源码带听书等全部插件，而且还带了采集规则，可以拿去测试！做好数据多更新数据，

使用Python 3脚本自动化Harbor镜像复制

介绍：在容器化应用程序的世界中，Docker镜像是构建和部署的核心。许多组织使用Harbor作为他们的镜像仓库管理解决方案。但有时候，需要将镜像从一个Harbor仓库复制到另一个，这可能会是一个繁琐的任务。为了简化这个过程，我们将介绍如何使用Python脚本来自动化这个任务。这个脚本将从源Harbor仓库中复制镜像，并

Linus Torvalds接受来自微软的Linux Hyper-V升级

导读微软最近推送了一些变更，旨在改进即将发布的Linux内核6.6版本对Hyper-V的支持。这些改进包括在Hyper-V上支持AMDSEV-SNPguest和IntelTDXguest。除了这两项，还有其他一些升级，如改进了VMBus驱动程序中的ACPI（高级配置和电源接口）根对象处理等。Linux领头人LinusT

LeetCode刷题---Add Two Numbers（一）

文章目录🍒题目🍒解法一迭代🍒解法二递归🍒递归小案例🍒迭代VS递归🍒题目给你两个非空的链表，表示两个非负的整数。它们每位数字都是按照逆序的方式存储的，并且每个节点只能存储一位数字。请你将两个数相加，并以相同形式返回一个表示和的链表。你可以假设除了数字0之外，这两个数都不会以0开头。本道题，我们采用两个主流的思

MySQL-Linux安装、卸载：

MySQL8.0.26-Linux版安装1.准备一台Linux服务器云服务器或者虚拟机都可以;Linux的版本为CentOS7;2.下载Linux版MySQL安装包https://downloads.mysql.com/archives/community/3.创建目录，上传MySQL安装包/usr/local/src

能ping通但无法上网的问题

大家好，今天我要和大家分享一下当你的IP地址能够成功ping通，却无法上网时该如何解决这个问题。这是一个相当常见的情况，在网络故障排查中经常遇到。别担心，我将为你揭开这个谜题，提供一些解决方案和技巧。首先，我们需要了解一下可能导致这种问题的原因。通常情况下，当你的IP地址能够成功ping通，这意味着你的计算机能够与目标

热文推荐
  1. 2023-09-21力扣每日一题

    链接：2603.收集树中金币题意一个无向无根树，每个点上有Coins[T]个金币，每次你可以选择吸收离自己距离小于等于2的节点的所有金币，也可以移动到相邻格子上，求全部吸完最小的移动次数（任选起点，但吸完要返回起点）解：由于计算的是移动次数，所以你可以认为一直在吸，走到哪儿吸到哪儿计算最后移动次数很简单，由于要回到起点

  2. 【开发工具】idea 的全局搜索快捷键（Ctrl+shift+F）失效

    文章目录前言1.取消输入法的快捷键（推荐使用）2.更改idea的快捷键3.热键占用总结前言当你发现在idea中看到用于全局搜索的快捷键就是Ctrl+shift+F，可是怎么按都不管用的时候，你就不要再执着于自己的操作继续狂点电脑按键了，因为可能根本就不是你的问题，而是微软的问题哟！！当我们在使用快捷键失效的时候，排除掉

  3. 24个Docker常见问题处理技巧

    1.Docker迁移存储目录默认情况系统会将Docker容器存放在var/lib/docker目录下[问题起因]今天通过监控系统，发现公司其中一台服务器的磁盘快慢，随即上去看了下，发现/var/lib/docker这个目录特别大。由上述原因，我们都知道，在/var/lib/docker中存储的都是相关于容器的存储，所以

  4. 黑马头条 后端项目部署_持续集成 Jenkins配置

    项目部署_持续集成1今日内容介绍1.1什么是持续集成持续集成（Continuousintegration，简称CI）指的是，频繁地（一天多次）将代码集成到主干持续集成的组成要素一个自动构建过程，从检出代码、编译构建、运行测试、结果记录、测试统计等都是自动完成的，无需人工干预。一个代码存储库，即需要版本控制软件来保障代码

  5. 【操作系统】聊聊进程间通信方式

    作为操作系统软件治理的核心进程，那么进程间通信的方式就非常重要，常见的比如管道、消息队列、共享内存、信号量、信号、Socket等。本篇主要简单介绍下我们知道每个进程都有自己独立的用户空间，而内核空间是共享的。管道ps-ef|grepmysql其中的｜就是一个管道符，只能进行单向传输数据。mkfifomyPipe创建一个

  6. 数字孪生技术如何提升工厂生产效率？

    数字孪生技术是一项引领工业界数字化转型的创新力量。随着工业4.0时代的到来，制造业正经历着巨大的变革，数字孪生技术在这个变革中发挥了关键作用。它不仅仅是一种技术，更是一种理念，将现实世界与数字世界相结合，为工厂带来了前所未有的机遇和挑战。工厂数字化转型的目标是提高生产效率、降低成本、提升质量，并实现更灵活的生产。数字孪

  7. 记一次 .NET 某电力系统 内存暴涨分析

    一：背景1.讲故事前些天有位朋友找到我，说他生产上的程序有内存暴涨情况，让我帮忙看下怎么回事，最简单粗暴的方法就是让朋友在内存暴涨的时候抓一个dump下来，看一看大概就知道咋回事了。二：Windbg分析1.到底是谁吃了内存这个问题说的再多也不为过，一定要看清楚这个程序是如何个性化发展的，可以使用!address-sum

  8. 课程学习成绩评分F2计算器

    前言：由于大二的时候计算成绩太麻烦了，特别是综测评定小组还需要验证其他同学的是否正确，对于这种重复性高的工作，首先要想到的就是用计算机来实现，想起来上学期学了一点Java，就想简单的写一个程序。C++因为我们是知道他的公式的，所以就是输入数据就能够得到最终的结果。最开始我也不是直接就开始想到用Java来写的，最开始只是

  9. 【Vue】模块基本语法

    🎉🎉欢迎来到我的CSDN主页！🎉🎉🏅我是Java方文山，一个在CSDN分享笔记的博主。📚📚🌟在这里，我要推荐给大家我的专栏《Vue快速入门》。🎯🎯🚀无论你是编程小白，还是有一定基础的程序员，这个专栏都能满足你的需求。我会用最简单易懂的语言，带你走进Vue的世界，让你从零开始，一步步成为前端大师。�