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

news2024/12/25 12:26:57

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>

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1031221.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

PY32F003F18之ADC问题

普然单片机PY32F003F18的内部有一个LDO&#xff0c;其电压固定为1.2V。我在用官方程序测试时&#xff0c;若接上USB转串口的RX导线&#xff0c;向PC发送数据&#xff0c;读内部参考电压比较正确&#xff0c;但是&#xff0c;当接上USB转串口的TX导线时&#xff0c;发现读到内部…

【从0学习Solidity】15. 异常

【从0学习Solidity】15. 异常 博主简介&#xff1a;不写代码没饭吃&#xff0c;一名全栈领域的创作者&#xff0c;专注于研究互联网产品的解决方案和技术。熟悉云原生、微服务架构&#xff0c;分享一些项目实战经验以及前沿技术的见解。关注我们的主页&#xff0c;探索全栈开发…

ruoyi框架开发LOT项目

背景 最近闲着就用ruoyi的框架写了一个LOT项目&#xff0c;个人觉得效果还可以。 1、首页 2、企业管理 3、用户管理 4、设备列表 5、设备列表标签展示 6、设备详情页面 7、大屏展示界面 8、结束 -----华丽的分割线&#xff0c;以下是凑字数&#xff0c;大家不用花时间看&…

2023年中国研究生数学建模竞赛D题解题思路

为了更好的帮助大家第一天选题&#xff0c;这里首先为大家带来D题解题思路&#xff0c;分析对应赛题之后做题阶段可能会遇到的各种难点。 稍后会带来D题的详细解析思路&#xff0c;以及相关的其他版本解题思路 成品论文等资料。 赛题难度评估&#xff1a;A、B>C>E、F&g…

分享demo:Vue3 使用element plus + vue-i18实现国际化

&#x1f447;面是demo展示 PS&#xff1a;点赞关注私信获取demo

任务计划不执行bat脚本排查思路

问题&#xff1a; 我有一个任务计划&#xff0c;执行的是一个bat脚本,显示也已经操作成功了&#xff0c;但是没任何变化 排查&#xff1a; 1、把cmd文件拖入到cmd中执行查看 发现执行的时候是乱码的&#xff0c;肯定就是编码问题引起&#xff0c;在cmd执行前&#xff0c;提前切…

ruoyi-nbcio项目增加右上角的消息提醒

更多ruoyi-nbcio功能请看演示系统 gitee源代码地址 前后端代码&#xff1a; https://gitee.com/nbacheng/ruoyi-nbcio 因为以后流程的通知需要提醒&#xff0c;所以右上角需要增加消息提醒。 1、增加右上角的按钮与信息 <div class"right-menu"><templat…

C : DS顺序表--合并操作

Description 建立顺序表的类&#xff0c;属性包括&#xff1a;数组、实际长度、最大长度&#xff08;设定为1000&#xff09; 已知两个递增序列&#xff0c;把两个序列的数据合并到顺序表中&#xff0c;并使得顺序表的数据递增有序 Input 第1行先输入n表示有n个数据&#x…

仿网易云-360度混响

一直在用网易云音乐听歌&#xff0c;感觉他的这个动效还是挺不错的&#xff0c;最近也是想试试canvas绘图相关的。尝试了几次之后感觉效果还不错&#xff0c;不过距离网易云的还是有些差距。 本期准备仿照制作如下效果&#xff1a; 偷偷使用最近比较流行的罗刹海市的音乐来展…

【EasyExcel】excel表格的导入和导出

【EasyExcel】excel表格的导入和导出 【一】EasyExcel简介【二】EasyExcel使用【1】EasyExcel相关依赖【2】写Excel&#xff08;1&#xff09;最简单的写(方式一)&#xff08;2&#xff09;最简单的写(方式二)&#xff08;3&#xff09;排除模型中的属性字段&#xff08;4&…

服务器数据恢复-LINUX操作系统下各文件系统误删除/格式化数据的恢复方案

