1、首先通过脚手架新建一个项目，过程略。

创建完项目后，在项目里安装vux，通过命令 npm install vux --save 安装

2、安装vux-loader，

通过命令 npm install vux-loader --save-dev 安装（vux文档没说明）

3、安装less-loader，

通过命令 npm install less less-loader --save-dev 安装

4、在文件根目录下创建 build 文件夹

在 build 文件夹中创建 webpack.base.conf.js 文件，并进行配置

4.1、webpack.base.conf.js 代码如下

'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')function resolve (dir) {return path.join(__dirname, '..', dir)
}
const vuxLoader = require('vux-loader')
const webpackConfig  = {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')]},{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]')}}]}
}
module.exports = vuxLoader.merge(webpackConfig, { plugins: ['vux-ui'] })

5、然后根据 vux 组件库官方的方式进行局部、全局的引入并使用即可

案例：以下为局部引入案例

在 vue 的单页面文件夹中设置

<template><div><divider>default</divider><box gap="10px 10px"><x-button>submit</x-button><x-button type="primary">primary</x-button><x-button type="warn">Delete</x-button><divider>link</divider><x-button type="primary" link="/demo">Go to demo list</x-button><x-button type="default" link="BACK">Back</x-button><divider>action type</divider><x-button type="primary" action-type="button">submit</x-button><x-button type="warn" action-type="reset">reset</x-button><divider>loading</divider><x-button type="default" show-loading>submit</x-button><x-button type="primary" show-loading>submit</x-button><x-button type="warn" show-loading>submit</x-button><divider>mini</divider><x-button mini>submit</x-button><x-button mini type="primary">primary</x-button><x-button mini type="warn">Delete</x-button><br><x-button mini plain>submit</x-button><x-button mini plain type="primary">primary</x-button><x-button mini plain type="warn">primary</x-button><divider>plain</divider><x-button plain>submit</x-button><x-button plain type="primary">primary</x-button><x-button plain type="warn">warn</x-button><divider>you can customize styles</divider><x-button plain type="primary" style="border-radius:99px;">primary</x-button><x-button plain type="primary" class="custom-primary-red">primary</x-button><divider>disabled</divider><x-button disabled>disable submit</x-button><x-button type="primary" disabled>disable primary</x-button><x-button type="warn" disabled>disable Delete</x-button><x-button mini disabled>disable mini submit</x-button><x-button mini type="primary" disabled>disable mini primary</x-button><x-button mini type="warn" disabled>disable mini Delete</x-button><x-button plain disabled>disable plain</x-button><x-button plain type="primary" disabled>disable plain primary</x-button><divider>use :text and :disabled</divider><x-button :text="submit001" :disabled="disable001" @click.native="processButton001" type="primary"></x-button><divider>combined with flexbox</divider><flexbox><flexbox-item><x-button type="primary">primary</x-button></flexbox-item><flexbox-item><x-button type="warn">Delete</x-button></flexbox-item></flexbox><divider>combined with flexbox</divider><flexbox><flexbox-item><x-button type="default">default</x-button></flexbox-item><flexbox-item><x-button type="primary">primary</x-button></flexbox-item><flexbox-item><x-button type="warn">Delete</x-button></flexbox-item></flexbox></box><divider>iOS Gradients(v2.7.4)</divider><box gap="10px 10px"><x-button :gradients="['#1D62F0', '#19D5FD']">iOS Gradients</x-button><x-button :gradients="['#A644FF', '#FC5BC4']">iOS Gradients</x-button><x-button :gradients="['#FF2719', '#FF61AD']">iOS Gradients</x-button><x-button :gradients="['#6F1BFE', '#9479DF']">iOS Gradients</x-button><x-button :gradients="['#FF5E3A', '#FF9500']">iOS Gradients</x-button></box></div>
</template><script>
// 局部引入对应的组件
import { XButton, Box, Flexbox, FlexboxItem, Divider } from 'vux'export default {// 对应的组件实例化components: {XButton,Box,Flexbox,FlexboxItem,Divider},methods: {change (value) {console.log('change:', value)},processButton001 () {this.submit001 = 'processing'this.disable001 = true}},data () {return {submit001: 'click me',disable001: false}}
}
</script><style lang="less">
.custom-primary-red {border-radius: 99px!important;border-color: #CE3C39!important;color: #CE3C39!important;&:active {border-color: rgba(206, 60, 57, 0.6)!important;color: rgba(206, 60, 57, 0.6)!important;background-color: transparent;}
}
</style>

