使用uniapp开发微信小程序-框架搭建

YUJIAN。

已于 2024-12-26 10:22:45 修改

阅读量2.8k

点赞数 31

CC 4.0 BY-SA版权

分类专栏：微信小程序 uniapp 文章标签： uni-app 微信小程序小程序

于 2024-12-24 18:45:42 首次发布

本文链接：https://blog.csdn.net/Yu_Jian_Qt/article/details/144700607

最近要开发一个小程序，为了降低学习成本，最后还是选择使用uniapp来开发，但是由于电脑性能不行，实在不想多跑一个应用程序，就简单搭建了一个可以用vscode跑的uniapp项目。

项目整体技术栈：vue3 + pinia + typescript + sass + unocss + vite5

基础框架

1、使用 uniapp官网中的Vue3/Vite版:

npx degit dcloudio/uni-preset-vue#vite-ts uni-preset-vue-vite-ts

如果创建失败，可以直接下载模板

基础项目下载/安装完以后，目录如下：

在这里插入图片描述

我们可以看一下package.json文件中，有很多默认的依赖包：
在这里插入图片描述

由于我们仅需要发布微信小程序端，所以将其他没用的包都删掉：

在这里插入图片描述

在项目根目录下安装依赖包：

npm install

2、其他依赖包安装

另外安装了其他需要的依赖包，例如pinia、sass、unocss等等。

1）pinia —— 全局状态管理

项目一些数据需要持久化，配套安装pinia-plugin-persistedstate，不需要可以不安装。

npm install pinia pinia-plugin-persistedstate

安装完以后在项目src文件夹下新建文件夹store,store文件夹下新建文件index.ts和 user.ts：

在这里插入图片描述

然后按官网使用即可：

// index.ts
import {
    createPinia } from 'pinia'
import {
    createPersistedState } from 'pinia-plugin-persistedstate' // 数据持久化

const store = createPinia()
store.use(
  createPersistedState({
   
    storage: {
   
      getItem: uni.getStorageSync,
      setItem: uni.setStorageSync,
    },
  }),
)

export default store

// 模块统一导出
export * from './user'

// user.ts
import {
    defineStore } from 'pinia'
import {
    ref } from 'vue'

const initState = {
   
  account: '',
  name: '',
  phone: '',
  token: '',
}

export

最低0.47元/天解锁文章