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

Vue_cli搭建过程项目创建

概述

vue-cli 官方提供的一个脚手架,用于快速生成一个 vue 的项目模板;预先定义
好的目录结构及基础代码,就好比咱们在创建 Maven 项目时可以选择创建一个
骨架项目,这个骨架项目就是脚手架,我们的开发更加的快速;
(解释: 就是一个框架(相当于盖房子的骨架),然后就在这个骨架上面渲染骨架,最后达到想要的结果.)

需要运行的环境

Node.js
简单的说 Node.js 是一个前端 js 运行环境 或者说是一个 JS 语言解释器
npm
npm 是 Node.js 的包管理工具,用来安装各种 Node.js 的扩展。npm 是
JavaScript 的包管理工具,也是世界上最大的软件注册表。有超过 60 万个
JavaScript 代码包可供下载。npm 让 JavaScript 开发人员可以轻松地使用
其他开发人员共享的代码。
https://nodejs.org/en/download

在这个网址上面下载Node.js运行环境

然后进行以下操作

打开终端

输入这两个命令检验环境是否搭建成功.

用 HbuilderX 快速搭建一个 vue-cli 项目

打开文件里面的新建
    
选择项目
项目结构
如果项目中没有这个文件或者误删文件
就在控制台输入这行命令来导入,项目依赖的组件
npm install

创建好这个项目之后要删除无关示例代码以及文件
可以输入在控制台输入这行命令来防止以后创建的项目下载package-lock.json 这个文件]
npm config set package-lock false

删除App.vue这些示例代码留下基本框架
删除以上的东西留下的基本框架
让我们快速搭建一个Hello World项目
首先在src建立Index.vue, Login.vue, Reg.vue 这些文件
组件路由
vue router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建
单页面应用变得易如反掌。
安装
vue-router 是一个插件包,所以我们还是需要用 npm 来进行安装的。 打开命令行工具,进入你的项目目录,输入下面命令。
npm i vue-router@3.5.3

在控制台输入这行命令导入路由

搭建步骤:
1. 创建 router 目录
创建 index.js 文件,在其中配置路由
import Vue from 'vue';
import router from 'vue-router'; /* 导入路由 */
import login from '../views/login'; /* 导入其他组件 */
import content from '../components/content'; /* 导入其他组件 */
Vue.use(router)
/* 定义组件路由 */
var rout = new router({
routes: [
{
path: '/index',
name: 'index',
component: index
},
{
path: '/content',
component: content
}
]
});
// 导出路由对象
export default rout;
2.使用路由
<router-link to="/index"> 首页 </router-link>
<router-link to="/content"> 内容 </router-link>
<router-view/> 3.在 main.js 中配置路由
import router from './router/index.js'
Vue.use(router);
new Vue({
el: '#app',
router,
render: h => h(App)
})

3.在 main.js 中配置路由
import router from './router/index.js'
Vue.use(router);
new Vue({
el: '#app',
router,
render: h => h(App)
})
然后给这些组件定义路由地址用来切换组件
在src目录下创建一个router目录
在此目录下创建一个名为index.js 文件创建路由器
给组件定义地址
定义好这些组件的地址之后在main.js中导入组件 
在App.vue组件中的id为app的div标签加  <router-view></router-view>这个标签用来显示其他组件.
做好以上步骤来运行一下项目, 在控制台输入这行命令来运行项目
npm run serve

在控制台按住Ctrl+ c可以结束项目服务

这样就搭建好一个Hello World的示例项目

看一下效果

点击登录可以切换到登录组件,点击注册切换到注册组件

相关文章:

Vue_cli搭建过程项目创建

概述 vue-cli 官方提供的一个脚手架&#xff0c;用于快速生成一个 vue 的项目模板&#xff1b;预先定义 好的目录结构及基础代码&#xff0c;就好比咱们在创建 Maven 项目时可以选择创建一个 骨架项目&#xff0c;这个骨架项目就是脚手架&#xff0c;我们的开发更加的快速&am…...

面试题4:POST 比 GET 安全?

