微信网页开发之使用vux.UI进行布局（三）

vux是基于WeUI整出来的，风格很‘微信’，用户闻着‘很香’

使用步骤：

鉴于官方文档看起来真的是头疼，还好参照大佬们的配置还是很轻松过坑了。
https://www.jianshu.com/p/930d9bb22736

1、在已有的项目中安装vux和vux-loader

说明一下：vux的组件样式都是用less写的，所以要安装less
cnpm install vux
cnpm install vux-loader
cnpm install less less-loader --save-dev

2、依照文档对webpack.base.conf.js进行配置

配置

代码块如下 (原来的 module.exports 代码赋值给变量 webpackConfig)：

const vuxLoader = require('vux-loader')
const webpackConfig = originalConfig // 原来的 module.exports 代码赋值给变量 webpackConfig
module.exports = vuxLoader.merge(webpackConfig, {
  plugins: ['vux-ui']
})

在webpack.base.conf.js中还需要配置一下resolve，然后自己写样式也可以用less

配置resolve

3、因为微信网页开发是移动端，所以有必要做一些优化：

a. 在index.html中加入移动端必备代码，详解：https://blog.csdn.net/ws379374000/article/details/78686101

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">

4、然后可以开心的进行开发了

vux-loader在打包的时候会按需引入，在项目中使用到的vux组件都是在单文件组件中自行引入。

示例代码：

<template>
  <div id="app">
    <button @click="selectPic">选择图片</button>
    <loading :show="show1" text="Loading"></loading>
    <alert v-model="show" :title="'你吃饭了吗？'"> {{ '还没啊~' }}</alert>
  </div>
</template>
<script>
import { Loading,Alert } from 'vux'
export default {
  name: 'App',
  components: {
    Loading,
    Alert
  },
  data() {
    return {
      show1: true,
      show: ''
    }
  }
</script>

常用的组件也可以进行全局注册，main.js中：

// 在入口文件全局引入
import Vue from 'vue'
import { Loading} from 'vux'
Vue.component('loading', Loading)

演示效果：

演示效果

感谢vux的开发大佬们~~~（开发过程持续遇到的坑会在此继续编辑加上）