vux@2.x 推荐webpack+vue-loader方式的开发。

第一步安装cli依赖

npm install vue-cli -g

接下来创建项目注意名称是小写



cd projectPath

yarn

yarn dev

小声说:vux运行真的速度不快要下载很多依赖包

运行没有主动跳转到http://localhost:8080/#/

项目运行效果如下:



airyland/vux2模板主要处理的事项:

引入 reset.less,默认样式不包含reset,并且部分用户自己有一套reset样式,因此需要在App.vue进行手动引入



配置 vue-loader(通过配置vux-loader实现)

// vux-loader
plugins: [{
name: 'vux-ui'
}]

配置babel-loader以正确编译 VUX 的js源码(通过配置vux-loader实现)


plugins: [{
name: 'vux-ui'
}]

安装less-loader以正确编译less源码


npm install less less-loader --save-dev

安装 yaml-loader 以正确进行语言文件读取

npm install yaml-loader --save-dev

添加 viewport meta

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">

添加 Fastclick 移除移动端点击延迟


const FastClick = require('fastclick')
FastClick.attach(document.body)

添加 webpack plugin, 在构建后去除重复css代码(通过配置vux-loader实现)

plugins: [{
name: 'duplicate-style'
}]

如果你使用 webpack-simple 模板或者 webpack 配置里缺少 .vue extension 配置,请记得配置:

resolve: {
extensions: ['.js', '.vue', '.json']
}

看了一下所有的组件UI组件,没有很特别的。

初探VUX(基本官网上无特别无干货)的更多相关文章

  1. 互联网公司的面试官是如何360°无死角考察候选人的?[z]

    [z]https://juejin.im/post/5c0e47ebf265da614e2be9a7 一.写在前面 最近收到不少读者反馈,说自己在应聘一些中大型互联网公司的Java工程师岗位时遇到了不 ...

  2. 自己封装的Windows7 64位旗舰版,微软官网上下载的Windows7原版镜像制作,绝对纯净版

    MSDN官网上下载的Windows7 64位 旗舰版原版镜像制作,绝对纯净版,无任何精简,不捆绑任何第三方软件.浏览器插件,不含任何木马.病毒等. 集成: 1.Office2010 2.DirectX ...

  3. Masonry+Infinite-Scroll实现无刷新无分页完美瀑布流(转)

    一.Masonry 是基于Jquery插件,用于对CSS布局的可移动层进行重新布局.Masonry愿意石工,可以这样形象的理解,页面上很多大小不一的移动层可以想象成散乱的石头,经过Masonry这个石 ...

  4. webbrowser获取无ID无Name控件并模拟点击

    常见的获取控件并点击(自动登录): var txtUserID = wbsTask.Document.All["userName"]; var txtPsd = wbsTask.D ...

  5. 慕课网-Java入门第一季-7-2 Java 中无参无返回值方法的使用

    来源:http://www.imooc.com/code/1578 如果方法不包含参数,且没有返回值,我们称为无参无返回值的方法. 方法的使用分两步: 第一步,定义方法 例如:下面代码定义了一个方法名 ...

  6. 关于在官网上查看和下载特定版本的webrtc代码

    注:这个方法已经不适用了,帖子没删只是留个纪念而已 gclient:如果不知道gclient是什么东西 ... 就别再往下看了. 下载特定版本的代码: #gclient sync --revision ...

  7. Java 中无参无返回值方法的使用

    如果方法不包含参数,且没有返回值,我们称为无参无返回值的方法. 方法的使用分两步: 第一步,定义方法 例如:下面代码定义了一个方法名为 show ,没有参数,且没有返回值的方法,执行的操作为输出 “ ...

  8. 基于JQuery+JSP的无数据库无刷新多人在线聊天室

    JQuery是一款非常强大的javascript插件,本文就针对Ajax前台和JSP后台来实现一个无刷新的多人在线聊天室,该实现的数据全部存储在服务端内存里,没有用到数据库,本文会提供所有源程序,需要 ...

  9. 关于无光盘无u盘状态下该如何安装系统

    看到好东西,跟大家分享一下,需要装系统的可以作为参考资料 无光盘无u盘状态下该如何安装系统 重点  : 安装虚拟光驱(用来打开镜像文件) 一个你要安装的系统文件的iso镜像文件 http://www. ...

随机推荐

  1. throw和throws的区别以及try,catch,finally在有return的情况下执行的顺序

    一,抛出异常有三种形式,一是throw,一个throws,还有一种系统自动抛异常.下面它们之间的异同. (1).系统自动抛异常 1.当程序语句出现一些逻辑错误.主义错误或类型转换错误时,系统会自动抛出 ...

  2. 关于javascript异步

    1.简单的理解 JavaScript是单线程的!总所周知,正常代码是从上而下,一条一条顺序执行的.就好比下楼梯,第一条代码先获得内存或者先执行操作.当遇到漫长的处理操作时(比如读取庞大的文件时,执行大 ...

  3. Java初学习-常见单词

    implements    实行/实现      用于实现接口(interface) extends           延伸/扩展         用于类的继承 container        容 ...

  4. python docx文档转html页面

    文章链接:https://mp.weixin.qq.com/s/uMb2ziRS1NJ1GXIjofeANg 说到word文档转html的,网上一搜一大把,各种在线word转html页面,使用起来也方 ...

  5. Android Studio 3.0+ Annotation processors must be explicitly declared now

    把Android Studio 升级到3.0+ 版本的时候出现该问题:   可以看到 给了我们两种解决办法:   1. 即 给出现问题的三方 加上 annotationProcessor配置     ...

  6. SpringMVC归纳-1(model数据模型与重定向传参技术)

    要点: model是一个Map结构的数据模型,能重定向时传递数据(拼接URL),但不安全,主要用于渲染前端页面,配合Thymeleaf填充html里面里设置好的参数. @RequestParam用来获 ...

  7. TestLink-Windows安装教程

    TestLink-Windows安装教程 QQ群交流:585499566 一.这篇文章的目的 以后工作中要使用Testlink来管理测试的流程,需要在本地或者Testlink服务器上练习使用,在个人本 ...

  8. 记一次zabbix排错(数据库安装在其它服务器上)

    记一次zabbix排错 故障现象 1.在/var/log/zabbix/zabbix_server.log中出现以下报错: 12106:20190314:090947.010 [Z3001] conn ...

  9. python进阶之生成器

    迭代器 什么叫迭代 可以被for循环的就说明他们是可迭代的,比如:字符串,列表,字典,元祖,们都可以for循环获取里面的数据 下面我们看一个代码: number = 12345 for i in nu ...

  10. python学习笔记2_条件循环和其他语句

    一.条件循环和其他语句 1.print和import的更多信息. 1.1.使用逗号输出  //print() 打印多个表达式是可行的,用逗号隔开.       在脚本中,两个print语句想在一行输出 ...