电子商务网站建设的课程论文/科学新概念外链平台

电子商务网站建设的课程论文,科学新概念外链平台,信阳制作网站ihanshi,成品源码站在vscode搭建 uni-app 项目(Vue 3 Vite Pinia uView Plus) 一、环境准备 1. 安装 Node.js 确保已安装 Node.js(需≥14版本),可通过以下命令检查版本: node -v2. 安装 VSCode 从 VSCode 官网 下载并…

在vscode搭建 uni-app 项目(Vue 3 + Vite + Pinia + uView Plus)

一、环境准备

1. 安装 Node.js

确保已安装 Node.js(需≥14版本),可通过以下命令检查版本:

node -v

2. 安装 VSCode

从 VSCode 官网 下载并安装适合你操作系统的版本。

3. 安装 uni-app 官方插件

在 VSCode 中打开扩展视图(快捷键 Ctrl+Shift+X),搜索 “uni-app”,找到官方插件并安装。

4. 安装 Volar 插件

Volar 是 Vue 3 的官方语言服务,提供智能感知、语法检查等功能。在扩展视图中搜索 “Volar” 并安装。

二、创建项目

1. 初始化项目

首先,确保你已经安装了 Node.js 和 npm。然后,打开终端,使用以下命令创建一个新的 uni-app 项目:(个人node 版本 18.18.2)

注意: Vue3/Vite版要求 node 版本^14.18.0 || >=16.0.0

npm init uni-app my-uniapp-project --template=vue3-vite-uni

2. 进入项目目录

cd my-uniapp-project

3. 安装依赖

运行以下命令安装项目依赖:

npm install

4. 安装 uView Plus

安装 uView Plus UI 库:

npm install uview-plus

5. 配置 uView Plus

在 main.js 中引入并配置 uView Plus:

// main.js
import { createSSRApp } from 'vue';
import App from './App.vue';
import uView from 'uview-plus';export function createApp() {const app = createSSRApp(App);app.use(uView);return {app,};
}

在 main.ts 中引入 uView Plus 的样式:

// main.ts
import 'uview-plus/dist/style/index.scss';

6. 安装 Pinia

安装 Pinia 状态管理库:

npm install pinia

在 main.js 中引入并创建 Pinia 实例:

// main.js
import { createPinia } from 'pinia';
import { createApp } from 'vue';
import App from './App.vue';
import uView from 'uview-plus';const app = createApp(App);
app.use(createPinia());
app.use(uView);
app.mount('#app');

7. 创建 Pinia Store

在 src/stores 目录下创建一个新的 store 文件,例如 user.js:

// src/stores/user.js
import { defineStore } from 'pinia';export const useUserStore = defineStore('user', {state: () => ({name: 'John Doe',}),actions: {setName(name) {this.name = name;},},
});

在组件中使用 store:

<template><view><text>{{ userName }}</text><u-button @click="changeName">Change Name</u-button></view>
</template><script setup>
import { useUserStore } from '../stores/user';const userStore = useUserStore();
const userName = computed(() => userStore.name);function changeName() {userStore.setName('Jane Doe');
}
</script>

8. 配置 Vite

在 vite.config.js 中配置 Vite 以支持 uni-app:

// vite.config.js
import { defineConfig } from 'vite';
import uni from '@dcloudio/vite-plugin-uni';export default defineConfig({plugins: [uni()],
});

9. 配置package.json

这里需要适配h5、微信小程序、以及app或者其他各种小程序
配置以下命令在package.json

{"scripts": {"dev": "uni dev","dev:h5": "uni dev -p h5","dev:mp-weixin": "uni dev -p mp-weixin","build:h5": "uni build -p h5","build:mp-weixin": "uni build -p mp-weixin","build:mp-baidu": "uni build -p mp-baidu","build:mp-jd": "uni build -p mp-jd","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"}
}

以及对应的依赖项在dependencies

 	"@dcloudio/uni-app": "3.0.0-4040520250104002","@dcloudio/uni-app-harmony": "3.0.0-4040520250104002","@dcloudio/uni-app-plus": "3.0.0-4040520250104002","@dcloudio/uni-components": "3.0.0-4040520250104002","@dcloudio/uni-h5": "3.0.0-4040520250104002","@dcloudio/uni-mp-alipay": "3.0.0-4040520250104002","@dcloudio/uni-mp-baidu": "3.0.0-4040520250104002","@dcloudio/uni-mp-jd": "3.0.0-4040520250104002","@dcloudio/uni-mp-kuaishou": "3.0.0-4040520250104002","@dcloudio/uni-mp-lark": "3.0.0-4040520250104002","@dcloudio/uni-mp-qq": "3.0.0-4040520250104002","@dcloudio/uni-mp-toutiao": "3.0.0-4040520250104002","@dcloudio/uni-mp-weixin": "3.0.0-4040520250104002",

