vue项目使用vux框架配置教程
吐槽下,这个vux配置教程那。。写的实在是坑,也不搞个示例代码。。。想上天吗????
正常安装的话。。。100%报错。。。以下是正确配置
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
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']
})
然后再重启下。。。完美运行。。。
最新文章
- 【LintCode】计算两个数的交集(一)
- 第一个CSS变量:currentColor
- LightOj1028 - Trailing Zeroes (I)---求因子个数
- 伪类写border, transform: scale3d() 及兼容性
- 捕获JSON 解析错误
- js二级下拉菜单
- 查看library_cache 库缓冲区的命中率
- Citrix 服务器虚拟化之三十二 XenConvert
- JS逻辑运算大于小于比较
- fastjson的JSONArray和JSONObject
- kafka学习1:kafka安装
- Zabbix4.0监控URL
- 包学会之浅入浅出Vue.js:升学篇
- C# 创建、部署和调用WebService简单示例
- 20155239 2017-11-19 实现mypwd(选做,加分)
- 关于XILINX芯片IO管脚的上拉电阻的疑问
- 修改zabbix为中文,并解决乱码问题(三)
- 在SharePoint解决方案中使用JavaScript (1) – 引用.js文件
- [转载]Apache在windows下的安装配置
- Python学习进程(13)文件与IO
热门文章
- Django学习笔记之Models与ORM操作
- Mysql主从架构报错-Fatal error: The slave I/O thread stops because master and slave have equal MySQL server UUIDs; these UUIDs must be different for replication to work...
- 20145303刘俊谦 《Java程序设计》第4周学习总结
- 《Java程序设计》实验3
- ThreadPoolExecutor源码浅析
- Oracle18c创建不带C##的用户
- 爬虫之urllib2库的基本使用
- elasticsearch系列(七)java定义score
- Nodejs V8引擎 fast property lookup
- 整数分解为若干项之和 - PAT