使用vue-cli搭建spa项目

目录

什么是vue-cli

安装vue-cli

使用脚手架vue-cli(来构建项目)

vue项目结构的说明

 基于spa项目完成路由

基于spa项目完成嵌套路由 


什么是vue-cli

Vue CLI是一个官方发布的用于快速搭建Vue.js项目的命令行工具。它提供了一套交互式的脚手架,可以帮助开发者初始化项目、配置构建工具、管理依赖等。

安装vue-cli

打开cmd窗口,输入下面代码回车即可

npm install -g vue-cli

 

使用脚手架vue-cli(来构建项目)

我们在安装的nodejs的目录下,代开cmd窗口输入下面代码

vue init webpack   项目名

创建好spa项目之后,会出现下面九个问题,我们一一作出回答即可

 

第一个问题是项目名字,直接回车就可以了,

第二个问题是创建一个vue项目,直接回车即可,

第三个问题是创作者的名字可以输入自己的名字就行,

第四个直接回车即可,

第五个是否需要vue-router,Y选择使用,这样生成好的项目就会有相关的路由配置文件,

第六个是否用ESLint来限制你的代码错误和风格。N 

第七个是否安装单元测试  选N就行,

第八个是否安装e2e测试  选N即可,

第九个也直接回车即可

 接着他就会生成项目,在刚刚我们目录下就可以看见有,我们打开软件,导入即可

最后在cmd窗口输入下面两行代码即可

cd spa1

npm run dev

vue项目结构的说明

  1. src目录:这是项目的主要源代码目录,包含了Vue组件、样式文件、JavaScript文件等。一般情况下,你的开发工作都会在这个目录下进行。

    • main.js:这是项目的入口文件,通常用来创建Vue实例,并引入其他必要的库和组件。
    • App.vue:这是根组件,是整个应用的主要组件。它包含了应用的整体布局和结构。
    • components目录:这个目录用来存放应用的其他Vue组件。你可以在这里创建和管理各种功能模块的组件。
    • assets目录:这个目录用来存放应用所需的静态资源,如图片、样式文件等。
    • router目录:如果你使用了Vue Router来管理路由,那么你可以在这个目录下配置路由相关的文件。
    • store目录:如果你使用了Vuex来进行状态管理,那么你可以在这个目录下配置Vuex相关的文件。
    • utils目录:这个目录用来存放一些工具函数或者辅助文件,方便你在应用中使用。
  2. public目录:这个目录存放一些不需要经过构建处理的静态资源,例如HTML文件、favicon.ico等。在构建过程中,public目录下的文件会直接复制到最终的构建目录中。

  3. dist目录:这是构建过程生成的目标文件夹,包含了最终生成的静态资源文件和HTML文件。你可以将这个文件夹部署到服务器上,以发布你的应用。

  4. 其他配置文件:在项目的根目录下,还包含了一些其他的配置文件,例如package.json(项目的依赖管理和脚本配置)、babel.config.js(Babel的配置文件)、.eslintrc.js(ESLint的配置文件)等。

以上是一个常见的Vue.js项目结构,你可以根据自己的需求对其进行调整和扩展。

 

 基于spa项目完成路由

新建一个home,vue

<template><div class="homw">这是首页,展示网站最新内容</div>
</template><script>
export default {name: 'Home',data () {return {msg: 'Welcome to Your Vue.js App'}}
}
</script><style>
</style>

再建一个about.vue 

<template><div>关于本站的发展历史,更新日志</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'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

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}]
})

 

基于spa项目完成嵌套路由 

新建AboutMe.vue和AboutWebsite.vue

<template><div>这是站长的简介 </div>
</template><script>
export default {name: 'AboutMe',data () {return {msg: 'Welcome to Your Vue.js App'}}
}
</script><style>
</style>
<template><div>网站的发展史</div>
</template><script>
export default {name: 'AboutWebxite',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 AboutWensite from '@/components/AboutWensite'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: '/AboutWensite',name: 'AboutWensite',component: AboutWensite}]}]
})

