【Vue】使用Hbuilder x开发vue前端项目

news2024/12/25 12:13:08

原文作者:我辈李想
版权声明:文章原创,转载时请务必加上原文超链接、作者信息和本声明。


文章目录

  • 一、Hbuilder x 代码风格调整
  • 1.在工具中找到设置,点击插件设置
  • 2.代开jsbeautify.js配置
  • 2.uni-app项目icon的使用


一、Hbuilder x 代码风格调整

1.在工具中找到设置,点击插件设置

在这里插入图片描述

2.代开jsbeautify.js配置

//配置文档参考:https://www.npmjs.com/package/js-beautify#options
module.exports = {
	parsers: {
		".js": "js",
		".json": "js",
		".njs": "js",
		".sjs": "js",
		".wxs": "js",
		".css": "css",
		".nss": "css",
		".wxss": "css",
		".acss": "css",
		".ttss": "css",
		".qss": "css",
		".html": "html",
		".ux": "html",
		".wxml": "html",
		".nml": "html",
		".vue": "html",
		".nvue": "html",
		".axml": "html",
		".swan": "html",
		".ttml": "html",
		".qml": "html"
	},
	options: {
		"indent_size": 4,
		"indent_char": "\t",
		"indent_with_tabs": false, //使用tab缩进
		"eol": "\r\n", //行结束符
		"end_with_newline": false, //使用换行结束输出
		"indent_level": 0, //起始代码缩进数
		"editorconfig": false,
		"preserve_newlines": true, //保留空行
		"max_preserve_newlines": null, //最大连续保留换行符个数。比如设为2,则会将2行以上的空行删除为只保留1行
		"space_in_paren": false, //括弧添加空格 示例 f( a, b )
		"space_in_empty_paren": false, //函数的括弧内没有参数时插入空格 示例 f( )
		"jslint_happy": false, //启用jslint-strict模式
		"space_after_anon_function": false, //匿名函数的括号前加空格
		"space_after_named_function":false,
    
		"brace_style": "collapse,preserve-inline", //代码样式,可选值 [collapse|expand|end-expand|none][,preserve-inline] [collapse,preserve-inline
		"unindent_chained_methods": false, //不缩进链式方法调用
		"break_chained_methods": false, //在随后的行中断开链式方法调用
		"keep_array_indentation": true, //保持数组缩进
		"unescape_strings": false, //使用xNN符号编码解码可显示的字符
		"wrap_line_length": 120,
		"e4x": false, //支持jsx
		"comma_first": false, //把逗号放在新行开头,而不是结尾
		"operator_position": "before-newline",
		"unformatted": ["wbr"],
		"html": {
			"wrap-attributes":"auto",
			"wrap-attributes-indent-size":1,
			"inline":undefined,
			"unformatted":undefined,
			"content_unformatted":undefined,
			"indent_handlebars": true,
			"indent_inner_html": true,
			"indent-scripts": "normal", //[keep|separate|normal]
			"extra_liners": [] //配置标签列表,需要在这些标签前面额外加一空白行
		},
		"css": {
			"selector-separator-newline":true,
			"newline-between-rules":false
		},
		"typescript": {
			// "convert_tabs_to_spaces":true,
			"indent_multi_line_object_literal_beginning_on_blank_line": true,
			"insert_space_after_comma_delimiter": true,
			"insert_space_after_constructor": false,
			"insert_space_after_function_keyword_for_anonymous_functions": true,
			"insert_space_after_keywords_in_control_flow_statements": true,
			"insert_space_after_opening_and_before_closing_empty_braces": true,
			"insert_space_after_opening_and_before_closing_jsx_expression_braces": false,
			"insert_space_after_opening_and_before_closing_nonempty_braces": true,
			"insert_space_after_opening_and_before_closing_nonempty_brackets": false,
			"insert_space_after_opening_and_before_closing_nonempty_parenthesis": false,
			"insert_space_after_opening_and_before_closing_template_string_braces": false,
			"insert_space_after_semicolon_in_for_statements": true,
			"insert_space_after_type_assertion": false,
			"insert_space_before_and_after_binary_operators": true,
			"insert_space_before_function_parenthesis": false,
			"insert_space_before_type_annotation": true,
			"place_open_brace_on_new_line_for_control_blocks": false,
			"place_open_brace_on_new_line_for_functions": false,
			"semicolons": "ignore",// values include "ignore" | "insert" | "remove"
			"trim_trailing_whitespace": true
		}
	}
}

