You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
## 1、全局路由守卫
##### (1) 路由拦截
[uni-simple-router](https://hhyang.cn/) 路由、拦截、最优雅的解决方案
##### (2) 路由配置
通过 vue.config.js 配合[uni-read-pages](https://github.com/SilurianYang/uni-read-pages),可以随心所欲的读取 pages.json 下的所有配置
## 2、Request封装
适用于一项目多域名请求、七牛云图片上传、本地服务器图片上传、支持 Promise.
## 3、api集中管理
api集中管理; 为简化逻辑代码量整洁的原则,像调用函数一样调用api,做到代码分离,在apis目录统一创建api函数
## 4、小程序更新提示代码,配置分包,等必备代码
sub目录分包管理 由于微信小程序的限制,上传发布机制总包大小不能大于2m,所以项目若超出该限制,要在page.json中做分包处理,分包处理的配置与pages目录保持一致,封装更新提示代码
## 5、配置vuex
不需要引入每个子store模块
```javascript import Vue from "vue"; import Vuex from "vuex";
Vue.use(Vuex); const files = require.context("./modules", false, /\.js$/); let modules = { state: {}, mutations: {}, actions: {} };
files.keys().forEach((key) => { Object.assign(modules.state, files(key)["state"]); Object.assign(modules.mutations, files(key)["mutations"]); Object.assign(modules.actions, files(key)["actions"]); }); const store = new Vuex.Store(modules); export default store; ``` 页面使用Vuex
```javascript import { mapState,mapActions } from 'vuex';
computed: { ...mapState(['userInfo']) } methods: { ...mapActions(['getUserInfo']) } ```
通用的mutations方法,只需要写一个就行了
```javascript //更新state数据 setStateAttr(state, param) { if (param instanceof Array) { for (let item of param) { state[item.key] = item.val; } } else { state[param.key] = param.val; } } ``` actions调用
```javascript async setUserData({ state, commit }, data) { commit('setStateAttr', { key: 'userInfo', val: data }) uni.setStorageSync('userInfo', data); }, ```
## 6、全局过滤器filters
main.js引入filters,使用如下 ```javascript {{shop.shopAddress|autoAddPoints}} ```
## 7、无关系组件间的通信=>事件车
> 事件车的基本原理就是在本项目Vue的原型对象里新生成一个Vue对象专门用来负责无关系,跨级组件间的通信
main.js声明事件bus ```javascript Vue.prototype.$bus = new Vue() // event Bus 用于无关系组件间的通信。 ``` A组件 监听($on)
```javascript // onload 里面 this.$bus.$on('updateChecked', this.updateChecked)
// methods 里面 updateChecked(index){ console.log('这里就拿到了跨级组件的index',index) } ``` B组件 触发($emit) > B组件触发A组件的updateChecked 传index值给A组件
```javascript this.$bus.$emit('updateChecked', index); ```
## [github源码下载](https://github.com/mgbq/uni-template)
## [插件市场源码](https://ext.dcloud.net.cn/plugin?id=4008)
## 常见问题
#### 1 运行不了,控制台报错,请安装依赖
```npm install ```
```
```
|