最后再去app.vue中重写下面代码即可

 

ok,今天就到这里了,散会 !!!

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

计算物理专题----随机游走实战

计算物理专题----随机游走实战 Problem 1 Implement the 3D random walk 拟合线 自旋的 拟合函数&#xff08;没有数学意义&#xff09; 参数&#xff1a;0.627,3.336,0.603&#xff0c;-3.234 自由程满足在一定范围内的均匀分布以标准自由程为单位长度&#xff0c;…

数据结构 - 线性表(顺序表)

线性表是什么 线性表是包含若干数据元素的一个线性序列&#xff0c;记为&#xff1a; L (a0&#xff0c;…ai-1&#xff0c;ai,ai1,…an-1) L为表名&#xff0c;ai&#xff08;0≤ i ≤n-1&#xff09;为数据元素&#xff1b;n为表长&#xff0c;n>0时&#xff0c;线性表…

MySQL全局优化与Mysql8.0新增特性

Mysql全局优化总结 ​ 从上图可以看出SQL及索引的优化效果是最好的&#xff0c;而且成本最低&#xff0c;所以工作中我们要在这块花更多时间。 补充一点配置文件my.ini或my.cnf的全局参数&#xff1a; 假设服务器配置为&#xff1a; CPU&#xff1a;32核内存&#xff1a;6…

vue+express、gitee pm2部署轻量服务器

