Vue学习之使用开发工具创建项目、gitcode管理项目

Vue学习之使用开发工具创建项目、gitcode管理项目

翻阅与学习了vue的开发工具,通过对比最终采用HBuilderX作为开发工具,以下章节对HBuilder安装与基础使用介绍

1. HBuilder 下载

从HbuildX官网(http://www.dcloud.io/hbuilderx.html)下载hbuildx安装文件(已提供,无需下载),下载后,直接解压就可以使用。
在这里插入图片描述

2.使用HBuilderx创建项目

(1)解压后直接双击运行HBuilderX.exe,打开HBuilderX窗口,选择文件->新建->项目,在打开的窗口中选择你安装的vue版本的选项,输入你的项目名称(注意不要使用中文及大小写字母混用)选择项目位置,再点击创建按钮即可

在这里插入图片描述
在创建项目时,有提示创建进度,创建完成后会给与项目[项目名称]创建成功的提示。
在这里插入图片描述

3.运行配置

右击项目文件夹选择外部命令->3运行设置,打开运行设置窗口,把npm路径修改为安装目录下的npm.cmd所在路径,node路径修改为安装目录下的node.exe所在路径,点击保存,node环境就关联好了
在这里插入图片描述
在这里插入图片描述

4.运行项目

(1)编译项目。选择外部命令->npm run build编译项目
在这里插入图片描述
在这里插入图片描述
可以看到编译过程中报错了,由于博主使用的最新版本,修改package.json中scripts的内容,保存后可直接在终端-外部命令中输入npm run build命令重新编译,图2为编译成功输出
在这里插入图片描述
图1
在这里插入图片描述
图2
(2)运行项目。选择外部命令->npm run serve运行项目,启动完成后,终端会提示本地访问和访问地址,
在这里插入图片描述
直接点击链接或者复制到浏览器中打开如下图:

在这里插入图片描述
默认端口号为8080,若想更改端口号,修改package.json中的scripts在serve内容中加 --port 端口号即可

 "scripts": {"serve": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --port 8089","build": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build"},

5. 版本管理

HBuilder中支持托管到git平台,请在操作之前确保安装git环境及gitcode账号
(1)右击项目文件夹,选择“托管项目到GIT平台”点击托管
在这里插入图片描述
在这里插入图片描述
托管完成后可访问https://gitcode.net/查看您的项目及添加成员相关操作
在这里插入图片描述
其他成员可根据地址拉取项目,在执行新建操作时选择从Git导入项目
在这里插入图片描述
在这里插入图片描述
以上简述HBuilderX 对vue项目创建与使用

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

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

相关文章

制作OpenSSH 9.6 for openEuler 22.03 LTS的rpm升级包

OpenSSH作为操作系统底层管理平台软件,需要保持更新以免遭受安全攻击,编译生成rpm包是生产环境中批量升级的最佳途径。本文在国产openEuler 22.03 LTS系统上完成OpenSSH 9.6的编译工作。 一、编译环境 1、准备环境 基于vmware workstation发布的x86虚…

23种设计模式-结构型模式

1.代理模式 在软件开发中,由于一些原因,客户端不想或不能直接访问一个对象,此时可以通过一个称为"代理"的第三者来实现间接访问.该方案对应的设计模式被称为代理模式. 代理模式(Proxy Design Pattern ) 原始定义是:让你能够提供对象的替代品或其占位符。…

复杂链表的复制

作者简介:大家好,我是smart哥,前中兴通讯、美团架构师,现某互联网公司CTO 联系qq:184480602,加我进群,大家一起学习,一起进步,一起对抗互联网寒冬 学习必须往深处挖&…

电磁波的波长与频率是什么关系?

摘要: 电磁波的波长(λ)与频率(f)之间的关系可以通过以下公式来表示: f c/λ cλf 其中: c 是光速,即电磁波在真空中的传播速度,约为 3 x 10⁸ 米/秒(m/s)λ…

2024.1.26每日一题

LeetCode 边权重均等查询 2846. 边权重均等查询 - 力扣(LeetCode) 题目描述 现有一棵由 n 个节点组成的无向树,节点按从 0 到 n - 1 编号。给你一个整数 n 和一个长度为 n - 1 的二维整数数组 edges ,其中 edges[i] [ui, vi,…

三方jar包引入到springboot中 package到jar中正常启动的pom文件怎么写 IDEA

文章目录 场景例子工程引用pom文件(打包关键)打包后观察 场景 许多时候我们在对接三方的时候,需要下载官方的推荐的SDK,但springboot项目怎么引入额外的三方jar包了,自已通过maven本地坐标的方式尝也不行,…

【-快速录用】2024年大数据经济与社会文化国际学术会议(ICBDESC 2024)

【-快速录用】2024年大数据经济与社会文化国际学术会议(ICBDESC 2024) 2024 International Conference Big Data Economy and Social Culture 一、【会议简介】 随着大数据技术的飞速发展,全球范围内对大数据经济与社会文化的研究愈发深入。为了促进国际间学术交流…

PageHelper分页插件-以三层架构模型开发为例

文章目录 1、简介2、使用2.1、导入2.1.1、SpringBoot2.1.2、非SpringBoot 2.2、controller2.3、service2.4、mapper ​🍃作者介绍:双非本科大三网络工程专业在读,阿里云专家博主,专注于Java领域学习,擅长web应用开发、…

Shell中正则表达式

1.正则表达式介绍 1、正则表达式---通常用于判断语句中,用来检查某一字符串是否满足某一格式 2、正则表达式是由普通字符与元字符组成 3、普通字符包括大小写字母、数字、标点符号及一些其他符号 4、元字符是指在正则表达式中具有特殊意义的专用字符&#xff0c…

企业级大数据安全架构(六)数据授权和审计管理

作者:楼高 本节详细介绍企业级大数据架构中的第六部分,数据授权和审计管理 1.Ranger简介 Apache Ranger是一款被设计成全面掌管Hadoop生态系统的数据安全管理框架,为Hadoop生态系统众多组件提供一个统一的数据授权和管理界面, 管…

蓝桥杯2024/1/28----十二届省赛题笔记

题目要求: 2、 竞赛板配置要求 2.1将 IAP15F2K61S2 单片机内部振荡器频率设定为 12MHz。 2.2键盘工作模式跳线 J5 配置为 KBD 键盘模式。 2.3扩展方式跳线 J13 配置为 IO 模式。 2.4 请注意 : 选手需严格按照以上要求配置竞赛板,编写和调…

APT32F1023X 发送RF433处理

1.硬件电路--CMT2110A 需要注意:发射端MCU写数据的频率要匹配,如果MCU发送中时间最小脉宽是1MS,那么它的发送需要设置为1kbps。 通过华普微USB调试工具PC软件RFPDK_V1.55查看设置是否正确。 2.RF433发送 用到的发送和接收代码来自“无线433发…

Matlab基础语法

基础语法 %% Matlab基本的小常识 % (1)在每一行的语句后面加上分号(一定要是英文的哦;中文的长这个样子;)表示不显示运行结果 a 3; a 5% (2)多行注释:选中要注释的若干语句,快捷键CtrlR % a 3; % a 5% (3)取消注释:选中要取消注释的语句,快捷键CtrlT % 我想要取…

【机器学习300问】20、什么是神经网络?和深度学习什么关系?

在学习深度学习的相关知识之前,我们首先得了解什么是神经网络,解开神经网络的神秘面纱后,什么是深度学习的问题也就迎刃而解。我依旧会采用我习惯的方式:先给出例子直观理解,在给出定义深入理解,最后在实际…

Ubuntu 系统如何修改时间

Ubuntu 系统如何修改时间 简介:在Ubuntu上,你可以使用以下三种方法来修改时间:date命令,timedatectl命令和hw 原文:Ubuntu 系统如何修改时间 (baidu.com)https://cloud.baidu.com/article/393621 三种方法修改Ubunt…

ES6.8.6 Java客户端发起 增删改查 query (bool)、update、delete

文章目录 环境测试数据增单个新增批量新增 删通过delete by api删除通过delete by query api删除删除索引中指定字段(script) 改单个修改update by api通过_bulk批量修改批量修改update by query api使用script脚本修改 查完全匹配(term&…

Android Studio 下载安装配置使用入门【2024年最新】

前言: Android Studio 是谷歌官方提供的主要集成开发环境(IDE),专为 Android 平台应用开发而设计。它基于 JetBrains 的 IntelliJ IDEA 软件,并在此基础上增加了大量针对 Android 开发的定制功能。Android Studio 通过…

基于Vue uniapp和java SpringBoot的汽车充电桩微信小程序

摘要: 随着新能源汽车市场的迅猛发展,汽车充电桩的需求日益增长。为了满足市场需求,本课题开发了一款基于Java SpringBoot后端框架和Vue uniapp前端框架的汽车充电桩微信小程序。该小程序旨在为用户提供一个简洁高效的充电服务平台&#xff0…

计算机视觉:高级图像处理,满足您的所有需求。

一、说明 特征提取是机器学习管道中的关键步骤,可增强模型在不同数据集上的泛化和良好表现能力。特征提取方法的选择取决于数据的特征和机器学习任务的具体要求。本文揭示图像处理的数学原理,实现增强的计算机视觉 二、关于计算机视觉的普遍问题 在计算机…

pytest框架的基本使用

1. 测试框架的作用 测试框架不关系用例的内容 它关心的是:用例编排和结果收集 2. pytest框架的特点 1. 适用于python语言 2. 用法符合python风格 3. 有丰富的生态 3. 安装pytest框架 1. 新建一个项目 2. 在项目终端窗口输入如下命令,用于安装py…