# uniapp-vuecll模板

**Repository Path**: geekrim/uniapp-vuecli

## Basic Information

- **Project Name**: uniapp-vuecll模板
- **Description**: 基于vue-cli搭建的uniapp模板

- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2022-01-15
- **Last Updated**: 2022-01-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# tz-uni-cli

### 用法

![markdown](https://frontend-static-cdn.shiguangkey.com/tz-doc/uni/uni-cli1.png 'markdown')

```
npm install -g @tzfe/tz-uni-cli --registry=http://nexus.tanzk.com:8081/repository/tzedu_npm_public/
```

### 查看模板列表

```
tz-uni list
```

> uni 模板，是基于 uni-app 创建的项目。

### 快速创建一个项目

```
tz-uni create
```

### 项目目录结构

```
......
├── src
	├── api                  // 存放请求的目录
	├── components           // 可复用组件目录
	├── pages                // 业务页面文件存放的目录
		├─index
		│	└─index.vue      // index页面
		└─list
		│	└─index.vue      // list页面
	├── testSubpack           // 分包页面
	├── plugins              // 插件
		├─errorCatch.js      // 错误处理
		├─interact.js        // toast提示，loading加载，Dialog弹窗
	├── static               // 存放静态文件
	├── store                // vuex
		└─module             // 模块
		│	└─auth.js        // 权限相关的数据
		└─plugin             // 模块
		│	└─storage.js     // 数据持久化处理机制
		├─index.js           // 导出store处理
		├─localStorateKey.js // 需要持久化存储的state
		├─types.js           // state常量声明
	├── style                // 存放样式文件
	├── utils                // 工具类
		├─config.js          // 常量声明
		├─request.js         // http请求封装
......
```

### http 请求调用

```
// api/course.js
import request from '@/utils/request';
import { DOMAINS } from '@/utils/config';

const OPEN = `${DOMAINS.OPEN}/api`;
const recommend = `${OPEN}/m/recommend/getcourse`;

export function getRecommend(data) {
  return request.get({
    url: recommend,
    data,
  });
}

export function getInfo(data) {
  return request.post({
    url: userInfo,
    data,
  });
}


// pages/index/index.vue
<template>
  <div class="index">这是首页</div>
</template>

<script>
import { getRecommend } from '@/api/course';
export default {
  async mounted() {
    const { data } = await getRecommend({
      channel: 0,
      pageIndex: 1,
      pageSize: 10,
    });
    console.log(data);
  },
};
</script>
```

### toast 提示使用方法

```
<script>
export default {
  mounted() {
    // 参数： string|object 。
  	// 参数类型为对象时，参数参考：https://uniapp.dcloud.io/api/ui/prompt?id=showtoast
    this.$toast('数据加载成功');
	  this.$toast({
      title: '数据加载成功',
      duration: 5000,
    });
	});
  },
};
</script>
```

### loading 使用方法

```
<script>
export default {
  mounted() {
    /* 开启loading时的默认参数：
    {
      title: '加载中', // 提示的内容
      mask: true, // 是否显示透明蒙层，防止触摸穿透
    }
    */
    this.$loading(); // 开启loading
	  this.$loading.close(); // 关闭loading
	});
  },
};
</script>
```

### dialog 使用方法

```
<script>
export default {
  async mounted() {
    /* 打开弹窗的默认参数：
	{
	  title: '提示',
	  showCancel: false,
	}
	具体参数参考文档：https://uniapp.dcloud.io/api/ui/prompt?id=showmodal
	该方法返回的是一个promise
	*/
   await this.$dialog({
	   title: '温馨提示',
	   content: '确认提交吗?',
	   showCancel: true,
   }).then(
   () => {
	    console.log('点击确认按钮');
	    this.$toast('提交成功');
   },
      console.log('点击取消按钮');
      this.$toast('已经取消提交');
   }
   );
   console.log('1');
  },
};
</script>
```

### store 中数据持久化配置

```
// store/types.js
export const SET_TOKEN = 'SET_TOKEN';

// store/module/auth.js
import { SET_TOKEN } from '../types';
export default {
  state: {
    token: '',
  },
  mutations: {
    [SET_TOKEN](state, token) {
      state.token = token;
    },
  },
  actions: {},
  getters: {},
};

// store/localStorageKeys.js
import { SET_TOKEN } from './types';
export default {
  // 格式: mutation: storeKey
  [SET_TOKEN]: 'TOKEN',
};

// pages/index/index.vue
<script>
import { SET_TOKEN } from '@/store/types';
export default {
  mounted() {
    this.$store.commit('SET_TOKEN', '11111');
  },
};
</script>
```

当 store 中的 state 需要持久化存储时，在 store/localStorageKeys.js 中配置即可。数据会存储在本地缓存中指定的 key 中