Vux的安装使用

1、Vux的安装

1.1、vue-cli的vux模板生成项目

可以直接使用 vue-cli 的模板生成一个 vux 项目

vue init airyland/vux2 projectName

由此可以直接使用 vux。(或许运行项目可能会报错,那是 vue-cli 初始项目的通病)

1.2、手动安装 vux

首先在项目里安装vux

npm install vux --save

安装vux-loader

npm install vux-loader --save-dev

 安装less-loader 

npm install less less-loader --save-dev

然后在build/webpack.base.conf.js 文件里修改配置:

加上:  const vuxLoader = require('vux-loader'),将  module.exports 后面的对象赋值给变量 webpackConfig,最后在代码后面添加 module.exports = vuxLoader.merge(webpackConfig, { plugins: ['vux-ui'] })。示例:

'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')...const webpackConfig  = {...
}
module.exports = vuxLoader.merge(webpackConfig, { plugins: ['vux-ui'] })

这样就可以在项目中使用 vux 了,比如在 HelloWorld.vue 文件中

<template><div class="hello"><h1>{{ msg }}</h1><group title="cell demo"><cell title="VUX" value="cool" is-link></cell></group></div>
</template><script>
import { Group, Cell } from 'vux'
export default {name: 'HelloWorld',components: {Group,Cell},data () {return {msg: 'Welcome to Your Vue.js App'}}
}
</script><style scoped>
</style>

 参考:https://blog.csdn.net/revival_liang/article/details/78267992

转载于:https://www.cnblogs.com/wenxuehai/p/11415878.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/361433.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Spring Data JPA教程:获取所需的依赖关系

在创建使用Spring Data JPA的应用程序之前&#xff0c;我们需要获取所需的依赖关系。 这篇博客文章标识了必需的组件&#xff0c;并描述了如何使用Maven获得它们。 让我们开始吧。 其他阅读&#xff1a;如果您不熟悉Spring Data JPA&#xff0c;则应该阅读以下博客文章&…

元素属性的添加删除(原生js)

添加属性 odiv.setAttribute("title","hello div!");odiv.setAttribute("class","boxClass");odiv.setAttribute("hello","divTag");//自定义属性设(hello"divTag") 获取属性 var vodiv.getAttribute(&…

framelayout

编写的mail.xml文件: <?xml version"1.0" encoding"utf-8"?><FrameLayout xmlns:android"http://schemas.android.com/apk/res/android" android:id"id/frame" android:layout_width"fill_parent" android:layou…

Git 使用的问题总结

1、git stash pop 显示 xxx already exists, no checkout 当我们先使用 git stash save -u 保存信息说明 来储藏更改&#xff0c;然后拉取代码 git pull&#xff0c;如果你的本地修改有新建文件&#xff0c;远程也有新建文件&#xff0c;并且两者同名&#xff0c;此时应用储藏 …

在OpenShift上托管的WildFly实例上进行Arquillian测试

技术提示&#xff03;54解释了如何为现有Java EE项目启用Arquillian。 在该技巧中&#xff0c;测试是针对本地安装的WildFly服务器运行的。 如果此WildFly实例在OpenShift上运行&#xff0c;那么同一个适配器也可以工作吗&#xff1f; 没有&#xff01; 因为与xlocalhost相比&…

js基础---数组方法

数组数据的排序及去重   sort无形参的排序方式 arr1[2,12,3,15];var aarr1.sort();console.log(arr1);console.log(a);//排序会改变原本数组是顺序&#xff0c;是依据首个字符的大小开始排名sort有形参的排序方式方法1arr2[2,12,3,15];var barr2.sort(function(n1,n2){if(n1&…

扩展Asterisk1.8.7的CLI接口

我之前有一篇文章&#xff08;http://www.cnblogs.com/MikeZhang/archive/2012/04/14/asteriskCLIAppTest20120414.html&#xff09;介绍过如何扩展asterisk的cli接口&#xff0c;本篇是它的继续&#xff0c;总结下&#xff0c;也方便我以后查阅。 大部分情况下&#xff0c;配置…

CSS中的 ',' 、''、'+'、'~'

1、群组选择器&#xff08;,&#xff09; /* 表示既h1&#xff0c;又h2 */ h1, h2 {color: red; } 2、后代选择器&#xff08;空格&#xff09; /* 表示 h1 下面的所有 span 元素&#xff0c;不管是否以 h1 为直接父元素 */ h1 span {} 3、子元素选择器&#xff08;>&#x…

