vue 添加vux的代码讲解
简介
Vux(读音 [v'ju:z],同views)是基于WeUI和Vue(2.x)开发的移动端UI组件库,主要服务于微信页面。
基于webpack+vue-loader+vux可以快速开发移动端页面,配合vux-loader方便你在WeUI的基础上定制需要的样式。
vux-loader保证了组件按需使用,因此不用担心最终打包了整个vux的组件库代码。
vux并不完全依赖于WeUI,但是尽量保持整体UI样式接近WeUI的设计规范。最初目标是创建一个易用,实用,美观的移动端UI组件库,现在离理想状态还有不少距离,因此需要大家及时反馈问题及贡献代码。
1、命令添加vux
npm install vux --save
2、在build/webpack.base.conf.js中配置
const vuxLoader = require('vux-loader') const webpackConfig = originalConfig // 原来的 module.exports 代码赋值给变量 webpackConfig //即将原来的module.exports 改为 const webpackConfig module.exports = vuxLoader.merge(webpackConfig, { plugins: [{ name: 'vux-ui' }] })
3、添加less
npm install less less-loader --save-dev
4、添加yaml-loader
npm install yaml-loader --save-dev
5、添加vux-loader
npm install vux-loader --save-dev
6、在main.js中添加
const FastClick = require('fastclick') FastClick.attach(document.body) import VueRouter from 'vue-router' Vue.use(VueRouter)
相关推荐
-
Vue中使用vux的配置详解
Vue中使用vux的配置,分为两种情况: 一.根据vux文档直接安装,无需手动配置 npm install vue-cli -g // 如果还没安装 vue init airyland/vux2 my-project // 创建名为 my-project 的模板 cd my-project // 进入项目 npm install --registry=https://registry.npm.taobao.org // 开始安装 npm run dev // 运行项目 二.想在已创建的Vue工程
-
基于Vue框架vux组件库实现上拉刷新功能
最近公司在研发app,选择了基于Vue框架的vux组件库,现总结在实现上拉刷新功能遇到的坑: 1.问题:只刷新一次,解决方法:需要自己手动重置状态 this.scrollerStatus.pullupStatus = 'default', 2.问题:不能滚动,解决方法:因为启用keep-alive缓存,需要设置 activated () { this.$refs.scroller.reset() } 如果还没效果,请在获取后台数据后,执行如下代码 this.$nxtTick(() => { th
-
Vue+Vux项目实践完整代码
提供完整的路由,services````````````` ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
-
vue+vux实现移动端文件上传样式
样式使用的是vux的cell组件 如下图的官方demo样子 上图的样式需要修改一下,把 保护中 修改成一个图片 并且内嵌一个input type='file' 就可以拥有好看的样式的文件上传了 <!--引入组件--> import { Cell } from 'vux' <!--官网的组件是这么写的--> <group> <cell title="title" value="value"></cell>
-
vue 添加vux的代码讲解
简介 Vux(读音 [v'ju:z],同views)是基于WeUI和Vue(2.x)开发的移动端UI组件库,主要服务于微信页面. 基于webpack+vue-loader+vux可以快速开发移动端页面,配合vux-loader方便你在WeUI的基础上定制需要的样式. vux-loader保证了组件按需使用,因此不用担心最终打包了整个vux的组件库代码. vux并不完全依赖于WeUI,但是尽量保持整体UI样式接近WeUI的设计规范.最初目标是创建一个易用,实用,美观的移动端UI组件库,现在离理想状
-
vue添加class样式实例讲解
vue提供了一个动态添加class的v-bind:class(:class) 对象,可以使用:class进行clas动态的切换.案例中将通过使用:class设置 字体为红色. 1.新建一个html代码页面. 2.在html代码页面创建一个<div>同时添加id为app,并添加一段文本 3.引入vue.js文件.使用<scrtip>标签引入vue文件. 4.创建vue实例.新建一个<script>标签,然后使用new Vue()创建实例. 代码: <script&g
-
vue中如何添加百度统计代码
一.在百度统计网站中添加自己的网站 1.官网地址:https://tongji.baidu.com/web/welcome/login. 2.在'管理'一栏中选择'网站列表',然后选择新增网站,添加成功后点击代码获取,可以获取统计代码. 二. 在maim.js下百度统计代码添加 var _hmt = _hmt || []; window._hmt = _hmt; // 必须把_hmt挂载到window下,否则找不到 (function () { var hm = document.createE
-
vue slot与传参实例代码讲解
插槽分为默认插槽和具名插槽: 默认插槽: //父组件 <div> <h3>父组件</h3> <testChild> <div>默认插槽</div> </testChild> </div> //子组件 <div> <h4>子组件</h4> <slot></slot> </div> 具名插槽: 注意:具名插槽需要包裹在 template 标
-
Vue中使用vux配置代码详解
一.根据vux文档直接安装,无需手动配置 npm install vue-cli -g // 如果还没安装 vue init airyland/vux2 my-project // 创建名为 my-project 的模板 cd my-project // 进入项目 npm install --registry=https://registry.npm.taobao.org // 开始安装 npm run dev // 运行项目 二.想在已创建的Vue工程里引入vux组件 <1>. 在项目里安装
-
vue+elementUI动态增加表单项并添加验证的代码详解
参考elementUI官网以及网上的其他一些资料.话不多说,直接贴代码. htmt部分: <div id="app" style="width: 500px;"> <el-form :model="environmentForm" ref="environmentForm"> <el-row :gutter="24" v-for=&quo
-
Vue基本指令实例图文讲解
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合.另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动. 一. v-on指令 1. 基础用法 v-on是事件监听的指令, 下面来看简单用法 <!DOCTYPE html> <html lang="en"&
-
vue全家桶-vuex深入讲解
目录 使用 index.js getters.js system.js 全局使用:main.js文件中 Vuex概述 Vuex中的核心特性 A.State this.$store.state.全局数据名称-组件访问State中的数据的第一种方式 组件访问State中的数据的第二种方式:按需导入 B.Mutation this.$store.commit是触发Mutation的第一种方式 触发Mutation的第二种方式,按需导入 C.Action this.$store.dispatch()是触
-
Vue添加请求拦截器及vue-resource 拦截器使用
一.现象 统一处理错误及配置请求信息 二.解决 1.安装 axios , 命令: npm install axios --save-dev 2.在根目录的config目录下新建文件 axios.js ,内容如下: import axios from 'axios' // 配置默认的host,假如你的API host是:http://api.htmlx.club axios.defaults.baseURL = 'http://api.htmlx.club' // 添加请求拦截器 axios.
-
Spring boot + mybatis + orcale实现步骤实例代码讲解
接着上次的实现, 添加 mybatis 查询 orcale 数据库 第一步: 新建几个必须的包, 结果如下 第二步: 在service包下新建personService.java 根据名字查person方法接口 package com.example.first.service; import com.example.first.entity.Person; public interface personService { Person queryPersonByName(String name
随机推荐
- SQLite字符串比较时的大小写问题解决方法
- mybatis 项目配置文件实例详解
- ORACLE8的分区管理
- jQuery 中关于CSS操作部分使用说明
- PHP preg_match的匹配多国语言的技巧
- iOS 中Swift仿微信添加提示小红点功能(无数字)
- Windows中使用wxPython和py2exe开发Python的GUI程序的实例教程
- Cookies的各方面知识(基础/高级)深度了解
- ASP.NET 文件断点续传实现代码
- BootStrap3学习笔记(一)之网格系统
- Android控件之使用ListView实现时间轴效果
- 浅析如何利用JavaScript进行语音识别
- js操作时间(年-月-日 时-分-秒 星期几)
- JavaScript中字符串拼接的基本方法
- 利用jquery操作Radio方法小结
- 基于Nodejs利用socket.io实现多人聊天室
- SQL Server使用Merge语句当源表数据集为空时,无法进行查询的问题
- C#自定义HttpFilter模块完善实例
- CSS Filter背景透明提示
- 解析Android中Animation动画的编写要点