前端VUE3+Vite +UniAPP-- 框架搭建

news2024/12/26 23:42:55

除了HBuilderX可视化界面,也可以使用 cli 脚手架,可以通过 vue-cli 创建 uni-app 项目。

全局安装 vue-cli 官网


npm install -g @vue/cli
npx degit dcloudio/uni-preset-vue#vite-ts vue3-uniapp

配置tailwindcss插件 官网


npm install tailwindcss 
npx tailwindcss init

在 tailwind.config.js 配置文件中添加所有模板文件的路径。

module.exports = {

	content: ['./index.html', './src/**/*.{html,js,ts,jsx,tsx,vue}'],

	theme: {
		extend: {},
	},
	plugins: [],
}

将加载 Tailwind 的指令添加到你的 CSS 文件中
在你的主 CSS 文件中通过 @tailwind 指令添加每一个 Tailwind 功能模块。


@tailwind base;
@tailwind components;
@tailwind utilities;

安装 pinia 官网

安装防抖

npm install lodash-es
npm install  @types/lodash-es

增加请求

const requestTask = uni.request({
	url: 'https://www.example.com/request', //仅为示例,并非真实接口地址。
	data: {
        name: 'name',
        age: 18
	},
	success: function(res) {
		console.log(res.data);
	}
});

安装 uniui

 npm install uview-ui

组件库uview 组件库地址

组件地址

整体json包其他的 package.json


{
  "name": "uni-preset-vue",
  "version": "0.0.0",
  "scripts": {
    "dev:app": "uni -p app",
    "dev:custom": "uni -p",
    "dev:h5": "uni",
    "dev:h5:ssr": "uni --ssr",
    "dev:mp-alipay": "uni -p mp-alipay",
    "dev:mp-baidu": "uni -p mp-baidu",
    "dev:mp-kuaishou": "uni -p mp-kuaishou",
    "dev:mp-lark": "uni -p mp-lark",
    "dev:mp-qq": "uni -p mp-qq",
    "dev:mp-toutiao": "uni -p mp-toutiao",
    "dev:mp-weixin": "uni -p mp-weixin",
    "dev:quickapp-webview": "uni -p quickapp-webview",
    "dev:quickapp-webview-huawei": "uni -p quickapp-webview-huawei",
    "dev:quickapp-webview-union": "uni -p quickapp-webview-union",
    "build:app": "uni build -p app",
    "build:custom": "uni build -p",
    "build:h5": "node scripts/build.h5.mjs",
    "build:h5:ssr": "uni build --ssr",
    "build:mp-alipay": "uni build -p mp-alipay",
    "build:mp-baidu": "uni build -p mp-baidu",
    "build:mp-kuaishou": "uni build -p mp-kuaishou",
    "build:mp-lark": "uni build -p mp-lark",
    "build:mp-qq": "uni build -p mp-qq",
    "build:mp-toutiao": "uni build -p mp-toutiao",
    "build:mp-weixin": "uni build -p mp-weixin",
    "build:quickapp-webview": "uni build -p quickapp-webview",
    "build:quickapp-webview-huawei": "uni build -p quickapp-webview-huawei",
    "build:quickapp-webview-union": "uni build -p quickapp-webview-union",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
  },
  "dependencies": {
    "@dcloudio/uni-app": "^3.0.0-alpha-3050520220824001",
    "@dcloudio/uni-app-plus": "^3.0.0-alpha-3050520220824001",
    "@dcloudio/uni-components": "^3.0.0-alpha-3050520220824001",
    "@dcloudio/uni-h5": "^3.0.0-alpha-3050520220824001",
    "@dcloudio/uni-mp-alipay": "^3.0.0-alpha-3050520220824001",
    "@dcloudio/uni-mp-baidu": "^3.0.0-alpha-3050520220824001",
    "@dcloudio/uni-mp-kuaishou": "^3.0.0-alpha-3050520220824001",
    "@dcloudio/uni-mp-lark": "^3.0.0-alpha-3050520220824001",
    "@dcloudio/uni-mp-qq": "^3.0.0-alpha-3050520220824001",
    "@dcloudio/uni-mp-toutiao": "^3.0.0-alpha-3050520220824001",
    "@dcloudio/uni-mp-weixin": "^3.0.0-alpha-3050520220824001",
    "@dcloudio/uni-quickapp-webview": "^3.0.0-alpha-3050520220824001",
    "lodash-es": "^4.17.21",
    "pinia": "^2.0.20",
    "vconsole": "^3.14.6",
    "vue": "^3.2.37",
    "vue-i18n": "^9.2.2",
    "weixin-js-sdk": "^1.6.0",
    "z-paging": "^2.3.8"
  },
  "devDependencies": {
    "@dcloudio/types": "^3.0.13",
    "@dcloudio/uni-automator": "^3.0.0-alpha-3050520220824001",
    "@dcloudio/uni-cli-shared": "^3.0.0-alpha-3050520220824001",
    "@dcloudio/uni-stacktracey": "^3.0.0-alpha-3050520220824001",
    "@dcloudio/vite-plugin-uni": "^3.0.0-alpha-3050520220824001",
    "@rushstack/eslint-patch": "^1.1.4",
    "@types/lodash-es": "^4.17.6",
    "@types/node": "^18.7.16",
    "@vue/eslint-config-prettier": "^7.0.0",
    "@vue/eslint-config-typescript": "^11.0.0",
    "autoprefixer": "^10.4.8",
    "eslint": "^8.22.0",
    "eslint-plugin-vue": "^9.4.0",
    "execa": "^6.1.0",
    "fs-extra": "^10.1.0",
    "postcss": "^8.4.16",
    "postcss-rem-to-responsive-pixel": "^5.1.3",
    "prettier": "^2.7.1",
    "sass": "^1.54.5",
    "tailwindcss": "^3.1.8",
    "typescript": "^4.7.4",
    "vite": "^2.9.14",
    "weapp-tailwindcss-webpack-plugin": "^1.7.0"
  }
}

