使用Vux 的那些坑，

求大佬不要黑我，仅供跟我一样的小白学习

使用vux遇到那些坑

1. 对于这个问题我真的很无语了
2. 如果你想直接用vux中的组件，对于搭建环境这个问题我弄了好几个小时，按照中文文档上的写法配置，
3. npm install vux –save
4. 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的全家桶工具来构建，就不会错。
node和npm的安装就跳过。
npm install vue-cli -g
vue init airyland/vux2 projectPath
cd projectPath
npm install –registry=https://registry.npm.taobao.org
npm run dev
这样根本就不需要改build/webpack.base.conf.js文件的内容

---

直接生成的文件就这样

'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')
const vuxLoader = require('vux-loader')

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}

let webpackConfig = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: './src/main.js'
  },
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test')]
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('media/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }
    ]
  }
}


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

如果你要搭建简单的页面App.vue文件里面的内容不用动

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style lang="less">
@import '~vux/src/styles/reset.less';

body {
  background-color: #fbf9fe;
}
</style>

敢于main.js文件可以配置

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import FastClick from 'fastclick'
import VueRouter from 'vue-router'
import App from './App'
import Index from './components/Index'



Vue.use(VueRouter)

const routes = [
    {
      path: '/',
      component: Index
    },

]

const router = new VueRouter({
  routes
})

FastClick.attach(document.body)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  router,
  render: h => h(App)
}).$mount('#app-box')

这样在components文件下创建一个index.vue文件

<template>
       <div class="main">
        <!--轮播-->
        <div>
             <swiper auto height="150px">
              <swiper-item class="black">
                  <img src="../assets/1.jpg">             
              </swiper-item>
              <swiper-item class="black">
                  <img src="../assets/2.jpg">   
              </swiper-item>
               <swiper-item class="black">
                  <img src="../assets/3.jpg">   
              </swiper-item>
               <swiper-item class="black">
                  <img src="../assets/4.jpg">   
              </swiper-item>
              <swiper-item class="black" style='background:#39b4b9;'>
                <h2 style="color:#fff"
                 class="title fadeInUp animated">曾经的你</h2>
                 <span style="color:#fff">swiper最好的轮播组件</span>
              </swiper-item>
            </swiper>
        </div>
   </div>
</template>

<script>
import { Grid, GridItem } from 'vux'
import { Swiper, GroupTitle, SwiperItem, XButton, Divider } from 'vux'

export default {
  components: {
    Grid,
    GridItem,
    Swiper, GroupTitle, SwiperItem, XButton, Divider ,
  },
  data () {
    return {    
      news: '头条信息',
      info:[
          {txt:'义务爱了 完成传奇世界H5-王者归来任务 '},
          {txt:'本世神 兑换《传奇世界H5》畅玩级礼包 '}
      ]
    }

  }
}
</script>

<style scoped>
@import '../assets/css/index.css'
</style>

可以说这样你就能够正确的使用vux中提供的组件
根据文档上写的demo即可使用

就练手随便用他的组件和自己写的凑合写了个页面

原谅我菜不会jithub
只能放在百度云上 https://pan.baidu.com/s/1KK8epPANvoXke1_QUK1cEw

下载下来 npm install 安装依赖
npm run dev 跑起来看看