HBuilder X中配置vue-cli项目和UI库

目录

 一.前端项目结构

二.在HBuilder X中搭建vue-cli项目

1. 安装node.js前端环境

2. HBuilder X创建一个vue-cli项目 

3. vue-cli项目结构

4. 如何运行前端项目

5. 创建组件

6. 组件路由(页面跳转)

6.1 创建router目录

6.2 使用路由

6.3 在main.js中配置路由

6.4 路由嵌套

三. 解决npm下载依赖很慢

四. Vue-cli项目中导入ElementUI框架 

1. 使用命令下载ElementUI依赖

2. 在main.js文件中导入ElementUI

3. 测试是否配置成功


 一.前端项目结构

传统的前端项目结构:一个项目中有很多HTML文件,一个HTML文件表示一个网页,他们之间彼此独立,互相没有联系,我们每次导入其它前端文件时,需要给每一个HTML文件都导入,需要导入的文件一旦过多,就会很麻烦,并且整体看来很乱

现代的前端项目结构:在一个node环境中构建项目(类似于后端的maven),前端改为单页面结构,只有一个HTML文件,所有的配置都是基于这一个HTML文件进行配置,只需要配置一次即可.但是可以有很多的.vue文件,这些不再是一个网页,而是被称为一个组件,需要显示不同的内容时,只需要切换组件即可

二.在HBuilder X中搭建vue-cli项目

1. 安装node.js前端环境

node.js是一个前端运行的环境,可以为前端开发提供服务

下载地址:

https://nodejs.org/en/download

这里注意不勾选,其他的无脑下一步即可,尽量安装到没有中文的路径中,之后打开命令提示符,进行测试,如下,即完成安装

2. HBuilder X创建一个vue-cli项目 

注意:因为学的是vue2,所以选择3.6.10版本,第一次创建可能比较慢,要下载很多的依赖,创建完成后,会显示创建成功

3. vue-cli项目结构

4. 如何运行前端项目

补充(如何下载项目中依赖的组件):我们一般在网上下载的前端项目是没有node_modules文件夹的,因为这里面包含的是项目所依赖的外部组件文件,并且该文件夹占用的空间较大,我们可以通过node.js中的命令(类似于maven中的pom.xml文件)来从远程仓库中自己下载,所以不需要别人打包发过来,这样既省空间,又节约时间,该命令是npm install可以下载安装外部依赖组件

项目运行:我们可以打开HBuilder X的终端,输入命令npm run serve

终止项目:ctrl+c

打包项目: npm run build

5. 创建组件

在vue-cli项目的src文件夹下创建一个.vue文件,这里面可以用来写组件(网页)的相关内容

<!--该标签用于写HTML代码,必须有一个根标签,如下<div>是根标签-->
<template> <div>登录</div>
</template><!--该标签用于写js代码,下面是固定格式return里写数据,methods里写函数-->
<script>export defaults{data(){return{}},methods:{}}
</script><!--该标签用于写css和之前一样-->
<style></style>

当我们项目中的组件太多时,建议创建一个名为views的文件夹专门用来管理我们的组件

 

6. 组件路由(页面跳转)

6.1 创建router目录

在src文件夹下创建router文件夹,并在router文件夹里创建一个index.js文件,在index.js文件中配置路由

配置路由主要是把自己定义的.vue文件(即组件)导入到index.js文件中,并为每个组件配置一个访问地址

1.导入vue

import Vue from 'vue';

2.删除package-lock文件 

npm config set package-lock false

使用这个命令以后生成的vue-cli项目中就不会有package-lock这个文件,记得还要删除当前项目中的package-lock这个文件, 因为这个文件中有一些其他版本号的文件,有可能会导致版本不支持等问题,所以建议删除

3.下载vue-router

由于要对组件进行页面跳转就要导入vue-router,但我们没有vue-router这个组件所以要先下载,通过下面语句在终端中执行可以下载vue-router

npm i vue-router@3.5.3

下载成功后在package.json文件中会有新的依赖版本号导入

4.导入路由

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

5.导入其他组件

<!--login是你创建组件的组件名,也就是.vue文件的文件名,创建了几个就导入几个-->
<!--
'../views/login'是.vue文件的路径,两个点表示的是回退到上级目录
因为.js文件在router文件中,而我们要导入的组件(.vue文件)和router在一级
所以要回退到.router目录中
-->
import login from '../views/login'; /* 导入其他组件 */

注意:

(1)login是你创建组件的组件名,也就是.vue文件的文件名,创建了几个就导入几个


(2)'../views/login'是.vue文件的路径,两个点表示的是回退到上级目录因为.js文件在router文件中,而我们要导入的组件(.vue文件)和router在一级,所以要回退到.router目录中

 6.注册,定义组件访问地址

/*  注册  定义组件访问地址  */Vue.use(router);

7.为组件路由定义地址

/* 定义组件路由 */var rout = new router({routes: [{path: '/index',component: Index},{path: '/login',component: Login},{path: '/reg',component: Reg}]
});

 注意:

(1)path:为组件路由定义访问地址,这个地址以/开始,名字可以任意取,建议和.vue文件(组件)名相同,但是是以小写字母开头

