Vux的安裝使用

一、Vux的安裝

1.一、vue-cli的vux模板生成項目

能夠直接使用 vue-cli 的模板生成一個 vux 項目

vue init airyland/vux2 projectName

由此能夠直接使用 vux。（或許運行項目可能會報錯，那是 vue-cli 初始項目的通病）

1.二、手動安裝 vux

首先在項目裏安裝vux

npm install vux --save

安裝vux-loader

npm install vux-loader --save-dev

 安裝less-loader 

npm install less less-loader --save-dev

而後在build/webpack.base.conf.js 文件裏修改配置：

加上：  const vuxLoader = require('vux-loader')，將  module.exports 後面的對象賦值給變量 webpackConfig，最後在代碼後面添加 module.exports = vuxLoader.merge(webpackConfig, { plugins: ['vux-ui'] })。示例：

'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')

...

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

這樣就能夠在項目中使用 vux 了，好比在 HelloWorld.vue 文件中

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <group title="cell demo">
      <cell title="VUX" value="cool" is-link></cell>
    </group>
  </div>
</template>

<script>
import { Group, Cell } from 'vux'
export default {
  name: 'HelloWorld',
  components: {
    Group,
    Cell
  },
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<style scoped>
</style>

 參考：https://blog.csdn.net/revival_liang/article/details/78267992