不是。HTTP就没有加密功能。 我们知道 GET一般将参数放到URL的查询字符串中&#xff0c;如果是实现登录页面&#xff0c;我们的用户名和密码就直接显示到浏览器的地址栏中了&#xff0c;此时就会轻易的被他人获取账号密码&#xff0c;很不安全。而POST会把参数放到 body 里&am…...

Github生成Personal access tokens及在git中使用

目录 生成Token 使用Token-手工修改 使用Token-自动 生成Token 登录GitHub&#xff0c;在GitHub右上角点击个人资料头像&#xff0c;点击Settings → Developer Settings → Personal access tokens (classic)。 在界面上选择点击【Generate new token】&#xff0c;填写如…...

【BUG记录】条件查询没有查询结果 || MybatisPlus打印查询语句

结论 先说结论&#xff0c;查询没有结果&#xff0c;可能是数据库连接&#xff0c;数据问题之类&#xff0c;最有可能的根本原因是查询语句问题&#xff0c;需要想办法检查查询语句&#xff0c;使用mybatisPlus等自动生成查询语句的框架不能直接看语句&#xff0c;可以依靠日志…...

【C#】找不到属性集方法。get只读属性用了反射设置setValue肯定报错

欢迎来到《小5讲堂》 这是《C#》系列文章&#xff0c;每篇文章将以博主理解的角度展开讲解。 温馨提示&#xff1a;博主能力有限&#xff0c;理解水平有限&#xff0c;若有不对之处望指正&#xff01; 背景 找不到属性集方法。get只读属性用了反射设置setValue肯定报错 报错…...

探索ChatGPT在程序员日常工作的多种应用

引言 在现代科技迅猛发展的今天&#xff0c;人工智能的应用已经深入到我们生活和工作的各个方面。作为程序员&#xff0c;我们时常面临大量繁杂的任务&#xff0c;从代码编写、错误调试到项目管理和团队协作&#xff0c;每一项都需要花费大量的时间和精力。近年来&#xff0c;…...

