├── src // 我們的項目的源碼編寫文件│ ├── components // 組件目錄│ │ └── head //導航組件│ ├── config //公共配置│ │ └── tips // 提示與加載工具類│ ├── http //http請求配置文件│ │ └── api // 接口調用文件│ │ └── config //fly 配置文件│ ├── pages //項目頁面目錄│ ├── store //狀態管理 vuex配置目錄│ │ └── actions.js //actions異步修改狀態│ │ └── getters.js //getters計算過濾操作│ │ └── mutation-types.js //mutations 類型│ │ └── mutations.js //修改狀態│ │ └── index.js //我們組裝模塊并導出 store 的地方│ │ └── state.js //數據源定義│ ├── stylus //stylus css處理器目錄│ │ └── common.styl // 全局css樣式│ │ └── index.styl // stylus 出口│ │ └── mixin.styl //mixin 方法│ │ └── reset.styl //reset css│ ├── untils //工具函數目錄│ │ └── index.js│ ├── App.vue // APP入口文件│ ├── main.js // 主配置文件

# 全局安裝 vue-cli$ npm install --global vue-cli# 創建一個基于 mpvue-quickstart 模板的新項目$ vue init mpvue/mpvue-quickstart my-project# 安裝依賴$ cd my-project$ npm install# 啟動構建$ npm run dev

# npm安裝 flyio$ npm install flyio --save

 │ ├── http       //http請求配置文件 │ │  └── api.js      // 接口調用文件 │ │  └── config.js     //fly 配置文件

//引入 flyvar Fly=require("flyio/dist/npm/wx")var fly=new Fly;//配置請求基地址// //定義公共headers// fly.config.headers={xx:5,bb:6,dd:7}// //設置超時// fly.config.timeout=10000;// //設置請求基地址// fly.config.baseURL="https://wendux.github.io/"http://添加攔截器fly.interceptors.request.use((config,promise)=>{ //給所有請求添加自定義header config.headers["X-Tag"]="flyio"; return config;})// Vue.prototype.$http=fly //將fly實例掛在vue原型上export default fly

import fly from './config'import qs from 'qs'// 配置API接口地址let root ='接口域名';/** * 接口模版====post * * export const test = params => {return fly.post(`${root}/xx/xx`, qs.stringify(params))}; * * 接口模版====get * * export const test1 = function(){return fly.get(`${root}/api/getNewsList`)} * * * 用法： * 在 頁面用引入 test * import {test} from '../../http/api.js' * * test(params).then(res=>{ console.log(res) }) */export const test = params => {return fly.post(`${root}/xx/xx`, qs.stringify(params))};

# npm安裝 flyio$ npm install stylus --save-dev$ npm install stylus-loader --save-dev

 │ ├── stylus //stylus css處理器目錄 │ │ └── common.styl // 全局css樣式 │ │ └── index.styl // stylus 出口 │ │ └── mixin.styl //mixin 方法 │ │ └── reset.styl //reset css

// 單行顯示省略號no-wrap() text-overflow: ellipsis overflow: hidden white-space: nowrap// 多行顯示省略號no-wrap-more($col) display: -webkit-box -webkit-box-orient: vertical -webkit-line-clamp: $col overflow: hidden//rem轉換 $px / 75 *1rempx2rem($px) $px * 1rpx

@import "./mixin.styl"@import "./reset.styl"@import "./common.styl"

<style lang="stylus" type="text/stylus" rel="stylesheet/stylus"> @import "stylus/index.styl"</style>

│ ├── config      //公共配置 │ │  └── tips.js     // 提示與加載工具類

import Tips from './config/tip'Vue.prototype.$tips=Tips

/** * 提示與加載工具類 */export default class Tips { constructor() { this.isLoading = false; } /** * 彈出提示框 */ static success(title, duration = 500) { setTimeout(() => {  wx.showToast({  title: title,  icon: "success",  mask: true,  duration: duration  }); }, 300); if (duration > 0) {  return new Promise((resolve, reject) => {  setTimeout(() => {   resolve();  }, duration);  }); } } /** * 彈出確認窗口 */ static confirm(text, payload = {}, title = "提示") { return new Promise((resolve, reject) => {  wx.showModal({  title: title,  content: text,  showCancel: true,  success: res => {   if (res.confirm) {   resolve(payload);   } else if (res.cancel) {   reject(payload);   }  },  fail: res => {   reject(payload);  }  }); }); } static toast(title, onHide, icon = "success") { setTimeout(() => {  wx.showToast({  title: title,  icon: icon,  mask: true,  duration: 500  }); }, 300); // 隱藏結束回調 if (onHide) {  setTimeout(() => {  onHide();  }, 500); } } /** * 彈出加載提示 */ static loading(title = "加載中") { if (Tips.isLoading) {  return; } Tips.isLoading = true; wx.showLoading({  title: title,  mask: true }); } /** * 加載完畢 */ static loaded() { if (Tips.isLoading) {  Tips.isLoading = false;  wx.hideLoading(); } } static share(title, url, desc) { return {  title: title,  path: url,  desc: desc,  success: function(res) {  Tips.toast("分享成功");  } }; } static alert (text, ok) { if (ok === void 0) { ok = function (res) { }; } if (!text) {  return; } wx.showModal({  content: text,  showCancel: false,  confirmColor: '#000000',  cancelColor: '#000000',  success: ok }); };}/** * 靜態變量，是否加載中 */Tips.isLoading = false;

│ ├── store      //狀態管理 vuex配置目錄│ │  └── actions.js    //actions異步修改狀態│ │  └── getters.js    //getters計算過濾操作│ │  └── mutation-types.js    //mutations 類型│ │  └── mutations.js    //修改狀態│ │  └── index.js    //我們組裝模塊并導出 store 的地方│ │  └── state.js    //數據源定義

import store from './store'Vue.prototype.$store=store;

const state={ test: 0,}export default state

export const TEST = 'TEST' // 這是測試的

import * as types from './mutation-types'const matations={ /**  * state:當前狀態樹  * data: 提交matations時傳的參數  */ //是否有渠道 [types.TEST] (state,data) {  state.TEST = data; },}export default matations

# 在 store index.js 中引入import Vue from 'vue';import Vuex from 'vuex';import state from './state'import mutations from './mutations'Vue.use(Vuex);export default new Vuex.Store({ state, mutations,})

# 安裝vuex-persistedstate$ npm install vuex-persistedstate --save

import Vue from 'vue';import Vuex from 'vuex';import state from './state'import mutations from './mutations'import createPersistedState from 'vuex-persistedstate'Vue.use(Vuex);export default new Vuex.Store({ state, mutations, plugins: [ createPersistedState({  storage: {  getItem: key => wx.getStorageSync(key),  setItem: (key, value) => wx.setStorageSync(key, value),  removeItem: key => {}  } }) ]})