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

Vue的详细教程--用Vue-cli搭建SPA项目

Vue的详细教程--用Vue-cli搭建SPA项目

  • 1.Vue-cli是什么
  • 2.什么是SPA项目
    • 1.vue init webpack spa
    • 2.一问一答模式
    • 2:运行完上面的命令后,我们需要将当前路径改变到SPA这个文件夹内,然后安装需要的模块
    • 此步骤可理解成:maven的web项目创建成功后,修改pom文件添加依赖
    • 3.启动并访问项目
    • 此步骤可理解成:启动tomcat,并通过浏览器访问项目
  • 3.嵌套路由的使用

1.Vue-cli是什么

Vue-cli是一个基于Vue.js进行快速开发的脚手架工具。它集成了一些常用的前端开发工具和配置,可以帮助开发者快速搭建Vue.js项目的基础结构,并提供了一些常用的功能和特性。

安装vue-cli
npm install -g vue-cli
npm install -g webpack

打开命令行终端。
运行以下命令安装Vue-cli:

npm install -g vue-cli 如果尚未安装webpack,还需要执行以下命令全局安装webpack: npm install
webpack -g 注1:安装成功后,会出现如下文件
D:\initPath
node-v10.15.3-win-x64
node_global
vue
vue.cmd
vue-init
vue-init.cmd
vue-list
vue-list.cmd

2.什么是SPA项目

SPA(Single Page Application)即单页面应用,是一种Web应用程序的架构模式。与传统的多页面应用相比,SPA只有一个HTML页面,并使用JavaScript动态地更新页面的内容,实现无需重新加载整个页面而只更新部分内容的效果。SPA项目通常使用前端框架(如Vue.js、Angular、React等)来实现。

构建spa项目

1.vue init webpack spa

//spa是指你的项目名称(项目名不能用中文或大写字母!!!)
在这里插入图片描述

2.一问一答模式

1.Project name:项目名,默认是输入时的那个名称spa1,直接回车
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安装依赖

2:运行完上面的命令后,我们需要将当前路径改变到SPA这个文件夹内,然后安装需要的模块

此步骤可理解成:maven的web项目创建成功后,修改pom文件添加依赖

cd spa1 #改变路径到spa1文件夹下
npm install #安装所有项目需要的npm模块

3.启动并访问项目

此步骤可理解成:启动tomcat,并通过浏览器访问项目

cd spa1
npm run dev

项目启动成功后,打开浏览器输入“http://localhost:8080”即可
在这里插入图片描述
项目启动成功

对spa项目目录简介

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中分别对应全局下载和局部下载的依赖包

3.嵌套路由的使用

AboutMe

<template><div>这是你喜欢的东西简介</div>
</template> <script>export default {name: 'AboutMe',data () {return {msg: 'Welcome to Your Vue.js App'}}}
</script><style>
</style>

AboutWebsite

<template><div>这是你喜欢的东西的发展</div>
</template> <script>export default {name: 'AboutWebsite',data () {return {msg: 'Welcome to Your Vue.js App'}}}
</script><style>
</style>
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}]},]
})
<template><div><router-link to="/AboutMe">关于站长</router-link><router-link to="/AboutWebsite">关于你喜欢的</router-link><!-- 这是你喜欢的东西111 --><router-view></router-view></div>
</template> <script>export default {name: 'About',data () {return {msg: 'Welcome to Your Vue.js App'}}}
</script><style>
</style>

在这里插入图片描述

相关文章:

Vue的详细教程--用Vue-cli搭建SPA项目

Vue的详细教程--用Vue-cli搭建SPA项目 1.Vue-cli是什么2.什么是SPA项目1.vue init webpack spa2.一问一答模式2&#xff1a;运行完上面的命令后&#xff0c;我们需要将当前路径改变到SPA这个文件夹内&#xff0c;然后安装需要的模块此步骤可理解成&#xff1a;maven的web项目创…...

openldap访问控制

系统&#xff1a;debian12 /etc/ldap/slapd.d/cnconfig目录下 包含以下三个数据库&#xff1a; dn: olcDatabase{-1}frontend,cnconfig dn: olcDatabase{0}config,cnconfig dn: olcDatabase{1}mdb,cnconfigolcDatabase: [{\<index\>}]\<type\>数据库条目必须具有…...

阿里云服务器技术创新、网络技术和数据中心技术说明

阿里云服务器技术创新、网络技术创新、数据中心技术创新和智能运维&#xff1a;云服务器方升架构、自研硬件、自研存储硬件AliFlash和异构计算加速平台&#xff0c;以及全自研网络系统技术创新和数据中心巴拿马电源、液冷技术等技术创新说明&#xff0c;阿里云百科分享阿里云服…...

华为智能高校出口安全解决方案(2)

本文承接&#xff1a; https://qiuhualin.blog.csdn.net/article/details/131475315?spm1001.2014.3001.5502 重点讲解华为智能高校出口安全解决方案的基础网络安全&业务部署与优化的部署流程。 华为智能高校出口安全解决方案&#xff08;2&#xff09; 课程地址基础网络…...