服务器数据恢复环境&#xff1a; 基于EXT2/EXT3/EXT4/Reiserfs/Xfs文件系统的Linux操作系统。 服务器故障&#xff1a; LINUX操作系统下误删除/格式化数据。 服务器数据恢复过程&#xff1a; 1、首先会检测服务器是否存在硬件故障&#xff0c;如果检测出硬件故障&#xff0c;交…

ARM64 SMP多核启动详解2(psci)

1. 支持psci情况 上面说了pin-table的多核启动方式&#xff0c;看似很繁琐&#xff0c;实际上并不复杂&#xff0c;无外乎主处理器唤醒从处理器到指定地址上去执行指令&#xff0c;说他简单是相对于功能来说的&#xff0c;因为他只是实现了从处理器的启动&#xff0c;仅此而已…

智慧公厕预见幸福生活、美好未来

随着城市化的加速发展&#xff0c;公共厕所作为城市基础设施的重要组成部分&#xff0c;对于提升城市形象和居民生活质量起着至关重要的作用。智慧公厕作为智慧城市建设的一部分&#xff0c;正逐渐成为城市管理的新宠儿&#xff0c;能有效助力网络强国、数字中国、智慧社会的建…

第九章 常用服务器的搭建

第九章 常用服务器的搭建 1.配置FTP服务器 1.1.FTP简介 ​ FTP&#xff08;File Transfer Protocol&#xff0c;文件传送协议&#xff09;是TCP/IP网络上两台计算机间传送文件的协议&#xff0c;FTP是在TCP/IP网络和Internet上最早使用的协议之一&#xff0c;它属于网络协议…

形式化验证方法研究综述

摘要&#xff1a;形式化验证是证明软件、硬件或系统正确性的一种方法&#xff0c;近年来受到了越来越多的关注。 本文对形式化验证的研究进行了综述。首先介绍了形式化验证的基本概念&#xff0c;然后重点介绍了形式化验证的三种技术&#xff0c;包括模型检测、定理证明和等价性…

Redis中是如何实现分布式锁的?

分布式锁常见的三种实现方式&#xff1a; 数据库乐观锁&#xff1b; 基于Redis的分布式锁&#xff1b; 基于ZooKeeper的分布式锁。 本次面试考点是&#xff0c;你对Redis使用熟悉吗&#xff1f;Redis中是如何实现分布式锁的。 要点 Redis要实现分布式锁&#xff0c;以下条件应…

JS基础语法

JS是一门面向对象的编程语言&#xff0c;运行在客户端的脚本语言&#xff0c;可以基于Node.js进行服务器端编程 JS的作用: 表单动态校验网页特效服务端开发 浏览器执行JS&#xff1a; 浏览器分为两部分&#xff1a;渲染引擎和JS引擎 渲染引擎用来解析HTML和CSS&#xff0c;…

2023中国智能产业高峰论坛丨文档图像大模型的思考与探索

# 前言 随着人工智能技术的不断发展&#xff0c;尤其是深度学习技术的广泛应用&#xff0c;多模态数据处理和大模型训练已成为当下研究的热点之一&#xff0c;这些技术也为文档图像智能处理和分析领域带来了新的发展机遇。 近期&#xff0c;2023第十二届中国智能产业高峰论坛…

打印由数字组成的金字塔图案——python

1222 33333 4444444 555555555打印由数字组成的金字塔图案。但n9时&#xff0c;如下图所示。 输入格式: 输入一个整数n&#xff08;1<A<9&#xff09;。 输出格式: 输出由数字组成的金字塔图案。 输入样例: 在这里给出一组输入。例如&#xff1a; 5输出样例: 在这…

软件设计模式系列之十二——外观模式

在软件设计中&#xff0c;经常会遇到需要与复杂子系统进行交互的情况。为了简化客户端与子系统之间的交互&#xff0c;提高系统的可维护性和可用性&#xff0c;外观模式应运而生。外观模式&#xff08;Facade Pattern&#xff09;是一种结构型设计模式&#xff0c;它提供一个统…