Vux 配置(vue-cli2.x)

Vux 配置

1.安装vux

npm install vux -- save

---

2.安装vux-loader

npm intall vux-loader --save-dev

---

3.安装less-loader（正确编译less源码，否则会报’cannot GET’错误）

npm install less less-loader --save-dev

---

4.安装yaml-loader （以正确的语言文件读取）

npm install yaml-loader --save-dev

---

5.在build/webpack.base.conf.js中引入 vux-loader

const vuxLoader = require("vux-loader");                                                                            build/webpack.base.conf.js

---

6.修改配置

修改引入方式

module.exports = {                                                                                                  build/webpack.base.conf.js
  context: path.resolve(__dirname, '../'),
  entry: {
    app: './src/main.js'
  },
  ...

• 修改为

const webpackConfig = {                                                                                             build/webpack.base.conf.js
  context: path.resolve(__dirname, '../'),
  entry: {
    app: './src/main.js'
  },
  ...

less 解析

resolve: {                                                                                                         build/webpack.base.conf.js
  extensions: ['.js', '.vue', '.json'],
  alias: {
    'vue$': 'vue/dist/vue.esm.js',
    '@': resolve('src'),
  }
},

• 修改为

resolve: {                                                                                                         build/webpack.base.conf.js
  extensions: ['.js', '.vue', '.json', '.less'],
  alias: {
    'vue$': 'vue/dist/vue.esm.js',
    '@': resolve('src'),
  }
},

配置 引入Vux 以及 配置less样式全局变量 文件所在路径

module.exports = vuxLoader.merge(webpackConfig, {                                                                   build/webpack.base.conf.js
  plugins: [
    {name: 'vux-ui'},
    {
      name: 'less-theme',
      path: 'src/style/theme.less'
    }
  ]
})

在配置好的less文件下使用官方提供的全局变量，可快速批量修改vux组件样式

@header-background-color: #fff;                                                                                          src/style/theme.less
@header-title-color: #4c4c4c;
@header-arrow-color: #4c4c4c;

使用注意事项

标签属性中，如

left-options.preventGoBack
left-options.backText

属性绑定 (左侧组件中，文字设置为’’，并阻止组件中的路由回退事件)

<x-header :left-option="{backText: '', preventGoBack: true}"></x-header>

---

事件绑定 (直接复制官方给的事件到标签中，并绑定自定义函数)

<x-header :left-option="{backText: '', preventGoBack: true}" @on-click-back="func"></x-header>

---

使用插槽 slot （如XHeader）


通过父组件template中slot属性的值，关联子组件slot中name属性的值，匹配则替换


若子组件中，slot未定义name属性，该slot可以被父组件双标签内的内容替换（或没未定义slot的template）


若同时匹配到多个slot，则都会被替换

父组件    <x-header>                                            子组件    <div class="vux-header-title-area" v-if="shouldOverWriteTitle">
            <template slot="overwrite-left">     -------------------->     <slot name="overwrite-title"></slot>
              返回                                                    
            </template>                                               
            
            <template>                           -------------------->     <slot></slot>
              返回                               -------------------->     <slot></slot>
            </template>                                               
          </x-header>                                                    </div>