vue2 创建utils文件

utils文件夹是统一管理函数工具

在src目录下创建一个utils文件夹来统一存放函数工具

可以创建一个index.js文件,在index.js文件里写js函数 

// index.js
// 方法一
// 验证是否为blob格式
export async function blobValidate(data) {
  try {
    const text = await data.text();
    JSON.parse(text);
    return false;
  } catch (error) {
    return true;
  }
}

// 方法二
function test(){
    alert("你好");
}
export default test;

//还可以写class类函数
class Person{
    // 构造函数
    constructor(x,y){
        this.x = x;
        this.y = y;
    }
    todoSome(){
        alert(this.x,this.y);
    }
}
export default  Person;

在main.js文件,引入,并挂载在Vue实例上

//main.js

//引入
import {blobValidate test Person } from "@/utils/index";
// 全局方法挂载
Vue.prototype.blobValidate = blobValidate 
Vue.prototype.test = test 
Vue.prototype.Person = Person 

页面如何使用

//页面
this.blobValidate(); //调用函数

this.test();

const test= new this.Person('haha','33');  //调用类js,先new,注意传参
test.todoSome();    //调用class类下面的方法

还可以把多个js函数文件,注册到一个js文件里方便统一管理调用,最后将这个index.js在main.js里面注册到vue实例中

  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
要使用HBuilder X创建vue2的uni-app项目,首先需要下载并安装HBuilder X。可以从官方网站下载并按照指南进行安装。 安装完成后,打开HBuilder X,选择“新建” -> “项目”,然后选择uni-app项目类型。填入项目名称,并选择项目保存地址。在选择模板时,可以选择uni-ui项目模板。确认选择vue的版本为2后,点击创建。 HBuilder X会自动下载相应的项目模板,下载完成后,可以在左侧的项目列表中看到刚刚创建的项目。 接下来,我们可以通过删除多余的代码、创建文件目录以及梳理项目文件结构的方式来开始项目的开发。 在项目的目录结构中,可以看到一些常见的目录,比如api、common、components、pages等。这些目录用于存放不同的功能模块和页面。 在api目录中,可以存放业务接口API的文件,比如bussinessApi.js用于存放业务接口的定义,request.js用于封装请求方法。 在common目录中,可以存放项目相关的公共js方法、公共css等文件。比如common.scss用于存放项目的公共样式,formatDate.js用于封装日期格式化方法,storage.js用于封装本地存储方法,utils.js用于存放常见的通用功能和工具方法。 在components目录中,可以存放符合vue组件规范的uni-app组件。 在pages目录中,可以存放业务页面文件。 在static目录中,可以存放应用引用的本地静态资源,比如图片、视频等。 其他文件如store目录用于vuex,unpackage目录用于打包APP时忽略的目录等。 在创建好项目后,可以根据具体需求修改和调整文件结构,以便更好地组织项目代码和资源。 总之,使用HBuilder X创建vue2的uni-app项目可以通过下载并安装HBuilder X,然后按照指南创建项目,并根据需要梳理和调整项目的文件结构来实现。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [从零开始创建一个uni-app项目](https://blog.csdn.net/Serena_tz/article/details/127802006)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

泥木马

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值