需要改动的代码,一定要改keep_array_indentation,要不后边碰到数组+大括号你回烦死。

"brace_style": "collapse,preserve-inline", //代码样式,可选值 [collapse|expand|end-expand|none][,preserve-inline] [collapse,preserve-inline

"keep_array_indentation": true, //保持数组缩进

2.uni-app项目icon的使用

官方推荐是字体引入的方式,可查看参考链接:https://uniapp.dcloud.net.cn/component/uniui/uni-icons#%E4%BB%8B%E7%BB%8D

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

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

相关文章

解读逻辑输出光隔离器TLP2355(TPL,E(T 在工业自动化应用技巧

逻辑输出光隔离器是一种用于隔离电路中的逻辑信号和光信号的器件。它通常由光电耦合器和逻辑输出接口组成。 光电耦合器是一种能够将光信号转换为电信号的器件,它由一个发光二极管和一个光敏二极管组成。当发光二极管接收到电路中的逻辑信号时,它会发出…

智能在线客服系统,客户问题接待更及时

优质的客户服务可以提高客户的满意度和忠诚度,从而为企业带来更多的商业机会。智能在线客服系统,是指通过人工智能技术和自然语言处理技术,将客户的问题自动化地分配给相应的客服人员,从而实现客户问题的快速解答。相比传统的客服…

七夕节海外网红营销:助力品牌赢得全球消费者

随着全球化的进程不断加速,七夕节作为一个传统的华人节日,正逐渐走向国际舞台,成为了海外品牌开拓市场的营销新热点。近年来,海外网红已成为品牌宣传的重要工具,他们的影响力和粉丝基础成为了出海品牌开拓海外市场的利…

WindowsServer安装IIS以及搭建Asp网页

简介 Internet Information Services (IIS) 是一个由微软公司创建和维护的,用于在Windows系统上托管网站和Web应用程序的服务器。IIS是Windows Server的一个组成部分,并且也可以在某些版本的Windows上运行。 IIS支持多种Web开发技术,包括AS…

第六章,创作文章

6.1添加创作页面 <template><div class="blog-container"><div class="blog-pages"><div class="col-md-12 panel"><div class="panel-body"><h2 class="text-center">创作文章&l…

220V转5V芯片三脚芯片-AH8652

220V转5V芯片三脚芯片是一种非常常见的电源管理芯片&#xff0c;它通常被用于将高压交流输入转为稳定的直流5V输出。芯片型号AH8652是一款支持交流40V-265V输入范围的芯片&#xff0c;采用了SOT23-3三脚封装。该芯片内部集成了650V高压MOS管&#xff0c;能够稳定地将输入电压转…

中小型企业人事考勤管理系统的设计(论文+源码)_kaic

摘要 中小企业是我国经济的重要组成部分&#xff0c;人事管理对于中小企业的发展和运营至关重要。传统的人事考勤管理方式往往存在着效率低、准确度不高以及易于被操控等问题&#xff0c;给企业的管理带来了一定的困扰。为了解决中小企业在人事考勤管理方面面临的问题&#xff…

Databend 开源周报第 107 期

Databend 是一款现代云数仓。专为弹性和高效设计&#xff0c;为您的大规模分析需求保驾护航。自由且开源。即刻体验云服务&#xff1a;https://app.databend.cn 。 Whats On In Databend 探索 Databend 本周新进展&#xff0c;遇到更贴近你心意的 Databend 。 理解连接参数 …

html动态爱心代码【一】(附源码)

前言 七夕马上就要到了&#xff0c;为了帮助大家高效表白&#xff0c;下面再给大家带来了实用的HTML浪漫表白代码(附源码)背景音乐&#xff0c;可用于520&#xff0c;情人节&#xff0c;生日&#xff0c;表白等场景&#xff0c;可直接使用。 效果演示 文案修改 var loverNam…

LeetCode669. 修剪二叉搜索树

669. 修剪二叉搜索树 文章目录 [669. 修剪二叉搜索树](https://leetcode.cn/problems/trim-a-binary-search-tree/)一、题目二、题解方法一&#xff1a;递归法方法二&#xff1a;迭代法 一、题目 给你二叉搜索树的根节点 root &#xff0c;同时给定最小边界low 和最大边界 hig…

【并发编程的艺术读书笔记】synchronized锁升级机制详解

锁升级机制 简介锁升级流程三种锁的优缺点 简介 synchronized在早期被称为重量级锁&#xff0c;而到现在已经得到不少优化。偏向锁、轻量级锁、重量级锁指的是synchronized三种形态。 锁升级流程 无锁&#xff08;Unlocked&#xff09;&#xff1a; 初始状态&#xff0c;表示…

​ 模拟嵌入式边缘计算卡设计方案:367-XC7Z100 板卡 基于zynq XC7Z100 FMC接口通用计算平台

基于zynq XC7Z100 FMC接口通用计算平台 一、板卡概述 北京太速科技板卡由SoC XC7Z100-2FFG900I芯片来完成卡主控及数字信号处理&#xff0c;XC7Z100内部集成了两个ARM Cortex-A9核和一个kintex 7的FPGA&#xff0c;通过PL端FPGA扩展FMC、光纤、IO等接口&#xff0c;PS端ARM扩展…

智慧高速公路整体解决方案[76页PPT]

导读&#xff1a;原文《76页智慧高速公路整体解决方案PPPT》&#xff08;获取来源见文尾&#xff09;&#xff0c;本文精选其中精华及架构部分&#xff0c;逻辑清晰、内容完整&#xff0c;为快速形成售前方案提供参考。 喜欢文章&#xff0c;您可以关注评论转发本文&#xff0c…

java excel导出 本地运行数据正常 docker或者服务器导出数据为空 已解决

加上这个 response.addHeader("Content-Type","application/octet-stream;charsetutf-8"); 如图

【python爬虫案例】爬了上千条m端微博签到数据

一、爬取目标 大家好&#xff0c;我是马哥python说&#xff0c;一枚10年程序猿。 今天分享一期python爬虫案例&#xff0c;爬取目标是新浪微博的微博签到数据&#xff0c;字段包含&#xff1a; 页码,微博id,微博bid,微博作者,发布时间,微博内容,签到地点,转发数,评论数,点赞数…

Sphinx——Python生成API文档

1、简介 Sphinx是Python文档生成器&#xff0c;它基于reStructuredText标记语言&#xff0c;可自动根据项目生成HTML&#xff0c;PDF等格式的文档&#xff0c;无数著名项目的文档均用Sphinx生成&#xff0c;如机器学习库scikit-learn、交互式神器Jupyter Notebook sphinx是一…

k8s ingress (二)

k8s ingress (二) Ingress介绍 在前面课程中已经提到&#xff0c;Service对集群之外暴露服务的主要方式有两种&#xff1a;NodePort和LoadBalancer&#xff0c;但是这两种方式&#xff0c;都有一定的缺点&#xff1a; NodePort方式的缺点是会占用很多集群机器的端口&#xff0…

常见的时序数据库

1.概念 时序数据库全称为时间序列数据库。时间序列数据库指主要用于处理带时间标签&#xff08;按照时间的顺序变化&#xff0c;即时间序列化&#xff09;的数据&#xff0c;带时间标签的数据也称为时间序列数据。 时间序列数据主要由电力行业、化工行业、气象行业、地理信息…

【高危】Apache Airflow Spark Provider 任意文件读取漏洞 (CVE-2023-40272)

漏洞描述 Apache Airflow Spark Provider是Apache Airflow项目的一个插件&#xff0c;用于在Airflow中管理和调度Apache Spark作业。 受影响版本中&#xff0c;在JDBC连接时&#xff0c;由于没有对conn_prefix参数做验证&#xff0c;允许输入"?"来指定参数。攻击者…

uniapp微信小程序点击右上角菜单分享功能权限配置

个人项目地址&#xff1a; SubTopH前端开发个人站 &#xff08;自己开发的前端功能和UI组件&#xff0c;一些有趣的小功能&#xff0c;感兴趣的伙伴可以访问&#xff0c;欢迎提出更好的想法&#xff0c;私信沟通&#xff0c;网站属于静态页面&#xff09; SubTopH前端开发个人站…