vue中引用vux
官网看不懂,网上搜了下,以备不时之需

这是官网说明文档,看不懂的啊。
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的更多相关文章
- (vue.js)vue中引用了别的组件 ,如何使this指向Vue对象
Vue中引用了别的组件 ,如何使this指向Vue对象 今天学习Vue组件传值, 通过创建Vue实例, 广播和监听实现传值, 但是传值之后无法直接将得到的值应用到Vue对象, 因为这相当于引用改了别的 ...
- 17、在vue中引用移动端框架Vux:
1:使用vue-cli创建好项目(此处省略步骤)2:在项目中安装vux:npm install vux --save3:安装vux-loader:npm install vux-loader --s ...
- vue中引用swiper轮播插件
有时候我们需要在vue中使用轮播组件,如果是在vue组件中引入第三方组件的话,最好通过npm安装,从而进行统一安装包管理. 申明:本文所使用的是vue.2x版本. 通过npm安装插件: npm ins ...
- 第七十七篇:ref引用(在vue中引用组件实例)
好家伙, 为方便理解, 我们先来写一个经典自增一按钮, 再加上一个count清零按钮, Left.vue组件中: <template> <div > <h1>我是L ...
- 第七十六篇:ref引用(在vue中引用Dom的方法)
好家伙, 引子: jQuery简化了程序员操作DOM的过程 vue 优势:MVVM 在vue中,程序员不需要操作DOM.程序员只需要把数据维护好即可!(数据驱动视图) 那么若要在vue中操作dom,这 ...
- react 或 vue 中引用 jQuery 插件
前言 今天与遇到一个令人抓狂的事情, 因为项目中有个交互太过于复杂而且冷门, 没有人封装类似react-swiper那种的移植过来的插件 只有现成的jQuery插件. 而时间并不宽裕,自己重写成rea ...
- vue 中引用jquery
1.安装jquery npm install jquery --save-dev 2.打开配置文件webpack.base.conf.js 加入'jquery': path.resolve(__dir ...
- 记录下vue 中引用echarts 出现 "TypeError: Cannot read property 'getAttribute' of undefined"问题
今天做项目,用echarts展示数据 ,自己测试 先测试 了下.写的代码html: <div ref="myChart" style="height:300px;w ...
- vue中引入vux
1.安装相关依赖 cnpm install vux --save cnpm install vux-loader --save-dev cnpm install less less-loader -- ...
随机推荐
- Web.Config引入配置ConfigSource
1.配置文件要和Config文件通一个项目 2.注意路径的写法 3.appSettings和connectionStrings等都可以设置configSource 4.这样发布到不同的环境的时候,改动 ...
- thinkphp5验证码使用
simple 控制器中 /** * 生成验证码 * @param viod */ public function verify() { $captcha = new \think\captcha\Ca ...
- PHP微信模板消息发送
<?php class Wxtemplate extends Base { function __construct() { $this->appid = config('WXAPP_AP ...
- 2018牛客网暑假ACM多校训练赛(第七场)I Tree Subset Diameter 动态规划 长链剖分 线段树
原文链接https://www.cnblogs.com/zhouzhendong/p/NowCoder-2018-Summer-Round7-I.html 题目传送门 - https://www.n ...
- Substrings kmp
Problem Description You are given a number of case-sensitive strings of alphabetic characters, find ...
- win10系统桌面快捷键图标异常解决方法
win10系统桌面快捷键图标异常解决方法 前言: 有一次我的一个图标变成白色,找到:https://jingyan.baidu.com/article/948f5924148e67d80ef5f947 ...
- Java中CardLayout布局方式的应用
import java.awt.CardLayout; import java.awt.Color; import java.awt.Container; import javax.swing.JBu ...
- startActivity进行Hook
--摘自<android插件化开发指南> 1.Activity的startActivity和Context的startActivity都是在app进程中通知AMS要启动哪个Activity ...
- python数据结构之quick_sort
Quick sort , also known as partition-exchange sort, divides the data to be sorted into two separate ...
- oracle中to_timestamp和to_date什么区别
date类型是Oracle常用的日期型变量,时间间隔是秒.两个日期型相减得到是两个时间的间隔,注意单位是“天”. timestamp是DATE类型的扩展,可以精确到小数秒(fractional_sec ...