vue3.4 + uniapp + TDesign + unocss + pinia 项目搭建

先看结果

🔨 开发

HBuilder给我的开发体验并不好，所有将uniapp项目转到vscode开发

创建项目

# 安装 pnpm 和 @vue/cli
npm install -g @vue/cli pnpm

# 创建项目
pnpx degit dcloudio/uni-preset-vue#vite my-vue3-project
cd my-vue3-project

# 更新uniapp依赖到最新版
pnpx @dcloudio/uvm@latest
pnpm up
pnpm i 

# 安装pinia库和pinia持久化库
pnpm i pinia@~2.0.36 pinia-plugin-persistedstate@~3.2.1

引入 lninl-ui 库

lninl-ui是一个基于 Vue 3 & UnoCSS，兼容 TDesign 的 uni-app UI开发框架。这样我们就得到了基于一个vue3和unocss的框架，而且能用到TDesign的API文档，大厂出品，用得放心！

# 安装 lninl-ui UI开发组件
pnpm i lninl-ui

配置

• 打开 main.js，在export function createApp()之前添加 import 'uno.css'，如下

...
import 'uno.css'

export function createApp() {
    ...
}

• 打开 vite.config.js，添加 unocss 支持，如下

import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
import unocss from 'unocss/vite'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    uni(),
    unocss(),
  ],
})

• 在项目根目录下(与 package.json 同级) 添加 uno.config.js 文件，文件内容参考 node_modules 库 lninl-ui 里边的uno.config.js 文件

./node_modules/lninl-ui/uno.config.js

• 打开 pages.json, 添加 easycom 配置 (此步骤可忽略)

{
    ...
    "easycom": {
        "autoscan": true,
        "custom": {
            "^l-(.*)": "lninl-ui/components/l-$1/l-$1.vue"
        }
    }
    ...
}