(2)component:这个是和你.vue文件(组件)的名字完全一致,大小写也一致

8. 导出路由对象

export default rout;

 default后面的名字和你上一步为组件路由定义访问地址时new router对象的名字一致

以上所有步骤做完后,index.js文件中应该是这样

6.2 使用路由

在你要访问的第一个页面中为内容添加跳转链接

<div>首页<router-link to="/login">登录</router-link><router-link to="/reg">注册</router-link>
</div>

6.3 在main.js中配置路由

在main.js中将刚才配置好的index.js文件导入进去,并将,router对象绑定到全局唯一的vue对象中

<!--路径中一个点表示同级目录下-->
import router from './router/index.js'Vue.use(router);new Vue({el: '#app',router,render: h => h(App)})

 最后在终端使用npm run serve启动项目,如果出现访问地址则表示配置成功

6.4 路由嵌套

当我们想在一个组件中显示另外的组件,就要用到路由嵌套

{path: '/main',component: Main, //路由嵌套 在main下面的嵌套子路由children:[{path:"/admin",component:Admin}]
}

就是定义一个children属性在你想要嵌套的主路由中,并在children属性中对子路由的地址进行配置 

 

三. 解决npm下载依赖很慢

我自己在用 npm下载外部依赖时,总是会一直卡住,这是因为npm默认的下载路径是国外的,这就导致我们在下载依赖时会从国外的仓库中下载,导致速度很慢,甚至卡住不动,这时我们就需要跟换nom的下载源,切换至淘宝镜像

1.设置最新的淘宝镜像

npm config set registry https://registry.npmmirror.com/

2.检查是否配置成功

npm config get registry

 如果显示以下信息,表示配置成功

四. Vue-cli项目中导入ElementUI框架 

1. 使用命令下载ElementUI依赖

npm i element-ui -S

当发现package.json文件中出现ElementUI版本信息时表示导入成功

2. 在main.js文件中导入ElementUI

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

将上述代码导入到main.js文件中

3. 测试是否配置成功

在官网找一个组件导入你创建的.vue文件(组件)中的<template></template>标签中,测试效果

运行项目,看浏览器效果,表示配置成功

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

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

相关文章

【IoTDB 线上小课 05】时序数据文件 TsFile 三问“解密”!

【IoTDB 视频小课】持续更新&#xff01;第五期来啦~ 关于 IoTDB&#xff0c;关于物联网&#xff0c;关于时序数据库&#xff0c;关于开源... 一个问题重点&#xff0c;3-5 分钟详细展开&#xff0c;为大家清晰解惑&#xff1a; IoTDB 的 TsFile 科普&#xff01; 了解了时序数…

安卓adb shell top 命令的使用

adb shell top 是一个在 Android 开发中常用的命令&#xff0c;它使用 Android Debug Bridge (adb) 来运行 top 命令&#xff0c;这通常用于监视 Android 设备上的进程和系统资源使用情况。 当你在命令行中输入 adb shell top 并按下回车键时&#xff0c;它会显示一个动态更新…

系统移植(三)u-boot移植 ① 相关概念

文章目录 一、u-boot概念&#xff08;一&#xff09;概念&#xff08;二&#xff09;获取u-boot源码1.从u-boot官网获取2. 从 STM官网3. 开发板厂商获取 &#xff08;三&#xff09;分析u-boot源码1. u-boot源码的目录结构2. 获取make的帮助信息3. 分析README文件 &#xff08;…

Spark核心知识要点(二)

1、Spark有哪两种算子&#xff1f; Transformation&#xff08;转化&#xff09;算子和Action&#xff08;执行&#xff09;算子。 2、Spark有哪些聚合类的算子,我们应该尽量避免什么类型的算子&#xff1f; 在我们的开发过程中&#xff0c;能避免则尽可能避免使用reduceByK…

讨逆猴子剪切板,浏览器复制失败?

讨逆猴子剪切板&#xff0c;复制失败&#xff1f; 问题&#xff1a;本地开发情况下可以直接复制&#xff0c;公网就不行了…触发了安全机制。 const link 内容;navigator.clipboard.writeText(link);报错&#xff1a; 解决方案&#xff1a; if (navigator.clipboard &&…

使用代理IP进行本地SEO优化:如何吸引附近的客户?

在今天竞争激烈的互联网时代&#xff0c;如何利用代理IP进行本地SEO优化并吸引附近的客户已经成为许多企业和网站面临的关键挑战。本文将探讨使用代理IP的策略和技巧&#xff0c;以帮助公司提高在本地市场的可见性和吸引力&#xff0c;从而扩大本地客户群体。 1. 代理IP在本地…

java算法实现-1

1. 算法编程 1&#xff1a;请编写Java代码实现实现以下逻辑与输出 &#xff1f; 题目&#xff1a;古典问题&#xff1a;有一对兔子&#xff0c;从出生后第3个月起每个月都生一对兔子&#xff0c;小兔子长到第四个月后每个月又生一对兔子&#xff0c;假如兔子都不死&#xff0c…

JAVA通过实体类注解生成测试数据

