搭建vux项目

介绍:VUX是基于WeUI和Vue(2.x)开发的移动端UI组件库,基于webpack + vue-loader + vux可以快速开发移动端页面

VUX 必须配合 vux-loader 使用

首先搭建vue项目

1.安装vue
npm install vue --save
可以安装淘宝镜像
npm install --registry=https://registry.npm.taobao.org
2.安装三脚架vue-cli
npm install vue-cli -g || cnpm install vue-cli -g
3.搭建项目
vue init webpack +项目名(my-project)
4.cd my-project 进入项目中
5.npm install || cnpm install 安装依赖包
6.npm run dev || cnpm run dev 启动项目
到这项目启动 证明vue项目搭建成功

安装vux

1.npm install vux --save || cnpm install vux --save
2. 安装vux-loader
npm install vux-loader --save-dev || cnpm install vux-loader --save-dev
3.安装less-loader
npm install less less-loader --save-dev || cnpm install less less-loader --save-dev
4.在build文件夹下webpack.base.conf.js 文件进行配置
新加内容:
const vuxLoader = require(‘vux-loader’)
const webpackConfig = originalConfig

originalConfig就是原来的 module.exports出去的代码,把它整个赋值给变量 webpackConfig
在最后加入 module.exports = vuxLoader.merge(webpackConfig, { plugins: [‘vux-ui’] }) 引用插件vux

在 resolve:{
extensions:[’.js’, ‘.vue’, ‘.json’, ‘.less’]}里加入".less"

最后启动项目 npm run dev || cnpm run dev

启动出现的问题:

1.报错【Syntax Error: TypeError: this.getOptions is not a function】

可能原因:默认安装了最新版本的less和less-loader,

解决办法:

1.卸掉最新的版本,下载稳定的版本 推荐使用less@3.9.0 less-loader@4.1.10

npm uninstall less || cnpm uninstall less
npm uninstall less-loade || cnpm uninstall less-loade

安装:

npm install less@3.9.0 || cnpm uninstall less@3.9.0
npm uninstall less-loader@4.1.10 || cnpm uninstall less-loader@4.1.10

安装后重启即可

2.vue 解决*!!vue-style-loader!css-loader?{“sourceMap”:true}或_modules/vux/src/components/alert/index.vue…问题

可能是css解析出现的问题:

如果用的是.css 文件,执行 npm install stylus-loader css-loader style-loader --save-dev 安装依赖就行。
如果用的是.less 文件,执行 npm install less less-loader --save-dev 安装依赖就行。 vux是需要使用.less文件
如果用的是.sass 文件,执行 npm install sass sass-loader --save-dev 安装依赖就行。或者($npm intall sass-loader --save ; $npm install node-sass --save)
ps:我出现这个报错是因为 我再出现【Syntax Error: TypeError: this.getOptions is not a function】只卸载了lass-loader 重装,然后有了第二个报错,然后按照解决方法后又出现 “Error evaluating function unit: the first argument to unit must be a number”的问题 很奇葩,如果有人也遇见了,请把less也卸载了 安装稳定版本;
另外:如果安装低版本之后还出现问题 可能是版本还不适合,你可以尝试再下载地的版本

vue+vux vux安装出现错误相关推荐

  1. vue.js+vux项目总结

    最近做完一个vue.js+vux的移动端项目,刚刚完成上线,记录一下开发过程中遇到的问题,避免以后再次遇到时,可以翻阅查看. 1. 无法设置服务器发送过来的cookie 这是一个保存登录状态的问题,后 ...

  2. 前端 vue + element + vux

    前端 vue + element + vux 页面效果 学习资料 https://blog.csdn.net/yangwenpei116/article/details/90206523

  3. php高版本安装ecshop错误解决方法

    php高版本安装ecshop错误解决方法 参考文章: (1)php高版本安装ecshop错误解决方法 (2)https://www.cnblogs.com/bqx619/p/5014171.html ...

  4. linux源码安装php缺少动态库,php源代码安装常见错误解决办法

    php源代码安装常见错误解决办法 错误:configure: error: libevent >= 1.4.11 could not be found 解决:yum -y install lib ...

  5. java安装jdk错误1316 指定的账户已存在

    java安装jdk错误1316 指定的账户已存在 处理步骤: 1.卸载jdk,成功后重启 2.删除注册表中文件夹 (1)\HKEY_LOCAL_MACHINE\SOFTWARE\JavaSoft文件夹 ...

  6. vue - cli 脚手架安装

    一. node安装 1)如果不确定自己是否安装了node,可以在命令行工具内执行: node -v  (检查一下 版本): 2)如果 执行结果显示: xx 不是内部命令,说明你还没有安装node , ...

  7. 关于node.js 和vue.js的安装、卸载、浏览器测试问题?

    关于node.js 和vue.js的安装.卸载.浏览器测试问题? 最近忙于深入研究vue.js框架的适用问题,所以顺带也有必要系统的研究一下node.js是怎么一回事?! 闲话不多说,直接上文章链接: ...

  8. python pip安装第三方库老是报错_#python pip 安装dlib一直失败?#python安装dlib错误...

    #python pip 安装dlib一直失败?#python安装dlib错误 python dlib 教程2020-10-11 07:52:36人已围观 ubuntu里面怎么安装dlib 下面是在ub ...

  9. 在linux底下用pip安装mysqlclient错误解决办法

    1.在linux底下用pip安装mysqlclient错误,使用命令pip install mysqlclient,报如下图的错误: 2.原因是linux少了mysql相关的库,需要安装一下,使用命令 ...

最新文章

  1. 初步理解Python进程的信号通讯
  2. 五分钟没有操作自动退出_遇到不喜欢的小动物怎么办?教你五分钟友好的送走小动物!...
  3. 视频 + PPT 下载 | 挣脱流量束缚,社交电商的未来在哪里?
  4. Zookeeper内部的简单细节(一)
  5. 微型计算机引脚,微型计算机硬件基础8086引脚.doc
  6. js cookie操作
  7. 萧县机器人_全国总决赛第一名!萧县杨楼的这位学生厉害了
  8. python当作为条件表达式时_2019知到Python程序设计基础(山东联盟)结课测验答案...
  9. ad中电容用什么封装_【AD封装】贴片插件晶振(带3D)
  10. Windows Mac 光盘刻录软件
  11. Axure产品设计软件视频教程大全
  12. 好文:读客图书董事长华楠接受采访
  13. iPhone--卡贴是什么
  14. 将文本中的各个单词的字母顺序翻转(Java)
  15. 【蓝桥杯集训·每日一题】AcWing 3777. 砖块
  16. 最全16套vue.js入门和项目实战+素材+源码
  17. 【基于通道-空间注意的高分辨率锐化】
  18. 淮北师范大学计算机科学与技术专业属于,2015年淮北师范大学计算机科学与技术专业最低分是多少?...
  19. Verilog系统函数
  20. Windows 7之如何更改计算机名

热门文章

  1. com.sun.mail.util.MailConnectException: Couldn't connect to host异常解决
  2. python列表与元祖详解
  3. IC设计行业分类辨析
  4. 关于我的那些事【我的2022】
  5. r中gglot怎么组合多张图_R语言:多幅图形组合为一幅图形的方法
  6. HTML中input的用法
  7. 前端html小技巧—input标签详解
  8. vivo x TiDB丨解决云服务海量数据挑战
  9. 哥斯达黎加共和国政府系统遭勒索攻击,引发混乱
  10. DoraCloud云教室实践