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)
赞 (0)

相关推荐

  • vue+vux实现移动端文件上传样式

    vue+vux实现移动端文件上传样式

    样式使用的是vux的cell组件 如下图的官方demo样子 上图的样式需要修改一下,把 保护中 修改成一个图片 并且内嵌一个input type='file'  就可以拥有好看的样式的文件上传了 <!--引入组件--> import { Cell } from 'vux' <!--官网的组件是这么写的--> <group> <cell title="title" value="value"></cell>

  • 基于Vue框架vux组件库实现上拉刷新功能

    最近公司在研发app,选择了基于Vue框架的vux组件库,现总结在实现上拉刷新功能遇到的坑: 1.问题:只刷新一次,解决方法:需要自己手动重置状态 this.scrollerStatus.pullupStatus = 'default', 2.问题:不能滚动,解决方法:因为启用keep-alive缓存,需要设置 activated () { this.$refs.scroller.reset() } 如果还没效果,请在获取后台数据后,执行如下代码 this.$nxtTick(() => { th

  • Vue+Vux项目实践完整代码

    Vue+Vux项目实践完整代码

    提供完整的路由,services````````````` ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

  • 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的代码讲解

    简介 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中如何添加百度统计代码

    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动态增加表单项并添加验证的代码详解

    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基本指令实例图文讲解

    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实现步骤实例代码讲解

    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

随机推荐