注解 package cn.ac.iscas.utils;import java.lang.annotation.ElementType; import java.lang.annotation.Retention; import java.lang.annotation.RetentionPolicy; import java.lang.annotation.Target;/*** 注解用于生成测试数据*/ Retention(RetentionPolicy.RUNTIME) T…

SpringBoot 调用外部接口的三种方式

1. 简介 SpringBoot 简化了Spring应用的搭建和开发&#xff0c;支持访问外部模块接口或URL。需求场景 如apaas开发中封装接口调用外部服务。 2. 方式一&#xff1a;使用原始httpClient请求 实现 通过get方式获取参数&#xff0c;发起流程。关键代码 将数据转换为JSON格式。使…

Windosw下Visual Studio2022编译FFmpeg(支持x264、x265、fdk-acc)

FFmpeg 7.0 版本移除了 6.0 之前已弃用的 API&#xff0c;无法向下兼容。所以编译的版本选择FFmpeg 6.1.1。 一、安装Visual Studio2022 可参考另外一篇文章&#xff1a;Windows安装Visual Studio2022 QT5.15开发环境_qt5.15.2 vs2022-CSDN博客 二、安装MSYS2 下载地址&…

lua 游戏架构 之 游戏 AI (四)ai_autofight_find_target

定义一个名为 ai_autofight_find_target 的类&#xff0c;继承自 ai_base 类。 lua 游戏架构 之 游戏 AI &#xff08;一&#xff09;ai_base-CSDN博客文章浏览阅读237次。定义了一套接口和属性&#xff0c;可以基于这个基础类派生出具有特定行为的AI组件。例如&#xff0c;可…

nfs、web与dns结合练习

1.搭建一个nfs服务器&#xff0c;客户端可以从该服务器的/share目录上传并下载文件 #服务端 1. 下载rpcbind和nfs-utils [root128 ~]# yum install rpcbind [root128 ~]# yum install nfs-utils2. 创建共享目录 [root128 ~]# mkdir /share3.编辑配置 [root128 ~]# vim /etc/ex…

大数据-50 Redis 分布式锁 乐观锁 Watch SETNX Lua Redisson分布式锁 Java实现分布式锁

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; 目前已经更新到了&#xff1a; Hadoop&#xff08;已更完&#xff09;HDFS&#xff08;已更完&#xff09;MapReduce&#xff08;已更完&am…

Docker+consul容器服务的更新与发现

1、Consul概述 &#xff08;1&#xff09;什么是服务注册与发现 服务注册与发现是微服务架构中不可或缺的重要组件。起初服务都是单节点的&#xff0c;不保障高可用性&#xff0c;也不考虑服务的压力承载&#xff0c;服务之间调用单纯的通过接口访问。直到后来出现了多个节点…

Spark实时(三):Structured Streaming入门案例

文章目录 Structured Streaming入门案例 一、Scala代码如下 二、Java 代码如下 三、以上代码注意点如下 Structured Streaming入门案例 我们使用Structured Streaming来监控socket数据统计WordCount。这里我们使用Spark版本为3.4.3版本&#xff0c;首先在Maven pom文件中导…

在 Spring Boot 中使用 Filters 实现请求过滤和预处理

​ 博客主页: 南来_北往 系列专栏&#xff1a;Spring Boot实战 什么是过滤器 过滤器&#xff08;Filter&#xff09;是一种在Web应用中用于拦截和处理HTTP请求和响应的对象。 在Java Web开发中&#xff0c;过滤器是实现特定功能&#xff0c;如认证、日志记录和字符编码处…

X-AnyLabeling标注软件使用方法

第一步 下载 官方X-AnyLabeling下载地址 github&#xff1a;X-AnyLabeling 第二步 配置环境 使用conda创建新的虚拟环境 conda create -n xanylabel python3.8进入环境 conda activate xanylabel进入X-AnyLabeling文件夹内&#xff0c;运行下面内容 依赖文件系统环境运行环…

MyBatisPlus复习

目录 自定义sql swagger工具 IService批量新增 代码生成器 DB静态工具&#xff0c;hutool工具 逻辑删除 枚举处理器 Json处理器 分页 自定义sql swagger工具 IService批量新增 代码生成器 DB静态工具&#xff0c;hutool工具 逻辑删除 枚举处理器 Json处理器 分页

ks滑块验证码逆向分析与python识别

文章目录 1. 写在前面3. 接口分析3. 算法实现 【&#x1f3e0;作者主页】&#xff1a;吴秋霖 【&#x1f4bc;作者介绍】&#xff1a;擅长爬虫与JS加密逆向分析&#xff01;Python领域优质创作者、CSDN博客专家、阿里云博客专家、华为云享专家。一路走来长期坚守并致力于Python…

大模型技术:发展历程、经典模型、微调与应用[更新中...]

文章目录 一、预训练语言模型发展历程二、经典的Pre-trained任务2.1 Masked Language Modeling2.2 Next Sentence Prediction 三、Task-specific Fine-tuning 任务3.1 Single-text Classification (单句分类)3.2 Sentence-pair Classification (句子匹配/成对分类)3.3 Span Tex…