vux 选择器_vue项目中安装和使用vux组件
1.使用npm安装vux
npm install vux --save
2.安装vux-loader(vux2必须配合vux-loader使用)
npm install vux-loader --save-dev
3.安装less-loader(用以正确编译less源码,否则会出现 ' Cannot GET / ')
npm install less less-loader --save-dev
4.安装yaml-loader (以正确进行语言文件读取)
npm install yaml-loader --save-dev
"devDependencies": {
...
"less-loader": "^5.0.0",
"yaml-loader": "^0.5.0"
...
}
5.在build/webpack.base.conf.js 文件进行配置
const vuxLoader = require('vux-loader')
//将module.exports代码赋值给变量const webpackConfig
module.exports = vuxLoader.merge(webpackConfig, { plugins: ['vux-ui'] })
在resolve: {
extensions: ['.js', '.vue', '.json', 'less'],
...
},里加入.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)
}
const createLintingRule = () => ({
// test: /\.(js|vue)$/,
// loader: 'eslint-loader',
// enforce: 'pre',
// include: [resolve('src'), resolve('test')],
// options: {
// formatter: require('eslint-friendly-formatter'),
// emitWarning: !config.dev.showEslintErrorsInOverlay
// }
})
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: [
...(config.dev.useEslint ? [createLintingRule()] : []),
{
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]')
}
},
{
test: /\.less$/,
loader: "style-loader!css-loader!less-loader",
}
]
},
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'
}
}
module.exports = vuxLoader.merge(webpackConfig, {plugins: ['vux-ui']})
6.main.js中添加全局引用
import {ToastPlugin,LoadingPlugin} from 'vux'
Vue.use(ToastPlugin)
Vue.use(LoadingPlugin)
组件中局部引用
export default {
import {Datetime} from 'vux'
components: {
Datetime
}
}
@on-confirm="queryMonthLend">
7.index.vue中使用
created() {
this.$vux.loading.show({
"text": "加载中..."
})
},
若在安装过程中报错:
*!!vue-style-loader!css-loader?{"sourceMap":true}!../../../../vue-loader
可参考https://blog.csdn.net/genius_...
vux 选择器_vue项目中安装和使用vux组件相关推荐
- vux 选择器_vue项目中vux的使用
vux VUX 是基于 WeUI 和 Vue.js 的 移动端 UI 组件库,提供丰富的组件满足移动端(微信)页面常用业务需求. 在vue-cli中使用步骤如下: 1.安装: npm i vux -S ...
- vant部署_详解VUE项目中安装和使用vant组件
Vant 是有赞前端团队基于有赞统一的规范实现的 Vue 组件库,提供了一整套 UI 基础组件和业务组件. 特性 50+ 个经过有赞线上业务检验的组件 单元测试覆盖率超过 90% 完善的中英文文档和示 ...
- VUE项目中安装和使用vant组件
Vant 是有赞前端团队基于有赞统一的规范实现的 Vue 组件库,提供了一整套 UI 基础组件和业务组件. 特性 50+ 个经过有赞线上业务检验的组件 单元测试覆盖率超过 90% 完善的中英文文档和示 ...
- webpack 的基本使用—— 创建列表隔行变色项目||在项目中安装和配置 webpack
创建列表隔行变色项目 ① 新建项目空白目录,并运行 npm init –y 命令,初始化包管理配置文件 package.json ② 新建 src 源代码目录 ③ 新建 src -> index ...
- 什么是loader、项目中安装loader、使用loader管理css格式文件
1.什么是loader? 可以加载和使用项目中的css文件 https://www.webpackjs.com/concepts/loaders/ 1.1.css文件处理-准备工作 1.2.css文件 ...
- Android 项目中常用到的第三方组件
项目中常用到的第三方组件 1 社会化分享 ShareSDK-Core-2.5.9.jar ShareSDK-QQ-2.5.9.jar ShareSDK-QZone-2.5.9.jar ShareSDK ...
- vue踩坑记-在项目中安装依赖模块npm install报错
在维护别人的项目的时候,在项目文件夹中安装npm install模块的时候,报错如下: 图片.png 图片.png npm ERR! path D:\ShopApp\node_modules\fsev ...
- axios nodejs 上传图片_vue项目中使用axios上传图片等文件操作
axios 简介 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征: 从浏览器中创建 XMLHttpRequest 从 node.js 发出 ...
- vue怎么vw布局好用_Vue项目中使用vw实现移动端适配-阿里云开发者社区
我们在vue移动端项目中的适配一般都采用rem,但是rem也不是能兼容所有的终端. 随着viewport单位越来越受到众多浏览器的支持,下面将简单介绍怎么实现vw的兼容问题,用vw代替rem 当我们采 ...
最新文章
- shell中十种实现自加的方法
- 【Linux】【服务器】 CentOS7下关机和重启命令
- python join_详解Python中的join()函数的用法
- 网易云信安全体系全面升级,获公安部信息安全认证
- c语言readdir函数功能,C语言readdir()函数:读取目录函数
- redis 连接池_SpringBoot整合redis
- Java怎么去最高分最低分,深入java虚拟机:原子操作ParkEvent和Parker
- 基于WDF的PCI/PCIe接口卡Windows驱动程序(3)- 驱动程序代码(头文件)
- 约会软件上的小姐姐,其实是StyleGAN生成的假人
- (亲测无坑)Centos7.x使用kubeadm安装K8s集群1.15.0版本
- 推理速度快千倍!谷歌开源语言模型Transformer-XL
- 系统架构设计-计算机组成与体系结构
- PHP求100-1000之间的水仙花数
- 熊猫烧香、威金的解决办法
- thinkphp创建临时表
- 【日语口语词典学习】第0005页
- CMake GUI下载及安装教程
- 全彩OLED(SSD1351)程序设计与应用(2)显示优化:显存的设计与实现
- gis 矢量切片读取_ArcGIS 矢量切片全接触(多图)
- 网络安全进阶篇(十一章-5)APP渗透测试篇(上)