VUX新手入坑记录

前端入坑需谨慎啊! 想玩玩VUE做移动端的web开发,貌似VUX这个框架还蛮不错的,用了微信官方的WEUI界面,视觉效果可以保持一致.

但是前端轮子的更新换代速度也太tm快了~很容易就出现各种依赖版本问题,以及各种文档过时的情况,这不试试使用最新版本的Vue CLI脚手架@vue/cli 4.2.2创建项目后按照VUX官网文档进行到这一步傻脸了:

vux2必须配合vux-loader使用, 请在build/webpack.base.conf.js里参照如下代码进行配置：

const vuxLoader = require('vux-loader')
const webpackConfig = originalConfig // 原来的 module.exports 代码赋值给变量 webpackConfig

module.exports = vuxLoader.merge(webpackConfig, {
  plugins: ['vux-ui']
})

VUX官方文档中使用的还是vue-cli老版本的脚手架来搞的,尼玛新版的脚手架创建项目后根本就没有build/webpack.base.conf.js这个文件…连build目录都没有,还必须要用vue-loader,找了一圈才在这里找到解决方法:

https://github.com/airyland/vux/issues/3383

在项目根目录下(和package.json同级别)手动创建vue.config.js文件,然后修改内容如下:

configureWebpack: config => {
  require('vux-loader').merge(config, {
    plugins: [
      'vux-ui',
      'progress-bar',
      'duplicate-style',
      {
        name: 'less-theme',
        path: 'src/assets/styles/vux_theme.less',
        options: {
          cssProcessorOptions: {
            safe: true,
            zindex: false,
            autoprefixer: {
              add: true,
              browsers: [
                'iOS >= 7',
                'Android >= 4.1',
              ],
            },
          },
        },
      },
    ],
  })
}

附上测试用的Home.vue代码:

<template>
  <div>
    <group>
      <cell is-link title="Simple" link="/component/tabbar-simple"></cell>
      <cell is-link title="Switch icons" link="/component/tabbar-icon"></cell>
    </group>
    <tabbar>
      <tabbar-item>
        <img slot="icon" src="../assets/logo.png">
        <span slot="label">Wechat</span>
      </tabbar-item>
      <tabbar-item show-dot>
        <img slot="icon" src="../assets/logo.png">
        <span slot="label">Message</span>
      </tabbar-item>
      <tabbar-item selected link="/component/demo">
        <img slot="icon" src="../assets/logo.png">
        <span slot="label">Explore</span>
      </tabbar-item>
      <tabbar-item badge="2">
        <img slot="icon" src="../assets/logo.png">
        <span slot="label">News</span>
      </tabbar-item>
    </tabbar>
  </div>
</template>

<script>
import { Tabbar, TabbarItem, Group, Cell } from 'vux'
export default {
  components: {
    Tabbar,
    TabbarItem,
    Group,
    Cell
  }
}
</script>