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
添加

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

VUX--小白初学使用安装相关推荐

教小白使用Vmware安装苹果虚拟机
教小白使用Vmware安装苹果虚拟机过程所用资源: 链接:https://pan.baidu.com/s/1wqnd3e-aGCQmVNiwCzmybA 提取码:nz19 安装VMware: 安装V ...
小白入门miniconda安装教程
文章目录小白入门miniconada 安装教程 conda miniconda与anaconda 小白入门miniconada 安装教程 conda conda 是一个开源的包.环境管理器,可以用于 ...
基于深度神经网络的遮挡人脸识别算法的研究（小白初学）
基于深度神经网络的遮挡人脸识别算法的研究(小白初学) 研究背景在自然条件下人脸面部的光照变化.角度变化.表情变化以及存在遮挡物,使得采集到的人脸图像存在人脸特征的损失.因此研究遮挡人脸识别算法提高识 ...
小白初学MySQL----Win7下关于安装和初步使用~
从关于SQL一无所知开始~~~所以也就在自己的电脑上试试~~~有本书,但是没有提到关于软件安装方面的东西~~于是问题就来了~~ 首先是软件安装的问题,在MySQL官网上注册(其实也不算很麻烦是吧,也不 ...
datax的工具配置oracle,完全小白级DataX安装配置过程详解
apt-get install openjdk-7-jdk Linux小白,创建和删除文件夹都现问度娘学会的小白,最近被勒令研究一下DataX,当时一脸蒙X,根本木有听过吖,但是领导吩咐了就得办吖,问 ...
vux 组件库首次使用安装
1.首先通过脚手架新建一个项目,过程略. 创建完项目后,在项目里安装vux, 通过命令 npm install vux --save 安装 2.安装vux-loader, 通过命令 npm insta ...
嵌入式linux mongodb,小白在Ubuntu安装mongoDB与mongo-c-driver
目的: 本人从事嵌入式软件,项目中需要使用MongoDB,最终需要熟悉c-driver的API,小白在搭建环境有些浪费时间,故写这文章让与我同样状态的开发人员学习学习. 在Ubuntu上的安装mong ...
linux首次安装mysql密码是多少,Linux小白，初次安装MySQL，大神请绕路
在Linux上安装MySQL肯定不止一种方法,但是作为一名Linux小白,至少要知道一种安装方法,这里就记录一下小白的安装记录. 本系统的版本信息如图所示第一,给你一台Linux服务器,要做的第一件 ...
小新Pro13成功安装黑苹果超详细教程，小白也会安装双系统！
前言最近买了台小新pro13(i5版本),发现可以安装黑苹果,于是请教了很多大神,折腾了两天成功装上了黑苹果. 由于有人指导所以没走多少弯路,在这里感谢指导我安装的大神.因此,我决定把过程步骤写下来 ...

VUX--小白初学使用安装

VUX--小白初学使用安装相关推荐

最新文章

热门文章