避免不必要的Spring配置组件扫描

我在堆栈溢出中遇到了一个有趣的问题。 Brett Ryan有问题&#xff0c;Spring Security配置被初始化了两次。 当我查看他的代码时&#xff0c;我发现了问题所在。 让我展示显示代码。 他有相当标准的Spring应用程序&#xff08;不使用Spring Boot&#xff09;。 使用基于Spring…

正则表达式 小结

时间&#xff1a;2018年1月21日 18:29:01 用于&#xff1a;此小结是学习正则表达式的总结 正则表达式&#xff08;regular expression&#xff09;小结1. . 表示出断行外任意一个字符   ^行首   $行尾   [] 表示范围 如&#xff1a;[a-z]指a到z范围的一个字符 [\u]表…

js 之for..in、表单及事件触发

<html ><body> <script type"text/javascript">var x;var mycarsnew Array();mycars[0] "saa";mycars[1] "Va";mycars[2] "BMW";for(x in mycars)//x是变量用来指定变量&#xff0c;指定的变量可以是数组元素&…

移动端,fixed bottom问题

//不显示 .bar {position:fixed;bottom:0;z-index:99; }//显示 .bar{position:fixed;bottom:calc(90vh); /*当前屏幕高度百分比90%*/z-index:99; } 转载于:https://www.cnblogs.com/qq917937712/p/11475310.html

js 判断一个字符在字符串中出现的次数

<script type"text/javascript">var sdjh.doiwe.esd.d.ddd0sdd.d.; var n(s.split(.)).length-1; document.write(n);</script> 结果&#xff1a;6 更多专业前端知识&#xff0c;请上 【猿2048】www.mk2048.com

Spring Boot微服务的黑匣子测试是如此简单

当我需要进行原型设计&#xff0c;概念验证或在空闲时间使用一些新技术时&#xff0c;开始新项目对于Maven来说总是有点烦人。 不得不说&#xff0c;设置Maven项目并不难&#xff0c;您可以使用Maven原型。 但是原型通常是过时的。 谁想玩旧技术&#xff1f; 因此&#xff0c;我…

sharepoint ECMAScript对象模型系列

转载&#xff1a;Sharepoint学习笔记—ECMAScript对象模型系列-- 8、组与用户操作(一) http://www.cnblogs.com/wsdj-ITtech/archive/2012/06/08/2416967.html 转载于:https://www.cnblogs.com/EricLee007/archive/2012/06/08/2541636.html

c++ static关键字的作用

名称  全局静态变量  局部静态变量   静态函数  类的静态成员类的静态函数形式  全局变量前加static局部变量前加static 函数返回类型前加static类成员前加static类成员函数前加static存储区域 静态存储区 运行期间一直存在 静态存储区 运行期间一直存在 作用域…

单片机第三季-第七课:STM32中断体系

目录 1&#xff0c;NVIC 2&#xff0c;中断和事件的区别 3&#xff0c;优先级的概念 4&#xff0c;如何实际编程使用外部中断 5&#xff0c;STM32开发板通过按键控制LED 5.1&#xff0c;打开相应GPIO模块时钟 5.2&#xff0c;NVIC设置 5.3&#xff0c;外部中断线和配套…

【学亮IT手记】angularJS select2多选下拉框实例

永远保持对大部分知识的好奇心&#xff0c;学习从不枯燥&#xff0c;也没有被逼学习一说&#xff0c;乐此不疲才是该有的心态和境界&#xff01;&#xff01;&#xff01; 引入相关js库&#xff1a; html部分代码&#xff1a; angularJS定义数据源变量&#xff1a; 更多专业前端…

虚拟主机相关业务知识介绍

什么是虚拟主机&#xff1f; 虚拟主机是使用特殊的软硬件技术&#xff0c;把一台运行在因特网上的服务器主机分成一台台“虚拟”的主机&#xff0c;每一台虚拟主机都具有独立的域名&#xff0c;具有完整的Internet服务器&#xff08;WWW、FTP、Email等&#xff09;功能&#xf…

在CXF API和拦截器中添加Gzip压缩

如今&#xff0c;由于我们在响应中发送大量数据&#xff0c;因此必须对API响应执行Gzip压缩。 它节省了网络带宽和交付时间&#xff0c;当然还节省了Internet上的空间。 CXF提供了以多种方式使用Gzip压缩的选项。 蓝图 注解 蓝图&#xff1a; <bean id"gZipInterce…