【AI绘画】Stable Diffusion WebUI

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kuan 的首页,持续学…...

html、css学习记录【uniapp前奏】

Html 声明&#xff1a;该学习笔记源于菜鸟自学网站&#xff0c;特此记录笔记。很多示例源于此官网&#xff0c;若有侵权请联系删除。 文章目录 Html声明&#xff1a; CSS 全称 Cascading Style Sheets&#xff0c;层叠样式表。是一种用来为结构化文档&#xff08;如 HTML 文档…...

Linux-正则三剑客

目录 一、正则简介 1.正则表达式分两类&#xff1a; 2.正则表达式的意义 二、Linux三剑客简介 1.文本处理工具&#xff0c;均支持正则表达式引擎 2.正则表达式分类 3.基本正则表达式BRE集合 4.扩展正则表达式ere集合 三、grep 1.简介 2.实践 3.贪婪匹配 四、sed …...

Zilliz@阿里云:大模型时代下Milvus Cloud向量数据库处理非结构化数据的最佳实践

大模型时代下的数据存储与分析该如何处理?有没有已经落地的应用实践? 为探讨这些问题,近日,阿里云联合 Zilliz 和 Doris 举办了一场以《大模型时代下的数据存储与分析》为主题的技术沙龙,其中,阿里云对象存储 OSS 上拥有海量的非结构化数据,Milvus(Zilliz)作为全球最有…...

解决 react 项目启动端口冲突

报错信息&#xff1a; Emitted error event on Server instance at:at emitErrorNT (net.js:1358:8)at processTicksAndRejections (internal/process/task_queues.js:82:21) {code: EADDRINUSE,errno: -4091,syscall: listen,address: 0.0.0.0,port: 8070 }解决方法&#xff…...

ChatGPT AIGC 总结Vlookup的20种不同用法

Vlookup是Excel中最常见的函数。接下来我们让ChatGPT,AIGC总结Vlookup函数的用法 。 1. 基本的VLOOKUP用法:=VLOOKUP("John", A2:B5, 2, FALSE)。在A2:B5范围中查找"John",返回与"John"在同一行的第2列的值。例如,查找员工姓名,返回员工ID。…...

Android Logcat 命令行工具

关于作者&#xff1a;CSDN内容合伙人、技术专家&#xff0c; 从零开始做日活千万级APP。 专注于分享各领域原创系列文章 &#xff0c;擅长java后端、移动开发、商业变现、人工智能等&#xff0c;希望大家多多支持。 目录 一、导读二、概览三、日常用法3.1 面板介绍3.2 日志过滤…...

蓝桥等考Python组别八级004

第一部分:选择题 1、Python L8 (15分) 运行下面程序,输出的结果是( )。 i = 1 while i <= 3: print(i, end = ) i += 1 1 20 1 2 31 2 30 1 2正确答案:C 2、Python L8...

selenium-webdriver 阿里云ARMS 自动化巡检

很久没更新了&#xff0c;今天分享一篇关于做项目巡检的内容&#xff0c;这部分&#xff0c;前两天刚在公司做了部门分享&#xff0c;趁着劲还没过&#xff0c;发出来跟大家分享下。 一、本地巡检实现 1. Selenium Webdriver(SW) 简介 Selenium Webdriver&#xff08;以下简称…...

【数据仓库设计基础(二)】维度数据模型

文章目录 一. 概述二. 维度数据模型建模过程三. 维度规范化四. 维度数据模型的特点五. 维度数据模型1. 星型模式1.1&#xff0e;事实表1.2&#xff0e;维度表1.3&#xff0e;优点1.4&#xff0e;缺点1.5&#xff0e;示例 2. 雪花模式2.1&#xff0e;数据规范化与存储2.2&#x…...

【数据结构】排序算法(一)—>插入排序、希尔排序、选择排序、堆排序

&#x1f440;樊梓慕&#xff1a;个人主页 &#x1f3a5;个人专栏&#xff1a;《C语言》《数据结构》《蓝桥杯试题》《LeetCode刷题笔记》《实训项目》 &#x1f31d;每一个不曾起舞的日子&#xff0c;都是对生命的辜负 目录 前言 1.直接插入排序 2.希尔排序 3.直接选择排…...

基于JAVA+SpringBoot的新闻发布平台

✌全网粉丝20W,csdn特邀作者、博客专家、CSDN新星计划导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取项目下载方式&#x1f345; 一、项目背景介绍&#xff1a; 随着科技的飞速发展和…...

Java实现word excel ppt模板渲染与导出及预览 LibreOffice jodconverter

Java Office 一、文档格式转换 文档格式转换是office操作中经常需要进行一个操作&#xff0c;例如将docx文档转换成pdf格式。 java在这方面有许多的操作方式&#xff0c;大致可以分为内部调用&#xff08;无需要安装额外软件&#xff09;&#xff0c;外部调用&#xff08;需…...

【通意千问】大模型GitHub开源工程学习笔记(2)

