本文章默认基于“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. 解决问题SyntaxError: Unexpected token import

    ES6语法的模块导入导出(import/export)功能,我们在使用它的时候,可能会报错: SyntaxError: Unexpected token import 语法错误:此处不应该出现impo ...

  2. CAShapLayer的使用1

    1.添加橙色圆环 - (CAShapeLayer *)shapeLayer { if (!_shapeLayer) { _shapeLayer = [CAShapeLayer layer]; CGRe ...

  3. Asp.net并发请求导致的数据重复插入问题

    前段时间工作中,有客户反应了系统中某类待办重复出现两次的情况.我核实了数据之后,分析认为是并发请求下导致的数据不一致性问题,并做了重现.其实这并不是一个需要频繁调用的功能,但是客户连续点击了两次,导致 ...

  4. *CTF——shellcode

    一看题目是利用shellcode解决问题 伪代码: checksec:开启了NX exp: from pwn import*   context(os='linux',arch='amd64',log ...

  5. bower 基础认识

    bower 跟 npm 很像 都是管理包的工具 只是 bower 偏向前端  npm 前后都能管理 npm init 后是  生产 package.json  下载的包在node_modules文件下 ...

  6. 第二项目AIaisell(易销宝)

    一.什么是报表 向上级报告情况的表格.简单的说:报表就是用表格.图表等格式来动态显示数据,可以用公式表示为:“报表 = 多样的格式 + 动态的数据” 表格:详细数据 图表: 直观 二.表格数据展示 2 ...

  7. Linux从入门到放弃(为做一个开发+运维的全能性人才而奋斗)

    Linux?听说是一个操作系统,好用吗?” “我也不知道呀,和windows有什么区别?我能在Linux上玩LOL吗” “别提了,我用过Linux,就是黑乎乎一个屏幕,鼠标也不能用,不停地的敲键盘,手 ...

  8. mongo删除指定字段,可多个字段同时删除

    参考代码: db.getCollection('Person').update({"email":{$exists:true}},{$unset:{"email" ...

  9. 主流图库对比以及JanusGraph入门

    1.Overall Comparison Name Neo4j JanusGraph Giraph Jena 1.Compute Framework Yes Yes Yes 2.External Co ...

  10. Spring-Docker简易指南

     使用代码:https://files.cnblogs.com/files/miracle9527/demo4springboot.rar # 约定#为注释行.$为命令行 # 开始操作前将demo4s ...