一、代码配置 前后端接口都保持 127.0.0.1:3000 vue创建文件 pm2.config.cjs module.exports {apps: [{name: xin-web, // 应用程序的名称script: npm, // 启动脚本args: run dev, // 启动脚本的参数cwd: /home/vue/xin_web, // Vite 项目的根目录interpreter: none, // 告诉…

burpsuite+proxifier小程序抓包

burpsuiteproxifier小程序抓包 安装bp证书到系统 配置

推荐一款可以快速抽取sap数据的ETL工具

使用SAP在数据分析上面临的问题 SAP Enterprise Resource Planning (ERP) 是国内最广泛使用的ERP系统之一。然而&#xff0c;使用SAP ERP系统面临着一些数据分析不方便&#xff0c;数据导出困难等问题&#xff1a; 数据集成困难&#xff1a;将SAP中的数据整合到其他系统或本地…

局部变量,全局变量与内存

本文会使用IDA分析局部变量&#xff0c;全局变量在内存的存储 目录 使用IDA分析局部变量 使用IDA分析全局变量 总结 使用IDA分析局部变量 #include <stdio.h>int main() {int nNum 1;float fNum 2.5;char ch A;printf("int %d, float %f, char %c", nNu…

opencv dnn模块 示例(16) 目标检测 object_detection 之 yolov4

博客【opencv dnn模块 示例(3) 目标检测 object_detection (2) YOLO object detection】 测试了yolov3 及之前系列的模型&#xff0c;有在博客【opencv dnn模块 示例(15) opencv4.2版本dnn支持cuda加速&#xff08;vs2015异常解决&#xff09;】 说明了如何使用dnn模块进行cuda…

vue2中年份季度选择器(需要安装element)

调用 <!--父组件调用--><QuarterCom v-model"quart" clearable default-current/> 组件代码 <template><div><span style"margin-right: 10px">{{ label }}</span><markstyle"position:fixed;top:0;bottom:0…

路由器ip地址设置

当你使用路由器时&#xff0c;你可以按照以下步骤设置路由器的IP地址。这样可以确保你的网络连接正常并允许其他设备连接到你的路由器。 **步骤一&#xff1a;登录路由器管理界面** 首先&#xff0c;你需要登录到路由器的管理界面。打开你的浏览器&#xff0c;并输入路由器的…

本地Docker Registry远程连接,为你带来高效便捷的镜像管理体验!

Linux 本地 Docker Registry本地镜像仓库远程连接 文章目录 Linux 本地 Docker Registry本地镜像仓库远程连接1. 部署Docker Registry2. 本地测试推送镜像3. Linux 安装cpolar4. 配置Docker Registry公网访问地址5. 公网远程推送Docker Registry6. 固定Docker Registry公网地址…

ChatGLM Pytorch从0编写Transformer算法

预备工作 # !pip install http://download.pytorch.org/whl/cu80/torch-0.3.0.post4-cp36-cp36m-linux_x86_64.whl numpy matplotlib spacy torchtext seaborn import numpy as np import torch import torch.nn as nn import torch.nn.functional as F import math, copy, tim…

【漏洞复现】企望制造 ERP命令执行

漏洞描述 由于企望制造 ERP comboxstore.action接口权限设置不当&#xff0c;默认的配置可执行任意SQL语句&#xff0c;利用xp_cmdshell函数可远程执行命令&#xff0c;未经认证的攻击者可通过该漏洞获取服务器权限。 免责声明 技术文章仅供参考&#xff0c;任何个人和组织…

golang入门笔记——pprof性能分析

文章目录 简介runtime/pprof的使用命令行交互网络服务性能分析pprof与性能测试结合压测工具go-wrk 简介 golang性能分析工具pprof的8个指标 1.性能分析的5个方面&#xff1a;CPU、内存、I/O、goroutine&#xff08;协程使用情况和泄漏检查&#xff09;、死锁检测以及数据竟态…

ETHERCAT转MODBUS TCP/IP协议网关

产品介绍 JM-ECT-TCPIP是自主研发的一款EtherCAT从站功能的通讯网关。该产品主要功能是将EtherCAT网络和 TCP/IP 网络连接起来。 本网关连接到EtherCAT总线中做为从站使用&#xff0c;连接到 TCP/IP 网络中做为服务器或客户端使用。 产品参数 技术参数 u 网关做为EtherCAT网…

淘天集团联合爱橙科技开源大模型训练框架Megatron-LLaMA

9月12日&#xff0c;淘天集团联合爱橙科技正式对外开源大模型训练框架——Megatron-LLaMA&#xff0c;旨在让技术开发者们能够更方便地提升大语言模型训练性能&#xff0c;降低训练成本&#xff0c;并保持和LLaMA社区的兼容性。测试显示&#xff0c;在32卡训练上&#xff0c;相…

八、数据类型转换

数据类型转换 1.数据类型转换1.1.隐式类型转换1.2.显式类型转换1.3.训练11.4.训练2 —————————————————————————————————————————————————— 1.数据类型转换 类型转换是将一个值从一种类型更改为另一种类型的过程。例如&…

Haproxy负载均衡群集

HAproxy搭建Web群集一、Web集群调度器1、常见的Web集群调度器2、常用集群调度器的优缺点&#xff08;LVS ,Nginx,Haproxy)2.1 Nginx2.2 LVS2.3 Haproxy 3、LVS、Nginx、HAproxy的区别 二、Haproxy1、简介2、Haproxy应用分析3、HAProxy的主要特性4、Haproxy调度算法&#xff08;…

有了Spring为什么还需要SpringBoot呢

目录 一、Spring缺点分析 二、什么是Spring Boot 三、Spring Boot的核心功能 3.1 起步依赖 3.2 自动装配 一、Spring缺点分析 1. 配置文件和依赖太多了&#xff01;&#xff01;&#xff01; spring是一个非常优秀的轻量级框架&#xff0c;以IOC&#xff08;控制反转&…

命令提示符cmd查询IP地址ipconfig, linux 系统中查看ip地址ifconfig

1.windowR 2.输入cmd----》确定 3.在命令行中输入ipconfig然后按回车。IPv4地址就是电脑的IP地址。 linux系统中查看ip地址 &#xff1a; ifconfig