10.安装对应依赖并 运行项目

使用以下命令运行项目:

npm install
npm run dev:h5  // 运行 H5 平台
npm run dev:mp-weixin  // 运行微信小程序

这将启动开发服务器,并在浏览器中打开项目。

11. 条件编译

uni-app 支持条件编译,允许你根据不同平台编写特定的代码。例如:

// #ifdef H5
console.log('This code will only run on H5 platform');
// #endif// #ifdef MP-WEIXIN
console.log('This code will only run on WeChat Mini Program');
// #endif// #ifdef APP-PLUS
console.log('This code will only run on App platform');
// #endif

这样你可以根据需要在 请求拦截 或者 路径处理 时区分不同的运行环境

12. 构建项目

要构建项目,使用以下命令:

npm run build:h5  // 对应的命令

这将生成一个构建后的文件夹,其中包含可以部署的静态文件。

未完待续。。。

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

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

相关文章

一文解读python高阶功能:匿名函数到魔法方法(__call__)

文章目录 一、python中匿名方法的使用使用示例注意事项总结 二、匿名函数和魔法方法的结合示例&#xff1a;结合 lambda 和 __call__解释更复杂的示例 总结 一、python中匿名方法的使用 在 Python 中&#xff0c;匿名方法是通过 lambda 关键字定义的&#xff0c;通常称为 lamb…

云服务器新手配置内网穿透服务(frp)

首先你得有一个公网服务器&#xff0c;有了它你就可以借助它&#xff0c;将自己电脑进行配置内网穿透&#xff0c;让自己内网电脑也可以异地轻松访问。网上教程较多&#xff0c;特此记录我自己的配置&#xff0c;避免迷路&#xff0c;我这里只记录我自己云服务小白&#xff0c;…

基于STM32的火灾报警设备(阿里云平台)

目录 前言&#xff1a; 一、项目介绍和演示视频 二、硬件需求准备 三、硬件框图 1. 原理图 2. PCB 四、CubeMX配置 五、代码框架 前言&#xff1a; 源代码下载链接&#xff1a; https://download.csdn.net/download/m0_74712453/90474701 需要实物的可以私信博主或者…

学习笔记之车票搜索为什么用Redis而不是ES?

在文章正式开始前&#xff0c;大家打开 12306.cn 搜索一趟列车&#xff0c;根据搜索条件判断&#xff0c;数据搜索技术使用 ElasticSearch 或者其它搜索技术是否合适&#xff1f; 这里我先把答案说下&#xff0c;12306 车票搜索用的是 Redis &#xff0c;而不是大家常用的 Ela…

揭秘AI:机器学习与深度学习的奥秘

文章目录 机器学习与深度学习1. 什么是人工智能&#xff1f;2. 机器学习、深度学习和人工智能又是什么关系&#xff1f;3. 人工智能解决了什么问题&#xff1f;为什么需要人工智能&#xff1f;4. 机器学习、深度学习常用术语1&#xff09;模型2&#xff09;数据集3&#xff09;…

NetLink内核套接字案例分析

一、基础知识 Netlink 是 Linux 系统中一种内核与用户空间通信的高效机制&#xff0c;而 Netlink 消息是这种通信的核心载体。它允许用户态程序&#xff08;如网络配置工具、监控工具&#xff09;与内核子系统&#xff08;如网络协议栈、设备驱动&#xff09;交换数据&#xff…

批量压缩与优化 Excel 文档,减少 Excel 文档大小

当我们在 Excel 文档中插入图片资源的时候&#xff0c;如果我们插入的是原图&#xff0c;可能会导致 Excel 变得非常的大。这非常不利于我们传输或者共享。那么当我们的 Excel 文件非常大的时候&#xff0c;我们就需要对文档做一些压缩或者优化的处理。那有没有什么方法可以实现…

基于深度学习的多模态人脸情绪识别研究与实现(视频+图像+语音)

这是一个结合图像和音频的情绪识别系统&#xff0c;从架构、数据准备、模型实现、训练等。包括数据收集、预处理、模型训练、融合方法、部署优化等全流程。确定完整系统的组成部分&#xff1a;数据收集与处理、模型设计与训练、多模态融合、系统集成、部署优化、用户界面等。详…

保姆级离线TiDB V8+解释

