废话不说,直接写步骤

1.

npm install vux --save

2.

npm install less less-loader --save-dev

3.

npm install @vux/loader --save-dev

4.

npm install yaml-loader --save-dev

使用,以toast为例:

main.js:

import '@/styles/index.scss'
import { ToastPlugin } from 'vux'
 
其他组件使用:

this.$vux.toast.text('hello', 'top')

写在最后:

估计都会遇到官网关于配置vux-loader方式报错问题,因为现在cli3.0已经是用webpack4了,vux-loader也提供@vux/loader了,

项目根目录下新建vue.config.js

module.exports = {
configureWebpack: config => {
require('@vux/loader').merge(config, {
options: {},
plugins: ['vux-ui']
})
},
};
 
 
 
 

vuecli3.0 webpack4 配置vuex的更多相关文章

  1. vue-cli3.0的配置

    转自 https://www.cnblogs.com/sangzs/p/9543242.html module.exports = { // 基本路径 baseUrl: '/', // 输出文件目录 ...

  2. Vue-CLI3.0版本配置BootStrap的方法

    一.引入jquery bootstrap popper   用   cnpm install jquery bootstrap@3 popper.js --save  用cnpm 来导入 用npm会出 ...

  3. vue-cli3.0配置详解

    这次给大家带来vue-cli3.0配置详解,使用vue-cli3.0配置的注意事项有哪些,下面就是实战案例,一起来看一下. 新建项目 1 2 3 4 5 6 7 8 # 安装 npm install ...

  4. 【vue-1】vue-cli3.0以上的搭建与配置(2.X的版本是不一样的)

    为什么要使用 vue-cli Vue CLI 致力于将 Vue 生态中的工具基础标准化.它确保了各种构建工具能够基于智能的默认配置即可平稳衔接,这样你可以专注在撰写应用上,而不必花好几天去纠结配置的问 ...

  5. vue-cli3.0使用及配置

    1.先全局安装vue-cli3.0 检测安装: vue -V 2.创建项目(这个就跟react创建脚手架项目比较像了)   这里如果你是第一次用3.0版本的话,是没有前两个的,而只有最后两个,这里是 ...

  6. vue-cli3.0 使用postcss-plugin-px2rem(推荐)和 postcss-pxtorem(postcss-px2rem)自动转换px为rem 的配置方法;

    如何在vue-cli3.0中使用postcss-plugin-px2rem 插件 插件的作用是 自动将vue项目中的px转换为rem . 为什么这三个中要推荐  postcss-plugin-px2r ...

  7. vue-cli3.0配置图片转base64的规则

    vue-cli3.0发现打包的时候,一些小于10k的图片没有转base64,需要自己新建一个vue.config.js的文件(在根目录),然后进行如下配置,就可以控制图片转义规则 module.exp ...

  8. Vue-cli3.0下的雪碧图插件webpack-spritesmith配置方法

    在前端项目中,为了减少对图片的请求次数,一般而言需要进行雪碧图的配置.即将多张小图标合并成一张图片,这样页面中的小图标都在一张图片上,只需请求一张图片,就可以通过CSS设置各个小图标的显示,利于节省带 ...

  9. vue-cli3.0 脚手架搭建项目的过程详解

    1.安装vue-cli 3.0 ? 1 2 3 npm install -g @vue/cli # or yarn global add @vue/cli 安装成功后查看版本:vue -V(大写的V) ...

随机推荐

  1. HTTP的请求方法

    . OPTIONS - 获取服务器支持的HTTP请求方法:                     用来检查服务器的性能.如:AJAX进行跨域请求时的预检,需要向另外一个域名的资源发送一个HTTP O ...

  2. HDR10 中的名词解释

    1. EOTF ( Electro-Optical Transfer Function ),电->光 转换函数.由电信号,转换成光信号时的规则.确定显示终端(电视机.投影仪等),如何合理地响应输 ...

  3. 学习cesium,关于图层界面的切换

    最近学习cesium的3D引擎,有关图层切换的例子比较少,在官网上看见了一些例子加以自己的理解.投机了一种近似于图层切换的效果. 这种图层切换每次点击按钮时,会把其他的数据和实体给删除.然后再创建或加 ...

  4. WPF实战案例-MVVM模式下用附加属性在Xaml中弹出窗体

    嗯..最近回家去了,2个月没写过代码了,面试只能吹牛,基础都忘了,今天回顾一下,分享一篇通过附加属性去处理窗体弹出的情况. 或许老司机已经想到了,通过设置附加属性值,值变更的回调函数去处理窗体弹出,是 ...

  5. 《浏览器工作原理与实践》<07>变量提升:JavaScript代码是按顺序执行的吗?

    讲解完宏观视角下的浏览器后,从这篇文章开始,我们就进入下一个新的模块了,这里我会对 JavaScript 执行原理做深入介绍. 今天在该模块的第一篇文章,我们主要讲解执行上下文相关的内容.那为什么先讲 ...

  6. 一周死磕fastreport ----ASP.NET (二)

    前一章忘了为什么要死磕fastreport  了,这次简单说一下,  公司本来有一个winfrom  窗体打印程序,可是上司觉得太麻烦了,(前几天 我一直在做web版看板,然后发现还不错,于是 想把公 ...

  7. web开发:Bootstrap应用及内存管理

    一.栅格系统 二.移动端适配 三.栅格系统案例 四.表格 五.表单 六.循环应用 一.栅格系统 <!DOCTYPE html> <html> <head> < ...

  8. web开发:jquery之DOM

    一.文档结构 二.文档操作 三.文档操作案例 四.form表单 五.正则 六.form案例 一.文档结构 ```jsvar $sup = $('.sup');console.log($sup.chil ...

  9. web开发:动画及阴影

    一.小米拼接 二.过渡动画 三.过度案例 四.盒子阴影 五.伪类设计边框 一.小米拼接 将区域整体划分起名 => 对其他区域布局不产生影响提出公共css => reset操作当有区域发送显 ...

  10. Ubuntu下PHP+MySQL+Apache+PHPStorm的安装和配置

    粘贴自:https://www.jianshu.com/p/a6a0d2a29591 1.Apache的安装: $ sudo apt-get update $ sudo apt-get install ...