# tll-uniapp-vue3-tmp

**Repository Path**: hellosanbao/tll-uniapp-vue3-tmp

## Basic Information

- **Project Name**: tll-uniapp-vue3-tmp
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-01-19
- **Last Updated**: 2024-01-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### 准备工作

#### 1、 安装 vscode 插件`prettier`、`editorconfig`

#### 2、新建`.env.local`文件，添加如下环境变量

- SecretId：对象存储的 SecretId
- SecretKey：对象存储的 SecretKey
- Bucket：对象存储的 Bucket
- Region：对象存储的 Region
- WX_CLI_PATH：微信开发者工具的安装路径（若未修改过微信开发者工具的默认安装路径，此项可不用添加）

### 项目启动

```bash
$ npm install # 或者 yarn install
$ npm run dev:test:mp-weixin # 或者 yarn dev:test:mp-weixin # 启动测试环境
$ npm run dev:prod:mp-weixin # 或者 yarn dev:prod:mp-weixin # 启动生产环境
```

### 项目打包

```bash
$ npm run build:test:mp-weixin # 或者 yarn build:test:mp-weixin # 打包测试环境
$ npm run build:prod:mp-weixin # 或者 yarn build:prod:mp-weixin # 打包生产环境
```

### 提交体验版

```bash
$ npm run push:test # 或者 yarn push:test # 提交测试环境
$ npm run push:prod # 或者 yarn push:prod # 提交生产环境
```

若要实现命令行提交体验版，需要在微信小程序管理后台中"开发管理"-"开发设置"-"小程序代码上传"-"重置"，将小程序代码上传密钥下载到项目的`wx-ci-key`目录下，命名规则为`private.{小程序的appid}.key`，如果多个 appid 切换，则需要吧每个 appid 对应的 key 都放到`wx-ci-key`目录下

### 关于静态资源

静态资源存放目录为`src/static`,将静态资源放入此目录后，执行`npm run upload-img`,会将静态资源上传到`.env.local`中配置的对象存储中，上传后，对象存储的基础 path 为项目名称。例如：上传后的静态资源的访问路径为`https://{Bucket}.cos.{Region}.myqcloud.com/{你的项目名称}/{filename}`，其中`filename`为静态资源的文件名

### 全局模块自动导入

可以根据需求，在`vite.config.ts`中配置一些全局模块，这些模块会自动导入到每个页面中，无需手动导入，例如：

```js
export default defineConfig(({ mode }) => {
  return {
    plugins: [
      //、、、
      //自动引入api
      AutoImport({
        imports: [
          {
            '@/hooks/useGetPageQuery': ['useGetPageQuery'], // import {useGetPageQuery} from "@/hooks/useGetPageQuery"
            '@/utils/utils': [['*', 'utils']], // import {* as utils} from "@/utils/utils"
          },
        ],
      }),
    ],
  };
});
```

配置完成后，就可在全局直接使用`useGetPageQuery`和`utils`了

为了让这些全局变量具备友好的代码提示，需要在根目录下的`auto-imports.d.ts`中添加全局模块的申明,例如：

```ts
declare global {
  const useGetPageQuery: typeof import('@/hooks/useGetPageQuery')['useGetPageQuery'];
  const utils: typeof import('@/utils/utils');
}
```

### 全局组件自动导入

可以根据需求，在`vite.config.ts`中配置一些全局组件，这些组件会自动导入到每个页面中，无需手动导入，例如：

```js
export default defineConfig(({ mode }) => {
  return {
    plugins: [
      //、、、
      //自动引入组件
      AutoComponent({
        dts: true,
        globs: ['src/components/tll-*.{vue}'],
      }),
    ],
  };
});
```
配置之后，会自动匹配到所有符合`src/components/tll-*.{vue}`的文件，作为全局组件导入，组件名为匹配到的文件名
> components.d.ts目前配置了无效果，暂未找到原因，所以暂时没有自定义组件的props提示，降级方案先安装vue peek插件，可快速跳转至组件定义处查看组件的props定义