Vue-cli搭建项目----基础版

        什么是Vue-cli

        全称:Vue command line interface 是一个用于快速搭建Vue.js项目的标准工具,他简化了Vue.js应用的创建和管理过程,通过命令工具帮助开发者快速生成,配置和管理Vue项目.

主要功能

  1. 同一的目录结构
  2. 本地调试
  3. 热部署
  4. 单元测试
  5. 集成打包上线

具体操作

第一步创建项目:

 下一步会看到

下一步打开此项目Vue-test的终端

出现此样式

        1, 如果终端打开没有任何显示,点击上方的工具->点击插件安装->点击卸载内置终端->点击安装插件->点击安装内置终端.

        2,如果还是没有显示,则重装Hbuilder,并将他直接安装到D盘根目录下,应该可以解决此类问题.

继续在终端输入

npm run serve

代表启动项目,出现此类点击网址跳转到此页面表示成功,

 思考:为什么会跳转到此页面

        先看唯一的html文件

        找到其中唯一的id为app的组件后发现

        App组件内有其他的组件HelloWorld.vue,这就是组件中挂有其他组件 

         打开唯一对外的main.js文件,发现

        所以当点击运行完毕的项目地址后,会进入到Vue组件中和vue组件挂载的helloWorld组件中.

在简单的项目中,像上述一样,直接将组件挂载到Vue的实例上是可以的,但是,在复杂的应用中,Vue-router 提供了更强大和灵活的路由管理功能.

Vue-router

下面开始使用vue-router来搭建项目.

思路创建自己的组件,首先删除官方提供的HelloWorld的组件

App.vue中删除的如下

总项目中删除的

        接下来开始搭建自己的路由组件,

第一步:下载vue router 路由组件---这个是Vue.js的路由管理器,可以使得单页面应用变得易如反掌.

        打开命令行工具(终端) ,先停止当前进程,ctrl+c 

        输入

        npm i vue-router@3.5.3

第二步:创建router目录----目的是同一管理路由信息

在src中创建router目录在目录中创建index.js文件,并在其中配置路由信息

import Vue from 'vue';
import router from 'vue-router'; /* 导入路由*/

第一行是导入vue.js文件,

第二行导入刚刚下载的路由插件包

继续输入

Vue.use(router)

通过Vue.use()方法将插件添加到Vue实例中,所有的Vue组件都能够访问到路由功能 

 如图所示

第三部:创建自己的组件

 创建两个vue组件 Login和Main

两个如图所示(这里的两个登陆都要包含在div标签中,因为一个组件至少要有一个根目录)

        这是我们自己写的组件,如何将自己写的组件挂载到App组件上呢,这时候vue-router这个路由管理工具就起作用了.

前提是将此组件导出导出

第四步:导出组件信息

// 导出组件
export default {// 定义组件中的数据data() {return {name: "jim",age: 20};},methods: {// 方法可以在这里定义}
};

两个自定义的组件如图所示:

 导出组件后,我们就可以在router(路由)/index配置路由信息了 

第五步配置路由信息

     将刚刚导出的组件导入进来

import Login from '../Login.vue';
import Main from '../Main.vue';

然后注册我们自己的组件的访问地址

