详解如何在你的Vue项目配置vux


Posted in Javascript onJune 04, 2018

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

其实项目里组件库可以结合起来使用,因为不管是vux,Mint-ui,Muse-ui等等各有各有的优势,今天就只分享下vue项目中如何配置vux。 

1.项目里安装vux 

npm install vux --save

2.安装vux-loader(vux2必须结合vux-loader使用,本文也只是介绍vux2的配置) 

npm install vux-loader --save-dev

3.安装less-loader 

npm install less less-loader --save-dev

安装完成记得在webpack.base.conf.js里做如下配置,在extensions里加入less

resolve: {
  extensions: ['.js', '.vue', '.json', 'less'],
  alias: {
   'vue$': 'vue/dist/vue.esm.js',
   '@': resolve('src'),
  }
 }

4.安装yaml-loader 

npm install yaml-loader --save-dev

最后一步在build/webpack.base.conf.js文件里将原来的module.exports的代码赋值给一个新的变量webpackConfig,整个文件如下:

'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vuxLoader = require('vux-loader')
const vueLoaderConfig = require('./vue-loader.conf')

function resolve (dir) {
 return path.join(__dirname, '..', dir)
}

const webpackConfig = {
 context: path.resolve(__dirname, '../'),
 entry: {
  app: './src/main.js'
 },
 output: {
  path: config.build.assetsRoot,
  filename: '[name].js',
  publicPath: process.env.NODE_ENV === 'production'
   ? config.build.assetsPublicPath
   : config.dev.assetsPublicPath
 },
 resolve: {
  extensions: ['.js', '.vue', '.json', 'less'],
  alias: {
   'vue$': 'vue/dist/vue.esm.js',
   '@': resolve('src'),
  }
 },
 module: {
  rules: [
   {
    test: /\.vue$/,
    loader: 'vue-loader',
    options: vueLoaderConfig
   },
   {
    test: /\.js$/,
    loader: 'babel-loader',
    include: [resolve('src'), resolve('test')]
   },
   {
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    loader: 'url-loader',
    options: {
     limit: 10000,
     name: utils.assetsPath('img/[name].[hash:7].[ext]')
    }
   },
   {
    test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
    loader: 'url-loader',
    options: {
     limit: 10000,
     name: utils.assetsPath('media/[name].[hash:7].[ext]')
    }
   },
   {
    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
    loader: 'url-loader',
    options: {
     limit: 10000,
     name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
    }
   }
  ]
 }
}

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

我们不需要在main.js里引入,而是在我们需要用到组件库的组件里面通过

import { XHeader, Tabbar } from 'vux'

export default {
 components: {
   XHeader,
   Tabbar
   // 需要什么import引入然后加入组件的components里就好了
  }
}

唯一要吐糟的就是下拉框真的太丑了… 

详解如何在你的Vue项目配置vux

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用cookies实现的可记忆的样式切换效果代码下载
Dec 24 Javascript
基于jquery的图片懒加载js
Jun 30 Javascript
Javascript模块化编程(一)AMD规范(规范使用模块)
Jan 17 Javascript
jquery 卷帘效果实现代码(不同方向)
Feb 05 Javascript
JavaScript 对象详细整理总结
Sep 29 Javascript
Bootstrap显示与隐藏简单实现代码
Mar 06 Javascript
JavaScript纯色二维码变成彩色二维码
Jul 23 Javascript
js轮播图无缝滚动效果
Jun 17 Javascript
微信小程序自定义select下拉选项框组件的实现代码
Aug 28 Javascript
详解VUE调用本地json的使用方法
May 15 Javascript
vue实现评论列表功能
Oct 25 Javascript
jquery添加div实现消息聊天框
Feb 08 jQuery
详解vue-loader在项目中是如何配置的
Jun 04 #Javascript
vue.js打包之后可能会遇到的坑!
Jun 03 #Javascript
详解vue项目中如何引入全局sass/less变量、function、mixin
Jun 02 #Javascript
vue之将echart封装为组件
Jun 02 #Javascript
React学习笔记之高阶组件应用
Jun 02 #Javascript
浅谈node中的cluster集群
Jun 02 #Javascript
详解AngularJS 过滤器的使用
Jun 02 #Javascript
You might like
第十节--抽象方法和抽象类
2006/11/16 PHP
浅析php中如何在有限的内存中读取大文件
2013/07/02 PHP
使用PHP强制下载PDF文件示例
2014/01/17 PHP
php实现快速排序的三种方法分享
2014/03/12 PHP
PHP获取数组最后一个值的2种方法
2015/01/21 PHP
php+ajax无刷新分页实例详解
2015/12/07 PHP
点击弹出层外区域关闭弹出层jquery特效示例
2013/08/25 Javascript
用jQuery模拟select下拉框的简单示例代码
2014/01/26 Javascript
Javascript中的异步编程规范Promises/A详细介绍
2014/06/06 Javascript
详解JavaScript中的表单验证
2015/06/16 Javascript
JavaScript实现标题栏文字轮播效果代码
2015/10/24 Javascript
详解Node.js模块间共享数据库连接的方法
2016/05/24 Javascript
Jquery中map函数的用法
2016/06/03 Javascript
javascript 常用验证函数总结
2016/06/28 Javascript
[原创]jQuery常用的4种加载方式分析
2016/07/25 Javascript
Bootstrap对话框使用实例讲解
2016/09/24 Javascript
element ui 对话框el-dialog关闭事件详解
2018/02/26 Javascript
详解Puppeteer 入门教程
2018/05/09 Javascript
如何换个角度使用VUE过滤器详解
2019/09/11 Javascript
React 实现车牌键盘的示例代码
2019/12/20 Javascript
JavaScript ES6 Class类实现原理详解
2020/05/08 Javascript
Python中使用第三方库xlutils来追加写入Excel文件示例
2015/04/05 Python
Python设计模式编程中解释器模式的简单程序示例分享
2016/03/02 Python
python 处理dataframe中的时间字段方法
2018/04/10 Python
详解Python并发编程之创建多线程的几种方法
2019/08/23 Python
python二元表达式用法
2019/12/04 Python
CSS3关于z-index不生效问题的解决
2020/02/19 HTML / CSS
Stella McCartney官网:成衣、包袋、香水、内衣、童装及Adidas系列
2018/12/20 全球购物
关键字throw与throws的用法差异
2016/11/22 面试题
优秀广告词大全
2014/03/19 职场文书
会计师事务所实习证明
2014/11/16 职场文书
2016年国陪研修感言
2015/11/18 职场文书
2016年感恩父亲节活动总结
2016/04/01 职场文书
情侣餐厅的创业计划书范本!
2019/07/26 职场文书
简单且有用的Python数据分析和机器学习代码
2021/07/02 Python
Nginx防盗链与服务优化配置的全过程
2022/01/18 Servers