官网看不懂,网上搜了下,以备不时之需

这是官网说明文档,看不懂的啊。

Vux使用教程:

1,在项目里安装vux

  cnpm install vux --save

2,在项目里安装vux-loader(这个vux文档中没有明文跟你说要安装的啦)

  cnpm install vux-loader --save-dev

3,在项目里安装less-loader(这个是用以正确编译less源码,否则会出现 ' Cannot GET / ',自己看package.json,如果安装了,就不用装啦!)

  npm install less less-loader --save-dev

4,在项目里面的build/webpack.base.conf.js中配置

  const vuxLoader = require('vux-loader');                    //新怎

  const webpackConfig = originalConfig;                     //originalConfig就是原来的 module.exports出去的代码,把它整个赋值给变量 webpackConfig

  module.exports = vuxLoader.merge(webpackConfig, { plugins: ['vux-ui'] });      //在最后加多一句,这里就是引用插件vux啦!

5,最后别忘了

  在resolve: {extensions: ['.js', '.vue', '.json','.less']里加入.less。  

以上为安装和配置方法,接下来我们该运行(npm run dev)整个项目了,看有没有什么报错,若果没有,就可以在项目中引用vux的组件了

  在templete中写个标签

<loading :show="show1" :text="text1"></loading>
<alert v-model="show" :title="'测试组件?'"> {{ '看看行不行' }}</alert>

  show1、show跟text1是变量,前者控制是否出现Loading、Alert,后者控制Loading显示内容。

  在script内,引入组件

import { Loading,Alert} from 'vux';

  还要在components写上

components: {
Loading,
Alert
}

根据文档说,这是以插件形式调用,像我这种小白....算了算了

.

vue中引用vux的更多相关文章

  1. (vue.js)vue中引用了别的组件 ,如何使this指向Vue对象

    Vue中引用了别的组件 ,如何使this指向Vue对象 今天学习Vue组件传值, 通过创建Vue实例, 广播和监听实现传值, 但是传值之后无法直接将得到的值应用到Vue对象, 因为这相当于引用改了别的 ...

  2. 17、在vue中引用移动端框架Vux:

    1:使用vue-cli创建好项目(此处省略步骤)2:在项目中安装vux:npm install vux --save3:​安装vux-loader:npm install vux-loader --s ...

  3. vue中引用swiper轮播插件

    有时候我们需要在vue中使用轮播组件,如果是在vue组件中引入第三方组件的话,最好通过npm安装,从而进行统一安装包管理. 申明:本文所使用的是vue.2x版本. 通过npm安装插件: npm ins ...

  4. 第七十七篇:ref引用(在vue中引用组件实例)

    好家伙, 为方便理解, 我们先来写一个经典自增一按钮, 再加上一个count清零按钮, Left.vue组件中: <template> <div > <h1>我是L ...

  5. 第七十六篇:ref引用(在vue中引用Dom的方法)

    好家伙, 引子: jQuery简化了程序员操作DOM的过程 vue 优势:MVVM 在vue中,程序员不需要操作DOM.程序员只需要把数据维护好即可!(数据驱动视图) 那么若要在vue中操作dom,这 ...

  6. react 或 vue 中引用 jQuery 插件

    前言 今天与遇到一个令人抓狂的事情, 因为项目中有个交互太过于复杂而且冷门, 没有人封装类似react-swiper那种的移植过来的插件 只有现成的jQuery插件. 而时间并不宽裕,自己重写成rea ...

  7. vue 中引用jquery

    1.安装jquery npm install jquery --save-dev 2.打开配置文件webpack.base.conf.js 加入'jquery': path.resolve(__dir ...

  8. 记录下vue 中引用echarts 出现 "TypeError: Cannot read property 'getAttribute' of undefined"问题

    今天做项目,用echarts展示数据 ,自己测试 先测试 了下.写的代码html: <div ref="myChart" style="height:300px;w ...

  9. vue中引入vux

    1.安装相关依赖 cnpm install vux --save cnpm install vux-loader --save-dev cnpm install less less-loader -- ...

随机推荐

  1. python之GIL官方文档 global interpreter lock 全局解释器锁

    0.目录 2. 术语 global interpreter lock 全局解释器锁3. C-API 还有更多没有仔细看4. 定期切换线程5. wiki.python6. python.doc FAQ ...

  2. OAuth2:客户端证书授权(Client Credentials)类型的开放授权

    适应范围 认证服务器不提供像用户数据这样的重要资源,仅仅是有限的只读资源或者一些开放的API.例如使用了第三方的静态文件服务,如Google Storage或Amazon S3.这样,你的应用需要通过 ...

  3. 【AtCoder】AGC013

    AGC013 A - Sorted Arrays 直接分就行 #include <bits/stdc++.h> #define fi first #define se second #de ...

  4. spark操作Kudu之写 - 使用DataFrame API

    在通过DataFrame API编写时,目前只支持一种模式“append”.尚未实现的“覆盖”模式 import org.apache.kudu.spark.kudu._ import org.apa ...

  5. AtCoder Regular Contest 080 (ARC080) E - Young Maids 线段树 堆

    原文链接http://www.cnblogs.com/zhouzhendong/p/8934377.html 题目传送门 - ARC080 E - Young Maids 题意 给定一个长度为$n$的 ...

  6. Date类的使用

    [构造方法] 1)Date():无参构造 [代码] Date date = new Date(); System.out.println(date); 2)Date(long time):带参构造 [ ...

  7. python 精确计算与向上取整 decimal math.ceil

    1. 精确计算 python的float型不精确,需要导入decimal包,以下是不精确举例: 导入decimal包后: 2. 向上取整 一般的取整数(向下取整): 向上取整的方法:

  8. Kosaraju与Tarjan(图的强连通分量)

    Kosaraju 这个算法是用来求解图的强连通分量的,这个是图论的一些知识,前段时间没有学,这几天在补坑... 强连通分量: 有向图中,尽可能多的若干顶点组成的子图中,这些顶点都是相互可到达的,则这些 ...

  9. BZOJ-7-2655: calc-DP-拉格朗日插值

    https://www.lydsy.com/JudgeOnline/problem.php?id=2655 以上是对 dp 一小部分打的表.dp[ i ] [ j ]  含义为 前 i 个 数 中 选 ...

  10. Linux学习笔记6

    less 命令 空格或者 ctrl+f  前进一屏 ctrl+b  回退一屏 回车    前进一行 /String 查找含有string 字符串的页 ?String  同上 <反方向查找> ...