使用Transformers来使用模型 如希望使用Qwen-chat进行推理,所需要写的只是如下所示的数行代码。请确保你使用的是最新代码,并指定正确的模型名称和路径,如Qwen/Qwen-7B-Chat和Qwen/Qwen-14B-Chat 这里给出了一段代码 from transformers import AutoModelForCausalLM, Aut…...

MQ - 35 四款MQ的架构设计与实现的对比

文章目录 导图概述RabbitMQ顺序消息定时和延时消息事务消息优先级队列死信队列WebSocketRocketMQ顺序消息定时和延时消息事务消息死信队列消息查询根据 Offset 查询消息根据时间戳查询消息据消息 ID 查询消息SchemaKafka顺序消息幂等事务消息消息查询...

spring6-IOC容器

IOC容器 1、IoC容器1.1、控制反转&#xff08;IoC&#xff09;1.2、依赖注入1.3、IoC容器在Spring的实现 2、基于XML管理Bean2.1、搭建子模块spring6-ioc-xml2.2、实验一&#xff1a;获取bean①方式一&#xff1a;根据id获取②方式二&#xff1a;根据类型获取③方式三&#xff…...

国防科技大学计算机基础课程笔记02信息编码

1.机内码和国标码 国标码就是我们非常熟悉的这个GB2312,但是因为都是16进制&#xff0c;因此这个了16进制的数据既可以翻译成为这个机器码&#xff0c;也可以翻译成为这个国标码&#xff0c;所以这个时候很容易会出现这个歧义的情况&#xff1b; 因此&#xff0c;我们的这个国…...

大数据学习栈记——Neo4j的安装与使用

本文介绍图数据库Neofj的安装与使用&#xff0c;操作系统&#xff1a;Ubuntu24.04&#xff0c;Neofj版本&#xff1a;2025.04.0。 Apt安装 Neofj可以进行官网安装&#xff1a;Neo4j Deployment Center - Graph Database & Analytics 我这里安装是添加软件源的方法 最新版…...

应用升级/灾备测试时使用guarantee 闪回点迅速回退

1.场景 应用要升级,当升级失败时,数据库回退到升级前. 要测试系统,测试完成后,数据库要回退到测试前。 相对于RMAN恢复需要很长时间&#xff0c; 数据库闪回只需要几分钟。 2.技术实现 数据库设置 2个db_recovery参数 创建guarantee闪回点&#xff0c;不需要开启数据库闪回。…...

利用ngx_stream_return_module构建简易 TCP/UDP 响应网关

一、模块概述 ngx_stream_return_module 提供了一个极简的指令&#xff1a; return <value>;在收到客户端连接后&#xff0c;立即将 <value> 写回并关闭连接。<value> 支持内嵌文本和内置变量&#xff08;如 $time_iso8601、$remote_addr 等&#xff09;&a…...

CVPR 2025 MIMO: 支持视觉指代和像素grounding 的医学视觉语言模型

CVPR 2025 | MIMO&#xff1a;支持视觉指代和像素对齐的医学视觉语言模型 论文信息 标题&#xff1a;MIMO: A medical vision language model with visual referring multimodal input and pixel grounding multimodal output作者&#xff1a;Yanyuan Chen, Dexuan Xu, Yu Hu…...

进程地址空间(比特课总结)

一、进程地址空间 1. 环境变量 1 &#xff09;⽤户级环境变量与系统级环境变量 全局属性&#xff1a;环境变量具有全局属性&#xff0c;会被⼦进程继承。例如当bash启动⼦进程时&#xff0c;环 境变量会⾃动传递给⼦进程。 本地变量限制&#xff1a;本地变量只在当前进程(ba…...

QMC5883L的驱动

简介 本篇文章的代码已经上传到了github上面&#xff0c;开源代码 作为一个电子罗盘模块&#xff0c;我们可以通过I2C从中获取偏航角yaw&#xff0c;相对于六轴陀螺仪的yaw&#xff0c;qmc5883l几乎不会零飘并且成本较低。 参考资料 QMC5883L磁场传感器驱动 QMC5883L磁力计…...

mongodb源码分析session执行handleRequest命令find过程

mongo/transport/service_state_machine.cpp已经分析startSession创建ASIOSession过程&#xff0c;并且验证connection是否超过限制ASIOSession和connection是循环接受客户端命令&#xff0c;把数据流转换成Message&#xff0c;状态转变流程是&#xff1a;State::Created 》 St…...

Mac软件卸载指南,简单易懂!

刚和Adobe分手&#xff0c;它却总在Library里给你写"回忆录"&#xff1f;卸载的Final Cut Pro像电子幽灵般阴魂不散&#xff1f;总是会有残留文件&#xff0c;别慌&#xff01;这份Mac软件卸载指南&#xff0c;将用最硬核的方式教你"数字分手术"&#xff0…...

selenium学习实战【Python爬虫】

selenium学习实战【Python爬虫】 文章目录 selenium学习实战【Python爬虫】一、声明二、学习目标三、安装依赖3.1 安装selenium库3.2 安装浏览器驱动3.2.1 查看Edge版本3.2.2 驱动安装 四、代码讲解4.1 配置浏览器4.2 加载更多4.3 寻找内容4.4 完整代码 五、报告文件爬取5.1 提…...