uniapp-typescript-template

uniapp-typescript-template

Structure 项目结构

root
├─ .vscode // vscode相关
│  └─ common.code-snippets // 代码片段
├─ lint // lint 配置文件夹
│  └─ style-order.js
├─ public
│  └─ index.html // 项目根html文件 !勿改
├─ src // 源文件目录
│  ├─ api // api文件夹
│  ├─ component // 公共组件
│  ├─ pages // 页面目录
│  │  └─ example // example页面文件夹
│  │     ├─ index.vue // 主页面
│  │     ├─ sub.vue // 子页面
│  │     └─ component // 私有组件 
│  ├─ static // 静态资源
│  ├─ store
│  │  ├─ module // 存放store模块的文件夹
│  │  └─ index.ts
│  ├─ style // 全局样式文件夹
│  │  └─ variables.scss // 全局SCSS变量文件
│  ├─ utils
│  │  ├─ request.ts // 网络请求模块
│  │  └─ update-manager.ts // 更新管理功能模块
│  ├─ App.vue // Vue根节点
│  ├─ main.ts // 代码主入口 
│  ├─ mainfest.json // uni应用配置
│  ├─ pages.json // uni页面表(代替router)
│  └─ sfc.d.ts
├─ .env.development // 环境变量-开发 
├─ .env.production // 环境变量-生产
├─ .eslintrc.js // Eslint 配置文件
├─ .gitignore // git忽略 配置文件
├─ .stylelintrc.js // Stylelint 配置文件
├─ .babel.config.js // babel 配置文件
├─ package.json // 项目配置文件
├─ postcss.config.js // CSS处理配置文件
├─ README.md
├─ tsconfig.json // TypeScript 配置文件
├─ vue.config.js // Vue CLI 配置文件
└─ yarn.lock

Environment Variables 环境变量

于 /根目录/.env.* 中配置

Request 网络请求

由axios封装并适配uniapp

调用方法与axios保持基本一致

import request from '@/utils/request'

request({
    url: '链接',
    params: {},
    method: 'GET',
    data: {}, // !!! 注意点
    // 正常情况: 为request body
    // method为GET: 和params合并处理(不建议)
})

Theme 主题

主要通过CSS变量以及Vuex实现

提供VSCode代码片段 <vue> class-page-with-theme 以方便创建

注意：为了保证主题在每个页面生效，请确保

在pages.json中的每个页面均引入ThemeVue作为基类

import { Component } from 'vue-property-decorator'
import ThemeVue from '@/mixins/theme.vue'

@Component({
    name: 'Example',
})
export default class extends ThemeVue {
    // 避免属性名为theme
}

为这些页面的根元素加上style属性

<template>
    <view class="root-element" :style="theme"></view>
</template>

设置默认值

于 "@/store/module/theme.ts" 文件中，修改 defaultTheme 变量，其中属性名为CSS变量名，值为CSS变量值。（不限于颜色）

修改主题条目

调用 ThemeModule.SetRule 以覆盖原值

Snippets 代码片段

为VSCode添加代码片段，以方便构建项目

输入前缀任意关键字以调用代码片段

前缀	片段名	备注
<vue> class-component	ClassComponent	Vue页面/组件模板
<vue> class-store-module	ClassStoreModule	Vuex模块模板
<uni> page	UniPage	pages.json快速构建

Lint 代码检查

1. Manually 手动

在终端可以通过指令手动lint

# 检查
npm run lint
npm run lint:style
# 检查并自动修复
npm run lint --fix
npm run lint:style --fix

2. Automatically 自动

在commit代码前会自动进行代码风格检查,如代码检测不通过则无法成功commit。

laihui0207/uniapp-typescript-template

uniapp-typescript-template

Structure 项目结构

Environment Variables 环境变量

Request 网络请求

Theme 主题

设置默认值

修改主题条目

Snippets 代码片段

Lint 代码检查

1. Manually 手动

2. Automatically 自动

Components 组件

列表

Basic

Form

Data

Notice

Navigation

Misc