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 -- ...
随机推荐
- java.lang.OutOfMemoryError: unable to create new native thread
ps -o nlwp 70753 sudo -u tomcat jmap -dump:format=b,file=fundmarketmanage.hprof 78894
- 选择结构if
1.if语句 if语句是指如果满足某种条件,就进行某种处理.例如,小明妈妈跟小明说“如果你考试得了100分,星期天就带你去游乐场玩”.这句话可以通过下面的一段伪代码来描述. 如果小明考试得了100分 ...
- 【CF724F】Uniformly Branched Trees
题意:询问n个点的每个非叶子点度数恰好等于d的不同构的无根树的数目. n≤1000,d≤10n≤1000,d≤10. 题解: 这题真的是一道非常好的题 首先考虑有根树 定义f[i][j][k]表示i个 ...
- 【Android】Android EditText 去除边框
[Android]Android EditText 去除边框 将EditText属性设置修改 android:background="@null" //////////////// ...
- nginx+keepalived实现 负载均衡 高可用
Vip: 192.168.220.18 Rip1:192.168.220.2 Rip:192.168.220.3 Rip可以配置在一个服务器上通过ip做虚拟主机 1 rs上配置环境 2 配置应用 Yu ...
- nginx与php-fpm通信的两种方式
简述 在linux中,nginx服务器和php-fpm可以通过tcp socket和unix socket两种方式实现. unix socket是一种终端,可以使同一台操作系统上的两个或多个进程进行数 ...
- Python argparse 模块
Python argparse 模块 test.py: import argparse argparser = argparse.ArgumentParser(add_help=False) argp ...
- Codeforces 1096D Easy Problem 【DP】
<题目链接> 题目大意: 给你一个字符串,每个字符有权值,问现在删除字符串中的字符使其中没有"hard"的最小代价是多少. 解题分析: 用DP来求解: 转 ...
- sql - 递归update
declare v_rlt ):; l_sql ); -- variable that contains a query l_c sys_refcursor; -- cursor variable(w ...
- ubantu16.04搭配新开发环境说明
安装好ubantu系统后,往往需要搭配个人开发环境,梳理了一些常用的安装步骤: 1.安装node.js 更新ubuntu软件源 sudo apt-get update sudo apt-get ins ...