废话不说,直接写步骤

1.

  1. npm install vux --save

2.

  1. npm install less less-loader --save-dev

3.

  1. npm install @vux/loader --save-dev

4.

  1. npm install yaml-loader --save-dev

使用,以toast为例:

main.js:

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

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

写在最后:

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

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

  1. module.exports = {
  2. configureWebpack: config => {
  3. require('@vux/loader').merge(config, {
  4. options: {},
  5. plugins: ['vux-ui']
  6. })
  7. },
  8. };
 
 
 
 

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. [JZOJ3521]道路覆盖--状压DP

    题目链接 略略略 分析 首先一看到使得最低的高度最高就想到了二分,于是就转化成了一个是否可行的问题 发现这个\(k\)都很小,考虑使用状态压缩DP 但是我一开始发现似乎并不好设计状态...如果这个\( ...

  2. 万能模拟器eve-ng介绍

    作为一名网络工程师,通过模拟器来搭建实验环境是必不可少的,主流的网络模拟器有如下几款:Packet Tracer是思科公司出的一款模拟器,只能模拟思科自己的设备,由于此款软件是纯软件模拟,所以思科设备 ...

  3. Linux搭建.net core CI/CD环境

    一.简介 微服务开发中自动化.持续化工程十分重要,在成熟的CI/CD环境中项目团队可以灵活分配,大大提供团队效率.如果还不了解什么是CI/CD,可以先查看相关文章,这里主要介绍环境的搭建,相关原理就不 ...

  4. 6.caffe:create_txt.sh(数据预处理成txt文本文件)

    #!/usr/bin/env sh DATA=/home/wp/CAFFE/caffe-master/myself/00b MY=/home/wp/CAFFE/caffe-master/myself/ ...

  5. MongoDB安全运维

    0×00 MongoDB权限介绍 1.MongoDB安装时不添加任何参数,默认是没有权限验证的,登录的用户可以对数据库任意操作而且可以远程访问数据库,需以–auth参数启动. 2.在刚安装完毕的时候M ...

  6. 【CQOI2017】老C的键盘

    Description https://loj.ac/problem/3023 一句话题意:给你一棵完全二叉树,每条边有一个方向,求这棵树有多少种不同的拓扑序. Solution 简化题意后,其实就是 ...

  7. Vue入门(一)——环境搭建

    1.参考该教程装vue脚手架和创建工程 https://segmentfault.com/a/1190000008922234 附:在每个工程下cmd,执行npm install,此时工程下会多一个n ...

  8. JavaScript 对象中this的指向问题

    this运行在哪个对象下,就指向哪个对象.

  9. ubuntu 16.04中文输入法安装

    转自: http://blog.csdn.net/u011795345/article/details/53041707 最近刚给笔记本装了Ubuntu+win10双系统,但是ubuntu16.04没 ...

  10. Bootstrap-轮播图-No.2

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...