vue基于vux的移动端架构

项目架构

---

vue移动端解决方案

使用技术

• vue移动端ui解决方案 vux
• 适配移动端方案 px2rem
• css解决方案 sass
• 状态管理器 vuex

其他

• cnpm

安装基于vux脚手架

npm install vue-cli -g # 如果还没安装
vue init airyland/vux2 projectPath

cd projectPath
npm install --registry=https://registry.npm.taobao.org # 或者 cnpm install 或者  yarn
npm run dev #  或者  yarn dev

移动端适配px2rem

• 安装

npm install px2rem-loader  lib-flexible --save 

• 在main.js中引入lib-flexible

import 'lib-flexible/flexible.js'

• 在build下的 utils.js中，找到generateLoaders 方法，添加以下代码

const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
    remUnit: 37.5
    }
}

function generateLoaders (loader, loaderOptions) {
    const loaders = [cssLoader, px2remLoader]
    if (loader) {
        loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
        sourceMap: options.sourceMap
        })
    })

• tips

架入sass

npm install --save-dev sass-loader
//sass-loader依赖于node-sass
npm install --save-dev node-sass

在build文件夹下的webpack.base.conf.js的rules里面添加配置

{
  test: /\.sass$/,
  loaders: ['style', 'css', 'sass']
}

<style lang="scss">即可

vuex

新建一个文件夹 vuex 里面放一个store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const state = {
  count:0

}

// 然后给 actions 注册事件处理函数，当这个函数被触发时，将状态提交到 mutaions中处理
const actions = {
  increment: ({commit}) => commit('increment'), // 提交到mutations中处理
  decrement: ({commit}) => commit('decrement'),
}
// 更新状态
const mutations = {

  UPDATE_LOADING (state, status) {
    state.isLoading = status
  },
  // 路由跳转
  UPDATE_DIRECTION (state, direction) {
    state.direction = direction
  },

  /**
   * 默认的方法
   */
  increment (state) {
    state.count = state.count + 5
  },
  decrement (state) {
    state.count = state.count - 3
  }
}
// 获取状态信息
const getters = {
  // 获取city
  getCity (state) {
    return state.regist.city
  }
}

// 下面这个相当关键了，所有模块，记住是所有，注册才能使用
export default new Vuex.Store({
  state,
  mutations,
  actions,
  getters
})

在main.js中引入

import store from './vuex/store'
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app-box')