一.安裝

• 安裝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
添加

const vuxLoader = require(‘vux-loader’)

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

修改

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

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 clientdgram: 'empty',fs: 'empty',net: 'empty',tls: 'empty',child_process: 'empty'} } //新加入的代碼，表示引入插件 VUX module.exports = vuxLoader.merge(webpackConfig, { plugins: ['vux-ui'] })

三.局部注冊

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

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

引入之后還需要注冊

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

示例：引入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 }]}}

總結(jié)

以上是生活随笔為你收集整理的VUX--小白初学使用安装的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。