当前位置：首页 > news >正文

如何搭建一个适配微信小程序，h5，app的工程

news 来源：原创 2025/5/16 22:26:57

在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()],
});