腾讯乐享知识库小程序

欢迎加入乐享知识库小程序开发，在开始之前请认知阅读本文内容

项目介绍

• 微信小程序：小程序开发指南
• 技术栈：vue3
• 小程序框架：uniapp
• UI 组件：@vant/weapp
• 小程序 云开发
• 静态检查：ESLint
• 格式化：Prettier

开发工具

开发工具

我们使用 Volta 管理我们的开发工具（Node、Yarn），使用 Yarn3 作为包管理工具，这样所有人可以在相同的环境下工作。

安装 Volta

https://docs.volta.sh/guide/getting-started

本项目已经通过 Volta 绑定了 Node 和 Yarn 的版本，安装完成 Volta 之后，首先执行一次 yarn 命令，Volta 会自动安装对应版本的 Node 和 Yarn

安装vscode插件

EditorConfig, Eslint, Prettier

配置vscode本地配置文件

.vsocde/settings.json

{
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": "explicit",
        "source.fixAll.stylelint": "explicit"
    }
}

创建本地开发环境配置文件

复制 src/config/config.local.example.ts 到 src/config/config.local.ts

快速上手

开发

yarn # 安装依赖
yarn dev # 启动开发

使用微信开发者工具打开 mp-sign/dist/dev/mp-weixin

构建

yarn build

图片

存放静态文件的文件夹：目前分为两类：图标资源，图片资源

• 图标资源：即跟随项目打包的小图标放在 src/static/icons 文件夹下

• 图片资源：较大的文件如banner类的文件放在 src/assets 文件夹下，会上传cdn

• 只能放在上述两种方式的文件夹中

assets文件使用规则：

需要注意asset文件使用完整引用地址：@/assets/xxx

import qrcode from '@/assets/qrcode.jpg';

<image src="@/assets/qw-banner.png" />