在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. 运行项目
使用以下命令运行项目：
npm run dev
这将启动开发服务器，并在浏览器中打开项目。
10. 构建项目
要构建项目，使用以下命令：
npm run build
这将生成一个构建后的文件夹，其中包含可以部署的静态文件。