算法与数据结构——时间复杂度详解与示例(C#,C++)

文章目录 1. 算法与数据结构概述2. 时间复杂度基本概念3. 时间复杂度分析方法4. 不同数据结构的时间复杂度示例5. 如何通过算法优化来提高时间复杂度6. C#中的时间复杂度示例7. 总结 算法与数据结构是计算机科学的核心&#xff0c;它们共同决定了程序的性能和效率。在实际开发中…...

面试题3:GET 和 POST 有什么区别?

[!]高频面试题。 GET 和 POST 没有本质区别&#xff0c;可以进行相互代替。 1、GET语义&#xff1a;“从服务器获取数据”&#xff1b;POST语义&#xff1a;“往服务器上提交数据”。[设计初衷&#xff0c;不一定要遵守] 2、发请求时&#xff0c;给服务器传递的数据&#xff…...

探索QCS6490目标检测AI应用开发(三):模型推理

作为《探索QCS6490目标检测AI应用开发》文章&#xff0c;紧接上一期&#xff0c;我们介绍如何在应用程序中介绍如何使用解码后的视频帧结合Yolov8n模型推理。 高通 Qualcomm AI Engine Direct 是一套能够针对高通AI应用加速的软件SDK&#xff0c;更多的内容可以访问&#xff1a…...

C# 静态类中构造、字段和属性等的执行顺序,含有单例模式分析

C# 静态类时我们实战项目开发中用的非常多的。有些时候可能他的执行顺序并非如我们认为的那样&#xff0c;那就快速来看一下吧&#xff01; 在C#中&#xff0c;静态类的构造函数是在第一次访问该类的任何成员时执行的。静态构造函数是不可继承的&#xff0c;并且在访问静态类的…...

c++设计模式之一创建型模式

1、创建型模式&#xff08;常见的设计模式&#xff09; Factory 模式&#xff08;工厂模式&#xff0c;被实例化的子类&#xff09; 在面向对象系统设计中经常可以遇到以下的两类问题&#xff1a; 下面是第一类问题和代码示例&#xff1a;我们经常会抽象出一些类的公共接口以…...

上古世纪台服注册账号+下载客户端全方位图文教程

又一款新的MMRPG游戏即将上线啦&#xff0c;游戏名称叫做《上古世纪》游戏采用传统MMO类型游戏的玩法&#xff0c;但是开发商采用了先进的游戏引擎&#xff0c;让玩家们可以享受到极致的视觉体验。同时游戏的背景是建立在大陆分崩离析的基础上。各个部落因为领地的原因纷纷开战…...

【Android】Android中继承Activity、Application和AppCompatActivity的区别

在 Android 开发中&#xff0c;Activity、Application 和 AppCompatActivity 是三个重要的类&#xff0c;它们各自有不同的作用和用途&#xff1a; 1. Activity Activity 是 Android 应用中的一个核心组件&#xff0c;代表了用户界面上的一个单一屏幕或交互界面。每个 Activi…...

SQLite 可以随可执行文件部署在用户机器吗

答案是&#xff1a;可以的。 sqlite 本身就是嵌入式的SQL数据库引擎&#xff0c;不需要单独的服务器进程。sqlite 直接读取和写入普通磁盘文件&#xff0c;sqlite 的整个数据库&#xff08;所有表、索引、触发器等&#xff09;都包含在单个磁盘文件中。所以 sqlite 很适合开发…...

大模型的开源不同于传统的开源软件

大模型的开源与传统的开源软件往往有一些不同之处&#xff0c;主要体现在以下几个方面&#xff1a; 数据和许可证的复杂性&#xff1a; 数据依赖性&#xff1a; 大模型通常需要大量的数据来进行训练&#xff0c;这些数据可能来自各种来源&#xff0c;包括公共数据集、专有数据集…...

基于PHP+MySql的留言管理系统的设计与实现

功能概述 网页留言板管理系统&#xff0c;用户层面分为普通用户和管理员&#xff0c;并设权限&#xff08;即后台留言管理系统普通用户不能访问&#xff0c;别人的留言自己不可以修改删除&#xff0c;未登录不能使用留言功能&#xff09;&#xff0c;功能包括用户登录注册、留…...

单目标应用:基于吸血水蛭优化器(Blood-Sucking Leech Optimizer,BSLO)的微电网优化(MATLAB代码)

一、微电网模型介绍 微电网多目标优化调度模型简介_vmgpqv-CSDN博客 参考文献&#xff1a; [1]李兴莘,张靖,何宇,等.基于改进粒子群算法的微电网多目标优化调度[J].电力科学与工程, 2021, 37(3):7 二、吸血水蛭优化器求解微电网 2.1算法简介 吸血水蛭优化器&#xff08;B…...

嵌入式工程师从0开始,到底该学什么,怎么学

在开始前刚好我有一些资料&#xff0c;是我根据网友给的问题精心整理了一份「嵌入式的资料从专业入门到高级教程」&#xff0c; 点个关注在评论区回复“666”之后私信回复“666”&#xff0c;全部无偿共享给大家&#xff01;&#xff01;&#xff01;嵌入式是个大筐&#xff0…...

Redis-集群-环境搭建

文章目录 1、清空主从复制和哨兵模式留下的一些文件1.1、删除以rdb后缀名的文件1.2、删除主从复制的配置文件1.3、删除哨兵模式的配置文件 2、appendonly修改回no3、开启daemonize yes4、protect-mode no5、注释掉bind6、制作六个实例的配置文件6.1、制作配置文件redis6379.con…...

ITSG、COST-G、Tongji和WHU Level-2数据产品读取绘图(Matlab)

数据介绍&#xff1a; ICGEM International Center for Global Gravity Field Models (gfz-potsdam.de) ITSG 2018&#xff1a;Institute of Geodesy at Graz University of Technolog&#xff08;格拉茨理工大学大地测量研究所&#xff09; 2018版本&#xff0c;最高60阶球谐…...

TSN网络仿真入门:除了OMNeT++,这几个开源框架(NeSTiNg/CoRE4INET)到底该怎么选?

TSN网络仿真框架深度选型指南&#xff1a;从OMNeT生态到实战避坑 引言&#xff1a;当TSN遇见仿真工具丛林 在工业自动化与车载网络领域&#xff0c;时间敏感网络(TSN)正成为实时通信的基础设施。但部署前的验证环节往往让研究者陷入两难——直接搭建物理测试床成本高昂&#xf…...

【鸿蒙 HarmonyOS】从零到一:Node.js 环境配置与 DevEco Studio 无缝对接指南

1. 为什么需要Node.js环境&#xff1f; 如果你刚刚接触鸿蒙开发&#xff0c;可能对DevEco Studio里弹出的"Node.js not found"提示感到困惑。其实Node.js在鸿蒙生态中扮演着重要角色——它不仅是npm包管理器的运行环境&#xff0c;更是鸿蒙应用编译工具链的基础依赖。…...

nv-context:开发者必备的上下文管理工具,提升开发效率与团队协作

1. 项目概述&#xff1a;一个为开发者量身定制的上下文管理工具 如果你是一名开发者&#xff0c;尤其是在处理大型项目、复杂配置或者需要频繁切换工作环境时&#xff0c;一定对“上下文”这个概念又爱又恨。爱的是&#xff0c;它能帮你隔离环境、管理配置&#xff0c;让项目井…...

手把手调SerDes眼图:从FFE系数到示波器实测,看懂那个‘翘起来’的信号

手把手调SerDes眼图&#xff1a;从FFE系数到示波器实测&#xff0c;看懂那个‘翘起来’的信号 在高速数字电路设计中&#xff0c;SerDes&#xff08;串行器/解串器&#xff09;技术已经成为现代通信系统的核心。当信号速率突破10Gbps大关时&#xff0c;工程师们常常会在示波器上…...

ARM GIC中断控制器分组机制与安全配置详解

1. GIC中断控制器基础架构解析在ARM架构的嵌入式系统中&#xff0c;通用中断控制器&#xff08;Generic Interrupt Controller&#xff0c;GIC&#xff09;扮演着系统中断管理的核心角色。作为连接外设中断与CPU之间的桥梁&#xff0c;GIC的设计直接影响着系统的实时性、安全性…...

【故障诊断】DSCNN-HA-TL:融合Swin窗口注意力和全局注意力机制的变工况轴承故障诊断(迁移学习/小样本)

在工业旋转机械中&#xff0c;滚动轴承是最关键、也最容易发生故障的部件之一。然而&#xff0c;变工况、故障样本稀缺、跨域泛化能力差三大难题&#xff0c;长期制约着故障诊断模型的落地效果。 近期&#xff0c;来自河北工程大学、天津大学等机构的研究团队提出了一种全新的…...

【C语言之 CJson】从零到一:构建与解析JSON的实战指南

1. 为什么C语言需要处理JSON数据 在物联网设备和嵌入式系统开发中&#xff0c;JSON已经成为事实上的数据交换标准。我去年参与的一个智能家居项目就深有体会&#xff1a;设备配置、状态上报、控制指令全都采用JSON格式传输。用C语言处理这些数据时&#xff0c;手动拼接字符串不…...

FRED应用:导入列表形式的BSDF数据

简介在FRED中&#xff0c;列表形式的BSDF数据可以使用如下两种方式。1. 按照FRED可以识别的数据格式直接导入作为散射模型。2. 使用BSDF数据拟合工具来产生合适的函数模型。数据文件的格式在FRED中能被识别的测试数据必须按照如下的规格形式。数据文件的开头包含两行&#xff0…...

技术管理者最痛:如何让团队从“要我做”变成“我要做”?

在软件测试领域&#xff0c;技术管理者常常陷入一种无形的焦虑&#xff1a;测试用例的执行越来越像机械的流水线&#xff0c;回归测试变成了纯粹的体力劳动&#xff0c;而探索性测试和深度质量分析这些真正有价值的活动&#xff0c;却总是无人主动认领。你尝试过推行自动化覆盖…...

气体放电管实战指南:从关键参数到电路防护的精准匹配

1. 气体放电管&#xff1a;电路防护的"安全气囊" 第一次接触气体放电管时&#xff0c;我就被它简单却巧妙的设计所吸引。这玩意儿就像汽车的安全气囊——平时默默无闻&#xff0c;关键时刻却能救你一命。气体放电管&#xff08;GDT&#xff09;本质上是个陶瓷或玻璃…...