初探VUX(基本官网上无特别无干货)

vux@2.x 推荐webpack+vue-loader方式的开发。
第一步安装cli依赖
npm install vue-cli -g
接下来创建项目注意名称是小写
1037363-20190428142620114-1196812830.png
cd projectPath
yarn
yarn dev
小声说:vux运行真的速度不快要下载很多依赖包
运行没有主动跳转到http://localhost:8080/#/
项目运行效果如下:
1037363-20190428150145401-371026039.png
airyland/vux2模板主要处理的事项:
引入 reset.less,默认样式不包含reset,并且部分用户自己有一套reset样式,因此需要在App.vue进行手动引入
1037363-20190428150509083-1561066017.png
配置 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组件,没有很特别的。

转载于:https://www.cnblogs.com/smart-girl/p/10785492.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值