配置环境变量

.env.development
.env.production

书写已VITE开头
在这里插入图片描述

1.1 开始搭建 仓库

在这里插入图片描述

1.2构建请求

在这里插入图片描述

1.3暴露组册的pinia 等组件 main进行注册

在这里插入图片描述

引入cloud vk-uview-ui 等需要的插件 市场地址官网

启动项目

在这里插入图片描述

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

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

相关文章

揭秘阿里云Flink智能诊断利器——Fllink Job Advisor

引言 阿里云实时计算Flink作为一款专业级别的高性能实时大数据处理系统,它在各种业务场景中都发挥了关键的作用。丰富而复杂的上下游系统让它能够支撑实时数仓、实时风控、实时机器学习等多样化的应用场景。然而,随着系统的复杂性增加,用户在…

判断数的奇偶性

1 问题 如何用一个简单的程序判断一个数的奇偶性。 2 方法 import java.util.Scanner; public class HOMEWORK{ public static void main(String[] args){ System.out.println("请输入一个数"); int input new Scanner(System.in).nextInt(); if(input % 2 0){ Sys…

wsl下安装centenos7以及遇到问题报错解决

安装 ①CentenOs7-WSL 下载地址 https://github.com/yuk7/CentWSL ②解压下载的CentenOs7到自己想要安装的位置,解压的目录就是CentenOs的安装目录。刚开始是没有ext4.vhdx的,安装完成就出现了 ③安装完成,再次运行CentenOs.exe就可以使用了…

软件测试工程师如何从功能测试转成自动化测试

功能测试转成自动化测试,答案就三个字:“靠学习”。 学习自动化的方法无非是三种: 一、靠培训(下方有如何选择培训机构) 在相对有氛围的学习环境中来学习自动化测试,这是一个较快学习的方法。二、靠自学自…

切片辅助超推理(SAHI )技术原理介绍

小物体检测是指识别和定位数字图像中尺寸相对较小的物体的任务。这些对象通常具有有限的空间范围和低像素覆盖率,并且由于它们的小外观和低信噪比可能难以检测。 小物体检测的应用 小物体检测有多种应用: 监视和安全:识别和跟踪拥挤区域中的小物体,以增强公共安全。自动驾…

c盘怎么清理?这样做可以快速释放电脑空间!

案例:我电脑c盘可用空间已经不多了,出现了标红的现象,我想清理一下我的c盘。怎么清理c盘才科学和安全,才不会误删重要的文件?有没有小伙伴分享一下解决的方法! C盘作为电脑系统的核心盘符,经常…

xxl-job Study Notes

文章目录 1 xxl-job 快速入门1.1 xxl-job是什么1.2 为什么需要xxl-job1.2.1 定时任务1.2.2 分布式任务调度1.2.3 分布式任务调度特点 1.3 xxl-job简介1.4 部署安装——基于docker1.5 xxl-job表介绍1.5 编写任务代码1.5.1 xxl-job配置1.5.2 任务代码1.5.3 分布式任务测试1.5.3.1…

计算机系统2022期末

计算机系统2022期末 本课程的复习请以知识点复习为重,全部内容共有大小280个知识点,都可能在期末考试出现,仅通过往年试卷复习是远远不够的,往年试卷仅能作为部分知识点的检测以及题目类型的大致参考,复习本课程需要尽…

对球面线性插值的理解

【前言】 线性插值是点A到点B间距离的均匀变化,球面线性插值是点A到点B的角度均匀变化,前者应用范围很广,后者主要应用平滑旋转 【球面线性插值求解】 球面线性插值(Spherical linear interpolation,Slerp&#xff…

权限系统设计方案

1 为什么需要权限管理 日常工作中权限的问题时时刻刻伴随着我们,程序员新入职一家公司需要找人开通各种权限,比如网络连接的权限、编码下载提交的权限、监控平台登录的权限、运营平台查数据的权限等等。 在很多时候我们会觉得这么多繁杂的申请给工作带…

知识变现海哥:知识博主私域卖课三大途径

哈喽,大家好,我是海哥,知识付费变现创业教练,教育公司培训总监,从事知识付费变现咨询10年,已助力3000人实现知识付费变现。 私域这里主要指的就是微信,这里跟大家介绍三种私域卖课的方式。 1 朋…

Nsis简单打包Unity window程序

制作步骤 1.Unity发布一个window exe程序 2. 创建一个脚本,Test.nsi,放置在发布文件中 3. 编写命令,使用Nsis进行编译运行(脚本拖拽到Nsis编译器中,自动运行) 4. 编译成功,发布文件夹内生成一个SetUp.exe安装程序 5.…

一文理解数据倾斜

什么是数据倾斜 并行处理数据集的某个task处理的数据明显多于其他task。 发生数据倾斜的原因 一个词概括:shuffle 在Shuffle的过程中,同样一个Key一般都会交给一个Task去处理,如果某个key特别多,如上图中task3的key有80亿,这样就会造成别的task很快算完,而task3却一直在…

项目管理专业人员能力评价等级证书(CSPM)是什么?

2021年10月,中共中央、国务院发布的《国家标准化发展纲要》明确提出构建多层次从业人员培养培训体系,开展专业人才培养培训和国家质量基础设施综合教育。建立健全人才的职业能力评价和激励机制。由中国标准化协会(CAS)组织开展的项…

判断两个矩形是否相交(Rect Intersection)

0x00 Preface 最近在开发一个2D组态图形组件的过程中,里面的数学模块,涉及到两个矩形是否相交的判断。 这个问题很多年前就写过,算是个小的算法吧。 网络上搜索一下,有很多思路,有一些思路要基于多种组合的判断&…

618有哪些数码好物值得买?2023年618数码好物必买清单

618作为年中大促节点,很多的产品会迎来历史最低价,正是入手数码产品的最佳时间点。很多人在选择物品时难免会产生618有哪些数码好物值得买的疑惑?为此,我也整理了一份618数码好物清单,都是一些实用性很强的数码好物,希…

【2023年高考作文】七套卷子全汇总及AI一分钟版本作答

2023年高考作文-全国甲卷 科技与时间 当今社会,科技已经成为人们生活的必需品。它给我们带来了很多便利与机遇,让我们能够更好地掌控时间。然而,我们回顾一下自己的生活,会发现我们似乎已经依赖了科技,甚至成为了时间…

django-vue-admin开源项目环境调试(靠谱)

一、源码地址 注意,一定要使用这个地址。(使用其他地址下载下来的感觉代码缺失,踩了大坑) django-vue-admin: 基于RBAC模型的权限控制的一整套基础开发平台,前后端分离,后端采用 djangodjango-rest-frame…

消防应急照明和疏散指示系统在某洁净医药的设计与应用

【摘要】:A100型消防应急照明和疏散指示系统具有集中控制,灵活度高和可靠性强等特点。系统采用17寸工业平板电脑,采用Windonws7系统,可支持联动报警、系统监控、故障报警、自检、备电、记录存储与查询、导光流、权限控制等多项功能…

30、js - Promise

一、Promise的3种状态: 1、作用:了解Promise对象如何关联的处理函数,以及代码执行顺序 2、一个Promise对象,必然处于以下几个状态之一: pending:初始状态,页面一旦调用Promise对象,Promise对象就…