安装各插件

试过 安装“必须安装”的部分亦可

1、安装vuex

npm install vuex --save-dev

2、在项目里面安装vux【必须安装】

npm install vux --save

3、安装vux-loader【必须安装】

npm install vux-loader --save-dev

4、安装less-loader(这个是用以正确编译less源码,否则会出现 ' Cannot GET / ')【必须安装】

npm install less less-loader --save-dev

5、安装yaml-loader  (以正确进行语言文件读取)

npm install yaml-loader --save-dev

配置vux环境

这里注意由于vue-cli3使用的是webpack4而且更新过vue-loader,所以vux使用起来会存在一些兼容的问题,这里需要额外配置一下。

官方更新过vue/cli3.x 的vue-loader,正常配置会导致加载错误。所以需要手动指定vue-loader的版本来解决加载问题。

npm install vue-loader@14.2.2 -D

新建 vue.config.js,配置如下代码

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

package.js

测试

<template>
<div>
<tab>
<tab-item selected @on-item-click="onItemClick">已发货</tab-item>
<tab-item @on-item-click="onItemClick">未发货</tab-item>
<tab-item @on-item-click="onItemClick">全部订单</tab-item>
</tab>
</div>
</template> <script>
import { Tab, TabItem, Sticky, Divider, XButton, Swiper, SwiperItem } from 'vux'
export default {
name: "HeadBar",
methods:{
onItemClick (index) {
console.log('on item click:', index)
},
},
components: {
Tab,
TabItem,
Sticky,
Divider,
XButton,
Swiper,
SwiperItem
},
}
</script> <style scoped> </style>

App.vue 引用

<template>
<div id="app">
<HeadBar></HeadBar>
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template> <script>
import HelloWorld from './components/HelloWorld.vue'
import HeadBar from './components/HeadBar' export default {
name: 'app',
components: {
HelloWorld,
HeadBar
}
}
</script>

vue/cli3 配置vux的更多相关文章

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

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

  2. vue cli3配置开发环境、测试环境、生产(线上)环境

    cli3创建vue项目是精简版的少了build和config这2个文件,所以配置开发环境.测试环境.生产环境的话需要自己创建env文件. 需要注意2点: 1.cli2创建项目生成的config文件里的 ...

  3. vue/cli3 配置相对路径

    根目录下新建 vue.config.js 文件 const path = require('path') function resolve(dir){ return path.join(__dirna ...

  4. @vue/cli3+配置build命令构建测试包&正式包

    上一篇博客介绍了vue-cli2.x配置build命令构建测试包和正式包,但现在前端开发vue项目大多数使用新版@vue/cli脚手架搭建vue项目(vue create project-name) ...

  5. vue cli3 配置postcss

    1.安装postcss-import,postcss-cssnext 包 2.修改package.json 将postcss响应的内容替换为 "postcss": { " ...

  6. 在 vue cli3 的项目中配置双服务,模拟 ajax 分页请求

    最近安装了下vue cli3版本,与 cli 2 相比,文件少了,以前配置方法也不管用了.demo 中的大量的数据,需要做成 ajax 请求的方式来展示数据,因此,需要启动两个服务,一个用作前端请求, ...

  7. vue cli3超详细创建多页面配置

    1.首先按照vue cli3 给的入门文档下载个vue cli3 如果之前下载了vue cli2的要先卸载之前的 2.检查安装是否成功 3.ok,现在环境搭建好了,新建项目 vue create he ...

  8. vue cli3 项目配置

    [转]https://juejin.im/post/5c63afd56fb9a049b41cf5f4 基于vue-cli3.0快速构建vue项目 本章详细介绍使用vue-cli3.0来搭建项目. 本章 ...

  9. 安装VUE Cli3 框架方法

    下面为大家介绍一下怎样安装  VUE Cli3的步骤 官网地址  https://cli.vuejs.org/zh/guide/installation.html 一.首先要检查一下是否安装node环 ...

随机推荐

  1. python通过get,post方式发送http请求和接收http响应的方法,pythonget

    python通过get,post方式发送http请求和接收http响应的方法,pythonget 本文实例讲述了python通过get,post方式发送http请求和接收http响应的方法.分享给大家 ...

  2. [转]Mariadb的root密码忘记后的解决方法

    环境背景:CentOS 7.2     一.编辑/usr/lib/systemd/system/mariadb.service 文件,在Service段中添加 1 2 3 4 5 6 7 8 9 10 ...

  3. 有关 PHP 的 10 道问题

    1.简述面向对象的三大特性 答:封装 --  继承  --  多态 封装的目的:为了让类更安全 继承的概念:子类可以继承父类的一切 多态的概念:当父类引用指向子类实例,由于子类里面对父类的方法进行了重 ...

  4. element UI 导航栏根据路径来确定默认选中

    <template> <el-menu :default-active="activedMenu($route.path)" class="el-men ...

  5. .NET Core 中 IOptions 有什么用

    我只发现IOptions的一个用处——方便了在.NET Core应用程序中使用强类型配置. 如果没有IOptions,使用强类型配置需要自己解决下面2个问题: 1)将配置文件(比如appsetting ...

  6. imu内参标定

    https://medium.com/@tomas789/iphone-calibration-camera-imu-and-kalibr-33b8645fb0aa how kalibr model ...

  7. 关于ti环境搭建 IAR 为什么IAR不能跳转的真正原因

    1.IAR工程莫名其妙的错误,可以通过复制工程文件来解决 2.cc2540环境配置,尽量默认到c盘,以便解决不必要的麻烦,另外,不同的库尽量安装对应的环境文件,比如freertos等环境 3.对于蓝牙 ...

  8. [No0000EE]主要的宏观经济指标查询

    主要的宏观经济指标查询 国内:东财>经济数据 _ 数据中心:http://data.eastmoney.com/center/macro.html东财>经济数据 :http://data. ...

  9. beginner’s mistake

    PHP Advanced and Object-Oriented Programming 3rd Edition Related to modularity is abstraction: class ...

  10. Android+Tomcat通过http获取本机服务器资源

    写在前面:本博客为本人原创,严禁任何形式的转载!本博客只允许放在博客园(.cnblogs.com),如果您在其他网站看到这篇博文,请通过下面这个唯一的合法链接转到原文! 本博客全网唯一合法URL:ht ...