效果图：

注意引入出现以下报错时：

vux 组件库首次使用安装相关推荐

Thorui组件库的安装与使用
目前uni版组件默认支持App端(IOS和Android).H5.微信小程序.QQ小程序.支付宝小程序.百度小程序.头条小程序,是仅次于uviewUi组件库之后的非常好用的组件库. 1.Thorui组 ...
使用VUX组件库，苹果系统升级至IOS16后样式错乱
cell-form-preview2, form-preview组件中lable宽度被拉甚至100%: 原因: IOS16 系统不支持text-align-last 属性,VUX组件库源码又长久不维护 ...
使用vux组件库常见报错（$t）处理
错误一: [Vue warn]: Property or method "$t" is not defined on the instance but referenced dur ...
vux组件库更换主题颜色的方法
1.在vue项目的src目录下建立style文件夹 2.在style文件夹中建立theme.less(你想要修改的插件主题,可以参考官网给出的https://github.com/airyland/v ...
Vue CLI 3开发中试用UIkit 3组件库
一.UIkit组件库与vuikit简介在选择好意中的前端开发基本框架后,接下来一个重要任务就是选择一款好的UI组件库.其中,UIkit组件库是一款基于Less+JS的一款轻量级.模块化.响应式的前端 ...
React--》UI组件库ant-design的介绍与使用
目录 Ant Design的介绍与使用安装与使用自定义主题 Ant Design的介绍与使用 Ant Design是阿里蚂蚁金服团队基于React开发的ui组件,主要用于中后台系统的使用.其官方网 ...
Vue.js_04_组件_Element组件库_组件通信_PropsDown_EventsUp
Vue.js 四天课程学习笔记_第4天课程内容概要: 1. 前情回顾 2. 通过demo再次复习一下计算属性是如何生成过滤后的数组 3. Vue实例的生命周期(11个钩子) 4. 介绍组件化思 ...
Blazor学习之旅 (8) MudBlazor组件库介绍
[Blazor]| 总结/Edison Zhou 大家好,我是Edison. 为了实现一个Web应用系统,需要有个看起来不丑的UI,而对于.NET程序员来说要做全栈开发还是有点难,而本篇介绍的这个UI ...
vue全局安装jquery，vue使用bootstrap框架，vue中封装websocket通讯，vue引入element-ui 组件库，引入highcharts图表插件
vue安装jquery: 1.使用vue-cli创建好vue项目后,在项目文件夹下,使用命令npm install jquery --save-dev 引入jquery. 2.修改项目文件 build ...

vux 组件库首次使用安装

1、首先通过脚手架新建一个项目，过程略。

2、安装vux-loader，

3、安装less-loader，

4、在文件根目录下创建 build 文件夹

4.1、webpack.base.conf.js 代码如下

5、然后根据 vux 组件库官方的方式进行局部、全局的引入并使用即可

效果图：

注意引入出现以下报错时：

vux 组件库首次使用安装相关推荐

最新文章

热门文章

vux 组件库首次使用安装

1、首先通过脚手架新建一个项目，过程略。

2、安装vux-loader，

3、安装less-loader，

4、在文件根目录下创建 build 文件夹

4.1、webpack.base.conf.js 代码如下

5、然后根据 vux 组件库官方的方式进行 局部 、 全局 的引入并使用即可

效果图：

注意引入出现以下报错时：

vux 组件库首次使用安装相关推荐

最新文章

热门文章

5、然后根据 vux 组件库官方的方式进行局部、全局的引入并使用即可