以前学习的时候还是3版本&#xff0c;如今已经是8版本了 https://cn.pingcap.com/product-community/?_gl1ujh2l9_gcl_auMTI3MTI3NTM3NC4xNzM5MjU3ODE2_gaMTYwNzE2NTI4OC4xNzMzOTA1MjUz_ga_3JVXJ41175MTc0MTk1NTc1OC4xMS4xLjE3NDE5NTU3NjIuNTYuMC41NDk4MTMxNTM._ga_CPG2VW1Y4…

spark实验2

一.实验题目 实验所需要求&#xff1a; centos7虚拟机 pyspark spark python3 hadoop分布式 统计历届春晚的节目数目 统计各个类型节目的数量&#xff0c;显示前10名 统计相声类节目历年的数目。 查询每个演员在春晚上表演节目的数量。 统计每年各类节目的数量&#xff0…

Manus:成为AI Agent领域的标杆

一、引言 官网&#xff1a;Manus 随着人工智能技术的飞速发展&#xff0c;AI Agent&#xff08;智能体&#xff09;作为人工智能领域的重要分支&#xff0c;正逐渐从概念走向现实&#xff0c;并在各行各业展现出巨大的应用潜力。在众多AI Agent产品中&#xff0c;Manus以其独…

算法每日一练 (11)

&#x1f4a2;欢迎来到张胤尘的技术站 &#x1f4a5;技术如江河&#xff0c;汇聚众志成。代码似星辰&#xff0c;照亮行征程。开源精神长&#xff0c;传承永不忘。携手共前行&#xff0c;未来更辉煌&#x1f4a5; 文章目录 算法每日一练 (11)全排列题目描述解题思路解题代码c/c…

《Spring日志整合与注入技术:从入门到精通》

1.Spring与日志框架的整合 1.Spring与日志框架进行整合&#xff0c;日志框架就可以在控制台中&#xff0c;输出Spring框架运行过程中的一些重要的信息。 好处&#xff1a;方便了解Spring框架的运行过程&#xff0c;利于程序的调试。 Spring如何整合日志框架 Spring5.x整合log4j…

《SQL性能优化指南:新手如何写出高效的数据库查询

新手程序员如何用三个月成为SQL高手&#xff1f;万字自学指南带你弯道超车 在数据为王的时代&#xff0c;掌握SQL已成为职场新人的必修课。你可能不知道&#xff0c;仅用三个月系统学习&#xff0c;一个零基础的小白就能完成从数据库萌新到SQL达人的蜕变。去年刚毕业的小王就是…

【Unity】在项目中使用VisualScripting

1. 在packagemanager添加插件 2. 在设置中进行初始化。 Edit > Project Settings > Visual Scripting Initialize Visual Scripting You must select Initialize Visual Scripting the first time you use Visual Scripting in a project. Initialize Visual Scripting …

JConsole 在 Linux 上的使用

JConsole 在 Linux 上的使用指南 1. 启动 JConsole 远程监控 Linux 服务器上的 JVM 进程 1.1 修改 JMX 配置&#xff0c;允许远程访问 在 Linux 服务器 启动 Java 应用时&#xff0c;需要加上 -Djava.rmi.server.hostname<服务器IP>&#xff0c;完整的启动参数如下&am…

个人记录,Unity资源解压和管理插件

就是经典的两个AssetStudio 和 Ripper 没有什么干货&#xff0c;就是记录一下&#xff0c;内容没有很详细 AssetStudio 说错了&#xff0c;AssetStudio比较出名&#xff08;曾经&#xff09;&#xff0c;但好像堕落了 是&#xff0c;AssetBundlExtractor 这个工具有个好处就…

DeepSeek-Open WebUI部署

1.DeepSeek部署-Win版本 2.DeepSeek部署-Linux版本 3.DeepSeek部署-一键部署(Linux版本) 4.DeepSeek部署-进阶版本(LinuxGPU) 5.DeepSeek部署-基于vLLM部署 前面部署了vLLM版本以后&#xff0c;访问它比较麻烦。如何才能更好的实现访问呢&#xff0c;这个就是我们今天要讲的…

(vue)elementUi中el-upload上传附件之后 点击附件可下载

(vue)elementUi中el-upload上传附件之后 点击附件可下载 handlePreview(file) {console.log(file)const fileUrl https://.../zzy/ file.urlconst a document.createElement(a)a.href fileUrla.download file.namea.style.display none// a.setAttribute(download, file.…

SpringBoot——Maven篇

Spring Boot 是一个用于快速开发基于 Spring 框架的应用程序的工具。它具有许多特性&#xff0c;其中一些重要的特性包括&#xff1a; 1. 自动配置&#xff1a;Spring Boot 提供了自动配置的机制&#xff0c;可以根据应用程序的依赖和环境自动配置应用程序的各种组件&#xff…