VUX--小白初學使用安裝

一.安裝

• 安裝vux
  npm install vux --save
• VUX 必須配合 vux-loader使用,保證了組件按需使用
  npm install vux-loader --save-dev
• 正確編譯less源碼
  npm install less less-loader --save-dev
• 正確進行語言文件讀取
  npm install yaml-loader --save-dev

二.配置（加2改2）
build–>webpack.base.conf.js
添加

1. const vuxLoader = require(‘vux-loader’)
2. module.exports =
   vuxLoader.merge(webpackConfig, { plugins: [‘vux-ui’] })
   (添加到最後一行，意思是引用插件vux)

修改

1. const webpackConfig = originalConfig originalConfig表示的是 原來的
   module.exports 代碼，把 module.exports 的值賦給 webpackConfig

2. extensions: [’.js’, ‘.vue’, ‘.json’]里加入’.less’,如extensions: [’.js’,
   ‘.vue’, ‘.json’,’.less’]

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


//moudle.exports  替換爲 const webpackConfig
const 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','.less'],
    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'), resolve('node_modules/webpack-dev-server/client')]
      },
      {
        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]')
        }
      }
    ]
  },
  node: {
    // prevent webpack from injecting useless setImmediate polyfill because Vue
    // source contains it (although only uses it if it's native).
    setImmediate: false,
    // prevent webpack from injecting mocks to Node native modules
    // that does not make sense for the client
    dgram: 'empty',
    fs: 'empty',
    net: 'empty',
    tls: 'empty',
    child_process: 'empty'
  }
}
//新加入的代碼，表示引入插件 VUX
module.exports = vuxLoader.merge(webpackConfig, { plugins: ['vux-ui'] })

三.局部註冊

1. 在需要使用vux的組件裏引入，只能在該組件中使用

   <script>
   	import {需要的vux中的組件名} from 'vux'
   </script>
   

2. 引入之後還需要註冊

export default{
	components:{
		需要的vux中的組件名
	}
}

3. 示例：引入vux中的 基本折線圖
   html代碼

   		 <v-chart :data="data" prevent-default>
   	      <v-scale x :tick-count="3" />
   	      <v-tooltip :show-item-marker="false" show-x-value />
   	      <v-line />
   	    </v-chart>
   

js代碼

import { VChart, VTooltip, VLine, VScale } from 'vux'

			components:{
				VChart,
				VTooltip,
				VLine,
				VScale
			},
			data(){
				return{
					data: [
				        { date: '2017-06-05', value: 116 },
				        { date: '2017-06-06', value: 129 },
				        { date: '2017-06-07', value: 135 },
				        { date: '2017-06-08', value: 86 },
				        { date: '2017-06-09', value: 73 },
				        { date: '2017-06-10', value: 85 },
				        { date: '2017-06-11', value: 73 },
				        { date: '2017-06-12', value: 68 },
				        { date: '2017-06-13', value: 92 },
				        { date: '2017-06-14', value: 130 },
				        { date: '2017-06-15', value: 245 },
				        { date: '2017-06-16', value: 139 },
				        { date: '2017-06-17', value: 115 },
				        { date: '2017-06-18', value: 111 },
				        { date: '2017-06-19', value: 309 },
				        { date: '2017-06-20', value: 206 },
				        { date: '2017-06-21', value: 137 },
				        { date: '2017-06-22', value: 128 },
				        { date: '2017-06-23', value: 85 },
				        { date: '2017-06-24', value: 94 },
				        { date: '2017-06-25', value: 71 },
				        { date: '2017-06-26', value: 106 },
				        { date: '2017-06-27', value: 84 },
				        { date: '2017-06-28', value: 93 },
				        { date: '2017-06-29', value: 85 },
				        { date: '2017-06-30', value: 73 },
				        { date: '2017-07-01', value: 83 },
				        { date: '2017-07-02', value: 125 },
				        { date: '2017-07-03', value: 107 },
				        { date: '2017-07-04', value: 82 },
				        { date: '2017-07-05', value: 44 },
				        { date: '2017-07-06', value: 72 },
				        { date: '2017-07-07', value: 106 },
				        { date: '2017-07-08', value: 107 },
				        { date: '2017-07-09', value: 66 },
				        { date: '2017-07-10', value: 91 },
				        { date: '2017-07-11', value: 92 },
				        { date: '2017-07-12', value: 113 },
				        { date: '2017-07-13', value: 107 },
				        { date: '2017-07-14', value: 131 },
				        { date: '2017-07-15', value: 111 },
				        { date: '2017-07-16', value: 64 },
				        { date: '2017-07-17', value: 69 },
				        { date: '2017-07-18', value: 88 },
				        { date: '2017-07-19', value: 77 },
				        { date: '2017-07-20', value: 83 },
				        { date: '2017-07-21', value: 111 },
				        { date: '2017-07-22', value: 57 },
				        { date: '2017-07-23', value: 55 },
				        { date: '2017-07-24', value: 60 }
				      ]
					}
				}