var rout = new router({routes: [{path:'/',component: Login},/* 默认访问 */{path:'/login',component: Login//更上名的组件一致},{path: '/main',component: Main}
]
});

此代码是注册路由实例,然后创建一个路由数组routes,其中包含了所有的路由配置,每个路由配置项是一个对象,每个对象定义了一个路径和相应的组件,其中组件和上面的import导入的组件名要一致

如图所示

 第六步:在mian.js中配置路由

 同样的我们就可以在我们自己的组件中使用路由来访问另一个组件

 可以通过router-link标签的to属性访问我们定义导出组件的地址,比如如图Login组件访问Main组件

        最后的最后在App.vue中添加router-view标签,使得我们自己定义的标签,挂载在App.vue组件上可以显示出来,如图所示

OK,完毕运行检查,在控制台输入

npm run serve

就可以看到如图所示效果 

完毕 .

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

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

相关文章

【小学期】本地安装SQL并测试

1. 什么是SQL? SQL,全称为 Structured Query Language,即结构化查询语言。它是一种用于管理和操作关系型数据库的标准化编程语言。SQL 语言主要用于以下几个方面: 数据查询(Data Query):检索数…

Memcached add 命令

Memcached add 命令 Memcached 是一种高性能的分布式内存对象缓存系统,通常用于缓存数据库调用、API响应或页面渲染结果,以减少服务器负载并加快访问速度。add 命令是 Memcached 中用于添加新键值对的基本命令之一。 命令语法 Memcached add 命令的基本语法如下: add ke…

第三届人工智能、物联网与云计算技术国际会议(AIoTC 2024)

第三届人工智能、物联网与云计算技术国际会议(AIoTC 2024)将于2024年9月13日-15日在中国武汉举行。本次会议由华中师范大学伍伦贡联合研究院与南京大学联合主办、江苏省大数据区块链与智能信息专委会承办、江苏省概率统计学会、江苏省应用统计学会、Sir Forum、南京理工大学、南…

备战秋招day5

算法 344. 反转字符串 class Solution {public void reverseString(char[] s) {//拿一个中间变量来承载即可int l 0;int r s.length-1;while(l<r){char tmp s[l];s[l] s[r];s[r] tmp;l;r--;}} } 541. 反转字符串 II class Solution {public String reverseStr(Strin…

西门子智能电气阀门定位器在冶金生产控制的应用

西门子智能电气阀门定位器在冶金生产控制的应用 1 前 言 在自动化程度越来越高的冶金行业中 ,调节阀起着至关重要的作用,一旦其发生故障, 轻则出现生产事故,停机,停炉影响各级生产指标,生产任务,影响装置的安全运行。重则可能出现人身安全事故,将直接影响家庭的幸福和企…

数字经济时代的网络安全:挑战与对策

随着数字经济的蓬勃发展&#xff0c;网络安全已成为数字中国建设的重要基础。本文分析了网络安全在数字经济中的关键作用&#xff0c;面临的挑战&#xff0c;以及新时代下筑牢网络安全屏障的对策建议。 在数字经济高速发展的背景下&#xff0c;网络安全的重要性日益凸显。网络…

Android SurfaceFlinger——动画进程销毁(十七)

在动画播放完成后&#xff0c;对动画相关资源释放的同时还需要销毁动画进程。这里我们就来分析一下动画进程的销毁流程。 一、动画进程销毁 动画进程的销毁一般是在桌面进程准备显示的时候&#xff0c;而桌面准备显示是在桌面 Activity 的 Resume 生命周期&#xff0c;我们来看…

MySQL语句大全,面试官也难不倒我了。。。

MySQL查询语句全解 公众号&#xff1a;阿Q技术站 文章目录 MySQL查询语句全解一、条件查询1. 基本 SELECT 语句2. 使用 WHERE 子句进行条件查询3. 常用的条件运算符4. 使用 AND 和 OR 组合条件5. 使用 IN 和 BETWEEN6. 使用 LIKE 进行模糊查询7. 使用 IS NULL 和 IS NOT NULL…

网络安全--安全设备(三)IPS

IPS入侵防御系统 一、IPS基础&#xff08;1&#xff09;IPS是什么&#xff1f;&#xff08;2&#xff09;入侵防御系统&#xff08;IPS&#xff09;的底层原理&#xff08;3&#xff09;IPS工作流程&#xff08;4&#xff09;IPS威胁防范方法&#xff08;6&#xff09;IPS和IDS…

美团校招机试 - 小美的平衡矩阵(20240309-T1)

题目来源 美团校招笔试真题_小美的平衡矩阵 题目描述 小美拿到了一个 n * n 的矩阵&#xff0c;其中每个元素是 0 或者 1。 小美认为一个矩形区域是完美的&#xff0c;当且仅当该区域内 0 的数量恰好等于 1 的数量。 现在&#xff0c;小美希望你回答有多少个 i * i 的完美…

redis哨兵模式(Redis Sentinel)

哨兵模式的背景 当主服务器宕机后&#xff0c;需要手动把一台从服务器切换为主服务器&#xff0c;这就需要人工干预&#xff0c;费事费力&#xff0c;还会造成一段时间内服务不可用。这不是一种推荐的方式。 为了解决单点故障和提高系统的可用性&#xff0c;需要一种自动化的监…

固态硬盘与机械硬盘之间的区别

固态硬盘与机械硬盘之间有哪些方面的区别呢&#xff1f; 固态硬盘和机械硬盘在容量方面就有着一定的区别&#xff0c;固态硬盘主要是半导体存储&#xff0c;通常是直接存储在闪存颗粒当中&#xff0c;因为每个闪存颗粒的容量是有限的&#xff0c;所以固态硬盘的存储容量相对小一…

暑假本科生、研究生怎么学?来看详细的AI夏令营规划

Datawhale夏令营 发布&#xff1a;2024 AI 夏令营 学习规划 「学习内容详览」 01机器学习方向&#xff1a;2024/7/1~7/7 「Datawhale」邀请想入门人工智能领域并实践机器学习算法的学习者和我们一起来学习~ 详细学习规划如下&#xff1a; 02大模型技术方向&#xff1a;2024/7…

基于springboot、vue汽车租赁系统

设计技术&#xff1a; 开发语言&#xff1a;Java数据库&#xff1a;MySQL技术&#xff1a;SpringbootMybatisvue工具&#xff1a;IDEA、Maven、Navicat 主要功能&#xff1a; 用户进入系统可以查看首页、个人中心、车辆信息管理、租赁订单列表管理、还车记录管理等操作 管理…

SAP-创建预留和采购申请

METHOD zyc_ii_si_data_dump_in~si_data_dump_in. "反馈 DATA: output_hd TYPE zmmi005_dt_mesg_hd, output_body TYPE zun_dt_un_resp_msgbd_tab, output_line TYPE zun_dt_un_resp_msgbd. DATA: r_obj TYPE REF TO zun_co_si_un_resp_out, out TYPE zun_mt_un_resp. * T…

串级PID控制算原理及法详解

文章目录 1. PID 2. 串级PID 3. 串级PID的物理量 4. C语言实现单极PID 5. C语言实现串极PID 6. 模拟仿真 1. PID PID是应用最广泛的闭环控制方法之一&#xff0c;是一种常用的反馈控制方法&#xff0c;对于每个PID控制器由三个部分组成&#xff1a;比例控制&#xff08;…

自然语言处理——英文文本预处理

高质量数据的重要性 数据的质量直接影响模型的性能和准确性。高质量的数据可以显著提升模型的学习效果&#xff0c;帮助模型更准确地识别模式、进行预测和决策。具体原因包括以下几点&#xff1a; 噪音减少&#xff1a;高质量的数据经过清理&#xff0c;减少了无关或错误信息…

Wp-scan一键扫描wordpress网页(KALI工具系列三十)

目录 1、KALI LINUX 简介 2、Wp-scan工具简介 3、信息收集 3.1 目标IP&#xff08;服务器) 3.2kali的IP 4、操作实例 4.1 基本扫描 4.2 扫描已知漏洞 4.3 扫描目标主题 4.4 列出用户 4.5 输出扫描文件 4.6 输出详细结果 5、总结 1、KALI LINUX 简介 Kali Linux 是一…

《梦醒蝶飞:释放Excel函数与公式的力量》6.1 DATE函数

6.1 DATE函数 第一节&#xff1a;DATE函数 1&#xff09;DATE函数概述 DATE函数是Excel中的一个内置函数&#xff0c;用于根据指定的年、月、日返回对应的日期序列号。这个函数非常有用&#xff0c;尤其是在处理日期数据时&#xff0c;它可以帮助你构建特定的日期&#xff0…

pycharm工具回退键调出

pycharm工具调出回退键。 View->Appearance->Toolbar,即可调出 调不出的可以使用快捷键&#xff1a;ctrlalt向左箭头 但是这个快捷键容易和电脑屏幕旋转冲突。可将电脑的快捷键关掉&#xff0c;即可。 ctrlalt向上箭头&#xff1a;将屏幕旋转到正常&#xff08;横向&am…