起手一個mpvue項目準備

1，環境配置（http://mpvue.com/mpvue/quickstart.html）

//全局安裝vue-cli3腳手架
npm install -g @vue/cli @vue/cli-init

//建立一個基於 mpvue-quickstart 模板的control-task項目
vue init mpvue/mpvue-quickstart control-task

//定義項目名、APPID、項目描述、是否使用vuex、esLint等

//安裝依賴
cd my-project
$ npm install
$ npm run dev

2，這樣執行npm run dev就能跑起來，打開微信開發者工具將項目導入。在src下修改vue文件就能動態實時打包到dist（轉換後的標準小程序結構目錄）目錄下

3，若是想引入sass寫css，和以前vue同樣下載loader就行

npm install node-sass sass-loader --save-dev

 4，使用iconfont（若是無效記得npn run dev從新構建下）

a,首先將選擇須要用的圖片經過購物車加入項目，而後下載

b,而後在static下新建iconfont文件夾，將下載文件解壓進來

c,而後在App.vue 組件css下引入iconfont.css，也可在其餘全局css中引入@import '../static/iconfont/iconfont.css';

d,頁面直接使用<a class="iconfont" href="#">&#xe616;</a>

5,若是使用相似微信風格的UI 能夠下載weui.css放到static下，在入口src/main.js下引入mport '../static/weui/weui.css'便可使用

6，引入flyio請求數據 https://github.com/wendux/fly

//1,     npm install flyio --save
//2,    在入口文件main.js用引入fly
        import Fly from 'flyio/dist/npm/wx'
        let fly = new Fly()
        Vue.prototype.$fly = fly    
//使用
        this.$fly.get(url).then((res => {
             console.log(resp)
        })          

 7，mork生成隨機數據 （參考 http://mockjs.com/examples.html）

npm install mockjs
//在入口文件調用
const Mock = require('mockjs')
let data = Mock.mock({
    'list|10': [{'id|+1': 1}]
})
 說明規則： 'list|10': [{'id|+1': 1}]
// 屬性名   name （id）
// 生成規則 rule    （++i）
// 屬性值   value    （1）
'name|rule': value（）

 8，使用vuex管理數據

//1, npm install vuex -g
//2,在入口文件main.js中引入
    import store from '@/store/store.js'
    //將store對象放置在Vue的原型上, 爲的是每一個實例均可以使用
    Vue.prototype.$store = store
//3，在組件中觸發存數據
this.$store.dispatch('setData', res.data.subjects)
//4, 在action中發起消息
import {
  DATASFUN
} from './mutation-type'

export default {
  setData ( { commit }, data ) {
    console.log( "actions" )
    //觸發對應的mutation
    commit( DATASFUN , data )
  }
}
//5，在mutation中修改數據
import {
  DATASFUN
} from './mutation-type'

export default {
  [ DATASFUN ] ( state , data ) {
    state.datas = data
  }
}
//6，在組件中使用store的數據
<div>{{datas[0].original_title}}</div>
computed : {
      datas: function() {  //經過方法訪問
        return this.$store.getters.datas;
      }
    },
//7，在state中初始化位置
export default {
  datas : []
}
//8，在getter中動態計算更新數據
export default {
  datas: function(state){
    return state.datas
  }
}
//9，在stroe中管理數據
import Vue from 'vue'
import Vuex from 'vuex'
import store from './store'
import state from './state'
import actions from './actions'
import mutations from './mutations'
import getters from './getters'

// 聲明使用vuex
Vue.use( Vuex )

export default new Vuex.Store( {
  state,
  actions,
  getters,
  mutations
} )

 9，若是不使用store，也能夠配置全局變量

// 1， 在入口文件main.js 將globalData捆綁到Vue原型
//放在Vue實例以後const app = new Vue(App)

Vue.prototype.globalData = getApp().globalData

2，設置全局變量URL
this.globalData.url = '127.0.0.1:8080'
3，獲取URL
console.log(this.globalData.url)