vue项目引入vux组件
搭建好vue项目后,这边主要做的手机端,综合比较后决定引入vux组件
1.安装vux
npm install vux --save
或者使用 yarn
yarn add vux // 安装
yarn upgrade vux // 更新
如果你想直接从 Github 安装,请指定 v2
分支
npm install git://github.com/airyland/vux.git#v2
2.安装vux-loader (vux文档中没有明确提到要安装,但是是需要安装的)
npm install vux-loader --save
3.安装安装less-loader (可以看看package.json,如果安装了,就不用装了)
npm install less less-loader --save
4.打开build下面的webpack.base.conf.js
按照vux官网上写的来进行配置
const vuxLoader = require('vux-loader')
const webpackConfig = originalConfig // 原来的 module.exports 代码赋值给变量 webpackConfigmodule.exports = vuxLoader.merge(webpackConfig, {plugins: ['vux-ui']
})
配置完webpack.base.conf.js即如下图所示: (记得在resolve: {extensions: ['.js', '.vue', '.json','.less']里加入.less)
'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'), resolve('node_modules/webpack-dev-server/client')]},{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]')}}]}, node: {// prevent webpack from injecting useless setImmediate polyfill because Vue// source contains it (although only uses it if it's native).setImmediate: false,// prevent webpack from injecting mocks to Node native modules// that does not make sense for the clientdgram: 'empty',fs: 'empty',net: 'empty',tls: 'empty',child_process: 'empty'}
}module.exports = vuxLoader.merge(webpackConfig, {options: {},plugins: [{name: 'vux-ui'}]
})
5.运行没有报错后我们就可以按照vux教程来使用了
vue项目引入vux组件相关推荐
- vue项目引入typescript(vue与ts混用)
说明 为什么要在vue项目中使用ts? 新公司给了一个关于vue项目的需求,又由于ts是JavaScript的超集,强类型数据,组件化友好.故我选择在vue项目中引入ts. 下载typescript和 ...
- 记录一次vue项目引入GoogleMap API进行地图定位
背景 公司项目进行国际化处理,需要将定位信息地图替换成谷歌地图. 一.Google 账号准备 用谷歌账户登录谷歌云平台 https://cloud.google.com/maps-platform/? ...
- vue项目引入标签云动画js函数,不执行
vue项目引入标签云动画js函数,数据重新渲染了,但是动画不执行了 rollTagCloud() {/* 3D标签云滚动函数*/const timer = setTimeout(() => {t ...
- vue项目引入CNZZ数据专家(方法汇总篇)
vue项目引入CNZZ数据专家(方法汇总篇) 很多网站都有cnzz数据统计,用于分析网站页面受访情况. 今天就来备注一下开发经验: vue如何集成cnzz数据专家进行受访记录? 友盟+CNZZ官方文档 ...
- VUE项目引入微信JSSDK 实现微信自定义分享
VUE项目引入微信JSSDK 实现自定义分享 前端vue.后端php 问题:后端获取config参数所需的url 需要和请求自定义分享页面url一致 一.微信公众号后台添加 js安全域名(白名单) 二 ...
- vue项目引入阿里巴巴矢量图标库 ——字体图标
1. 打开阿里巴巴矢量图标库官网 iconfont-阿里巴巴矢量图标库 2. 下载图标步骤 (1) (2) (3) (4) (5) (6)main.js 配置 引入assets中的图标路径 (7)页 ...
- 随笔-vue项目引入axios
随笔-vue项目引入axios 本文参考链接: 一 安装axios依赖 npm install axios 二 引入axios 在main.js中引入,注意与很多第三方模块不同的是,axios不能使用 ...
- vue项目引入不符合ES6模块化标准的JS文件
vue项目引入不符合ES6模块化标准的JS文件 实现方式 实现原理 实现方式 要引入的文件放在public目录下,在index.html中通过script标签引入 实现原理 参考vue官网–处理静态资 ...
- Vue项目引入Echarts可视化图表库教程踩坑
Apache ECharts是一个基于 JavaScript 的开源可视化图表库,ECharts是一款基于JavaScript的数据可视化图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表. ...
最新文章
- WWDC上这个神级功能,一言不合又要改变未来购物趋势
- TIBCO宣布接近达成收购LogLogic
- java字母反过来_java之字母反转~~ - Plight - 51Testing软件测试网 51Testing软件测试网-软件测试人的精神家园...
- 《Effective Java》读书笔记 Item 1:考虑静态工厂方法,而不是构造器
- android h5 有广告,那些H5在Android上显示的丧心病狂的坑
- 开启Cisco交换机DHCP Snooping功能
- [k8s]debug模式启动集群k8s常见报错集合(on the fly)
- JavaScript基本数据类型和引用数据类型
- 计算与编程思维-Python实践【Python Crash Course】
- hadoop学习视频
- 图片如何转PDF格式?这些方法值得收藏
- Unity3D 编辑器扩展 强大的OnValidate
- 《经济学人》15个栏目版块介绍,快速了解杂志!
- RF(射频) - VSWR(电压驻波比)
- 深度学习图像分类数据集制作
- 调用百度汇率api 获取各国的汇率值
- linux下安装MySQL5.7及遇到的问题总结
- 史上最全WindowsMac系统各种快捷键大全(1000余个)
- 袁萌浅谈C919大飞机(五)
- Linux下重要日志及查看方式
热门文章
- 【Tools-Mujoco】创建自定义的Mujoco模型
- 中国联通sgip短信开发
- 根据数据库表结构生成Excel表设计——工具介绍
- easydl相关文档和code
- css中的rgba() 兼容IE8以下的浏览器
- 应急响应之日志排查方法,Windows篇
- android image 转yuv_Android RGB图片转YUV420数据
- 华为视频携手优酷 打造全场景智慧影音娱乐体验
- C#编程-130:Brush的五个继承类
- 服务器dns被劫持如何修复,电脑DNS被劫持怎么修复?电脑dns被劫持的完美解决方法...