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

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

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. Web.Config引入配置ConfigSource

    1.配置文件要和Config文件通一个项目 2.注意路径的写法 3.appSettings和connectionStrings等都可以设置configSource 4.这样发布到不同的环境的时候,改动 ...

  2. thinkphp5验证码使用

    simple 控制器中 /** * 生成验证码 * @param viod */ public function verify() { $captcha = new \think\captcha\Ca ...

  3. PHP微信模板消息发送

    <?php class Wxtemplate extends Base { function __construct() { $this->appid = config('WXAPP_AP ...

  4. 2018牛客网暑假ACM多校训练赛(第七场)I Tree Subset Diameter 动态规划 长链剖分 线段树

    原文链接https://www.cnblogs.com/zhouzhendong/p/NowCoder-2018-Summer-Round7-I.html 题目传送门 -  https://www.n ...

  5. Substrings kmp

    Problem Description You are given a number of case-sensitive strings of alphabetic characters, find ...

  6. win10系统桌面快捷键图标异常解决方法

    win10系统桌面快捷键图标异常解决方法 前言: 有一次我的一个图标变成白色,找到:https://jingyan.baidu.com/article/948f5924148e67d80ef5f947 ...

  7. Java中CardLayout布局方式的应用

    import java.awt.CardLayout; import java.awt.Color; import java.awt.Container; import javax.swing.JBu ...

  8. startActivity进行Hook

    --摘自<android插件化开发指南> 1.Activity的startActivity和Context的startActivity都是在app进程中通知AMS要启动哪个Activity ...

  9. python数据结构之quick_sort

    Quick sort , also known as partition-exchange sort, divides the data to be sorted into two separate ...

  10. oracle中to_timestamp和to_date什么区别

    date类型是Oracle常用的日期型变量,时间间隔是秒.两个日期型相减得到是两个时间的间隔,注意单位是“天”. timestamp是DATE类型的扩展,可以精确到小数秒(fractional_sec ...