本文章默认基于“vue init webpack myproject”已经搭好基本的项目,

而且本文是从我有道笔记拷贝稍加修改过来的

本来我私人笔记写给自己看的所以有些地方可能描述不够清晰


需要修改的文件就两个:build/webpack.base.conf.js  src/main.js


第一步:安装依赖

npm install vux --save

npm install vux-loader --save-dev

npm install less less-loader --save-dev

第二步:修改build/webpack.base.conf.js中的代码(引入vux-loader)

const vuxLoader = require('vux-loader')


第三步:继续修改build/webpack.base.conf.js中的代码

原来的 module.exports 代码赋值给变量 webpackConfig,这里特意截图说明详细点,担心有看不懂的同学

第四步:继续修改build/webpack.base.conf.js中的代码

module.exports = vuxLoader.merge(webpackConfig, {
  plugins: [{name: 'vux-ui'}]
});


第五步:在src/main.js中调用plugin( 以下是使用过程,反正跟着炒就是了 )

import { AlertPlugin, ToastPlugin } from 'vux'
Vue.use(AlertPlugin)
Vue.use(ToastPlugin)

以上就是vux 安装以及配置


现在举个例子,最简单的组件引入过程:

<Divider>文本分割线</Divider>

import { Divider } from 'vux'
components: { Divider },

写的比较仓促,赶着吃午饭。。。

vue项目安装vux的更多相关文章

  1. 如何在你的Vue项目配置vux

    做移动端项目的话vue现在是首要的选择,足够轻便,文档足够全,当然用的人多,项目中遇到的坑别人可能也遇到过,解决起来也比较方便,至于在开发中做需要的移动端组件库,个人比较推崇vux. 其实项目里组件库 ...

  2. VUE项目安装

    连接转载:https://www.cnblogs.com/Colwill-Blog/p/6682091.html 刚刚开始学习Vue.js.今天分享一下我的Vue项目安装过程. 我是windows系统 ...

  3. vue项目使用vux框架配置教程

    吐槽下,这个vux配置教程那..写的实在是坑,也不搞个示例代码...想上天吗???? 正常安装的话...100%报错...以下是正确配置 1.项目里安装vux   npm install vux -- ...

  4. vue项目安装sass/scss

    vue 添加scss 安装好之后使用: 注意scss和sass的语法区别,scss是用传统花括号,sass是缩进控制,看个人习惯选择语言 sass语法看这里==>sass基本语法 vue项目编译 ...

  5. vue-cli新建vue项目安装axios后在IE下报错

    使用脚手架新建了一个vue项目,可以在IE9+浏览器运行,但是在添加了axios后,在IE下就报错了 首先是安装axios,在命令行执行: $ npm install axios -s //执行命令, ...

  6. vue项目中vux的使用

    vux VUX 是基于 WeUI 和 Vue.js 的 移动端 UI 组件库,提供丰富的组件满足移动端(微信)页面常用业务需求. 在vue-cli中使用步骤如下: 1.安装: npm i vux -S ...

  7. 运行vue项目--安装vue脚手架vue cli

    第一步. 安装node: 官网下载node的.pkg,下载地址,选择相应版本进行下载 mac终端下输入npm -v 和 node -v, 出现相应版本号即安装成功. 若均提示 command not ...

  8. Vue项目结合vux使用

    引入vux 1.直接安装或者更新: npm install vux --save 或者使用 yarn yarn add vux // 安装 yarn upgrade vux // 更新 2.vux2必 ...

  9. Vue项目安装CubeUI

    CubeUi GitHub地址:https://github.com/didi/cube-ui install vue add cube-ui 项目中 会多出cube ui 的配置文件来

随机推荐

  1. 《连载 | 物联网框架ServerSuperIO教程》- 16.集成OPC Server,及使用步骤。附:3.3 发布与版本更新说明。

    1.C#跨平台物联网通讯框架ServerSuperIO(SSIO)介绍 <连载 | 物联网框架ServerSuperIO教程>1.4种通讯模式机制. <连载 | 物联网框架Serve ...

  2. Virtual box中Ubuntu虚拟机磁盘碎片整理和空间清理方法

    虚拟机中,随着不断的使用,增加大文件(例如日志,视频和软件版本),虽然在虚拟机中手动删除了,但是虚拟机占用的空间并不会随之减少,需要手动清理一下. 这里介绍一种Virtual box中Ubuntu碎片 ...

  3. swagger结合dubbo的rest服务测试

    swagger结合dubbo的rest服务测试 背景介绍 我们应用的dubbo服务导出,可能没有直接的触发点去发起调用测试,除非自己手写controller和test类,缺乏一个动态工具,类似流行的s ...

  4. js常用代码

    获取URL ?后的查询参数 function query(name) { var reg = new RegExp("(^|&)" + name + "=([^& ...

  5. huginn website agent对提取结果排序

    当配置好huginn的website之后,想给提取的内容排个序,那就用下面这堆代码,因为官网里也这么说的, "events_order": [ [ "{{date_pub ...

  6. python之lambda函数

    今天复习python,看见一个关于lambda函数的例子,在python中使用lambda在某些时候十分方便,因为不必为了实现某些简单功能而新建一个函数.但是有这么一个lambda实例令我有些疑惑,现 ...

  7. Swagger2教程

    Swagger2教程 作用:编写和维护接口文档. 一.Swagger2 + SpringBoot集成 1.依赖 <!--依赖管理 --> <dependencies> < ...

  8. ODM、JDM、OEM概念

    OEM (Original Equipment Manufacturer) - 原始设备制造商 委托生产,或者说“代工生产”,其含义是品牌厂商不直接制造产品,而是负责设计和开发新产品,控制销售“渠道” ...

  9. hadoop fs -put 报错

    [hadoop@master ~]$ ll total -rw-rw-r-- hadoop hadoop Apr : aaa drwxr-xr-x hadoop hadoop Jun Desktop ...

  10. c#发送短息验证码

    <add key="WebReference.Service.PostUrl" value="http://106.ihuyi.cn/webservice/sms1 ...