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.hqwc.cn/news/439066.html

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

相关文章

禅道添加自定义字段

1&#xff0c;数据库表 zt_story 添加自定义字段 bakDate1&#xff0c;bakDate2&#xff0c;bakDate3&#xff0c;bakDate4 2&#xff0c;在 /opt/lampp/htdocs/zentaopms/extension/custom/story/ext/config 中添加bakDate.php文件 <?php $config->story->datatab…

ARCGIS PRO SDK 数据库属性域设置与获取

一、数据库创建属性域。 sdk3.1 以下的开发版本不支持&#xff0c;不能使用 Pro SDK 向域添加新的编码值&#xff0c;可以使用地理处理工具&#xff1a; 创建属性域 Dim va As IReadOnlyList(Of String) Dim gpResult As ArcGIS.Desktop.Core.Geoprocessing.IGPResult Dim env…

Qt应用软件【协议篇】Modbus详细介绍

文章目录 概述Modbus 485协议概述在工业自动化中的应用 通信模式数据模型功能码 Modbus RTU示例 1&#xff1a;读取保持寄存器示例 2&#xff1a;写入单个线圈示例 3&#xff1a;写入多个保持寄存器报文传输 Modbus ASCII报文示例报文传输 Modbus TCP报文示例报文传输 概述 在…

力扣(leetcode)第118题杨辉三角(Python)

118.杨辉三角 题目链接&#xff1a;118.杨辉三角 给定一个非负整数 numRows&#xff0c;生成「杨辉三角」的前 numRows 行。 在「杨辉三角」中&#xff0c;每个数是它左上方和右上方的数的和。 示例 1: 输入: numRows 5 输出: [[1],[1,1],[1,2,1],[1,3,3,1],[1,4,6,4,1]] …

腾讯云Linux(OpenCloudOS)安装tomcat9(9.0.85)

腾讯云Linux(OpenCloudOS)安装tomcat9 下载并上传 tomcat官网 https://tomcat.apache.org/download-90.cgi 下载完成后上传至自己想要放置的目录下 解压文件 输入tar -xzvf apache-tomcat-9.0.85.tar.gz解压文件&#xff0c;建议将解压后的文件重新命名为tomcat,方便后期进…

网络空间搜索引擎

随着互联网、物联网、传感网、社交网络等信息系统所构成的泛在网络不断 发展&#xff0c;网络终端设备数量呈指数级上升。这为企业进行终端设备资产清点和统一 管控带来了巨大挑战&#xff0c;同时也引发了一系列安全问题&#xff0c;网络攻击与防御的博弈从 单边代码漏洞发展到…

Web 开发 9:Django 框架基础

在本篇文章中&#xff0c;我们将深入探讨 Django 框架的基础知识。Django 是一个功能强大且流行的 Python Web 框架&#xff0c;它提供了一套完整的工具和功能&#xff0c;用于开发高效、可扩展的 Web 应用程序。 什么是 Django&#xff1f; Django 是一个基于 Python 的免费…

【CMU-自主导航与规划】M-TARE planner 配置与运行

M-TARE docker M-TARE 源码 一、依赖 Docker, Docker Compose, NVIDIA Container Toolkit, Nvidia GPU Driver&#xff08;需要至少2个&#xff0c;带Nvidia GPU&#xff09; 1.1 Docker docker -v #查询版本1.2 Docker Compose docker compose version1.3 …

【RT-DETR改进涨点】ResNet18、34、50、101等多个版本移植到ultralytics仓库(RT-DETR官方一比一移植)

👑欢迎大家订阅本专栏,一起学习RT-DETR👑 一、本文介绍 本文是本专栏的第一篇改进,我将RT-DETR官方版本中的ResNet18、ResNet34、ResNet50、ResNet101移植到ultralytics仓库,网上很多改进机制是将基础版本的也就是2015年发布的ResNet移植到ultralytics仓库中,但是其实…

数学建模学习笔记||灰色关联分析

灰色系统 信息绝对透明的是白色系统&#xff0c;信息绝对秘密的是黑色系统&#xff0c;灰色系统介于两者之间 关联分析 即系统的分析因素 包含多种因素的系统中&#xff0c;哪些因素是主要的&#xff0c;哪些因素是次要的&#xff0c;哪些因素影响大&#xff0c;哪些因素影响小…

docker+jekins+maven+ssh 持续集成交付部署 jar包

一. docker环境搭建&#xff0c;此处略过。 二. docker部署jekins 2.1 拉取镜像&#xff0c;挂载工作目录,xxxx为宿主机指定工作目录 docker pull jenkins/jenkins docker run -d -p 8080:8080 -p 50000:50000 --name jenkins --privilegedtrue -v xxxxxxxxxx:/var/jenkins…

Onvif协议5: 预置位的操作

目录 1. 介绍 2. GetPreset 3. SetPreset 4.预置位的索引 5. GotoPreset 1. 介绍 球机的云台预置位控制主要包含的内容有&#xff1a;预置位的设置、预置位的调用、预置位的删除以及预置位的名称修改等 云台预置位的设置&#xff1a;调用Onvif协议中云台预置位设置接口&a…