详解如何在你的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 相关文章推荐
jquery操作select option 的代码小结
Jun 21 Javascript
javascript中length属性的探索
Jul 31 Javascript
JAVASCRIPT车架号识别/验证函数代码 汽车车架号验证程序
Jan 08 Javascript
纯js实现遮罩层效果原理分析
May 27 Javascript
JavaScript中对象property的删除方法介绍
Dec 30 Javascript
使用JavaScript刷新网页的方法
Jun 04 Javascript
jQuery实现tab选项卡效果的方法
Jul 08 Javascript
详解JavaScript编程中正则表达式的使用
Oct 25 Javascript
不用一句js代码初始化组件
Jan 27 Javascript
浅谈Angularjs link和compile的使用区别
Oct 21 Javascript
JS手写一个自定义Promise操作示例
Mar 16 Javascript
JavaScript indexOf()原理及使用方法详解
Jul 09 Javascript
详解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
.htaccess文件保护实例讲解
2011/02/06 PHP
php设计模式 Builder(建造者模式)
2011/06/26 PHP
谈谈php对接芝麻信用踩的坑
2016/12/01 PHP
php使用json-schema模块实现json校验示例
2019/09/28 PHP
phpstudy后门rce批量利用脚本的实现
2019/12/12 PHP
jquery isEmptyObject判断是否为空对象的函数
2011/02/14 Javascript
javascript获取浏览器类型和版本的方法(js获取浏览器版本)
2014/03/13 Javascript
JavaScript获取网页中第一个链接ID的方法
2015/04/03 Javascript
javascript动态创建链接的方法
2015/05/13 Javascript
学习JavaScript事件流和事件处理程序
2016/01/25 Javascript
JavaScript希尔排序、快速排序、归并排序算法
2016/05/08 Javascript
jQuery选择器基础入门教程
2016/05/10 Javascript
jquery分隔Url的param方法(推荐)
2016/05/25 Javascript
BootstrapTable请求数据时设置超时(timeout)的方法
2017/01/22 Javascript
vue项目中跳转到外部链接的实例讲解
2018/09/20 Javascript
JS检测浏览器开发者工具是否打开的方法详解
2020/10/02 Javascript
python中的全局变量用法分析
2015/06/09 Python
老生常谈python函数参数的区别(必看篇)
2017/05/29 Python
Django中的Signal代码详解
2018/02/05 Python
利用Python写一个爬妹子的爬虫
2018/06/08 Python
详解python中的装饰器
2018/07/10 Python
Python判断一个三位数是否为水仙花数的示例
2018/11/13 Python
python实现最小二乘法线性拟合
2019/07/19 Python
给我一面国旗 python帮你实现
2019/09/30 Python
python 变量初始化空列表的例子
2019/11/28 Python
python实现3D地图可视化
2020/03/25 Python
CSS3条纹背景制作的实战攻略
2016/05/31 HTML / CSS
中国包裹转运寄送国际服务:Famiboat
2019/07/24 全球购物
Linux中如何用命令创建目录
2015/01/12 面试题
办公室主任先进事迹
2014/01/18 职场文书
公职人员索取回扣检举信
2014/04/04 职场文书
《槐乡五月》教学反思
2014/04/25 职场文书
仓库管理计划书
2014/05/04 职场文书
超市优秀员工获奖感言
2014/08/15 职场文书
暑期政治学习心得体会
2014/09/02 职场文书
初中重阳节活动总结
2015/05/05 职场文书