[分享] Vue移动端项目配合第三方ui库快速搭建开发环境

简介: [分享] Vue移动端项目配合第三方ui库快速搭建开发环境

// copy

cnpm install --save es6-promise

cnpm install --save babel-polyfill

cnpm install fastclick -S

cnpm i lib-flexible -S

cnpm install px2rem-loader -S-d

cnpm install vuex -S

cnpm install axios --save

cnpm install stylus --save-dev

cnpm install stylus-loader --save-dev

使用vux模板
vux快速开始

vue init airyland/vux2 demo

兼容不支持promise的浏览器 (两种方法)
es6-promise

cnpm install --save es6-promise
require('es6-promise').polyfill() // main.js

babel-polyfill

cnpm install --save babel-polyfill
import "babel-polyfill" // main.js

使用vux axios封装AjaxPlugin

// app.vue
import { AjaxPlugin } from 'vux'
Vue.use(AjaxPlugin)

使用方式

// 全局中使用
Vue.http.post('/api').then()
// 组件中使用
export default {
  created () {
    this.$http.post('/api').then(({data}) => {
      console.log(data)
    })
  }
}

FastClick (vux中已处理)

cnpm install fastclick -S
const FastClick = require('fastclick') // main.js
FastClick.attach(document.body)

lib-flexible
手淘移动端rem适配方案配合第三方ui库

cnpm i lib-flexible -S
cnpm install px2rem-loader -S-d
// main.js
import 'lib-flexible'
  • px2rem-loader配置
// build/utils.js
  const cssLoader = {
    loader: 'css-loader',
    options: {
      sourceMap: options.sourceMap
    }
  }

// one
  var px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 37.5  // 很多第三方库采用的是375像素的设计标准,如果设计图为750则要自己除以二处理一下,这个适配第三方的方式有很多种,如果有好的建议可以联系我一起探讨哈
    }
  }
// end one
  // generate loader string to be used with extract text plugin
  // two => 添加 px2remLoader 到配置项
  function generateLoaders(loader, loaderOptions) {
    const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]
    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
    }
// ...
  • index.html适配处理项
// 手动配置viewport,不使用高清方案
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">

实现真机热调试

手机电脑链接到同一wifi下,修改page.json文件添加 --host 0.0.0.0,
使用win+r打开命令行ipconfig查看本机ip,手机使用IP:8080访问即可
  "scripts": {
    "dev": "webpack-dev-server --host 0.0.0.0 --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js"
  },

vuex

cnpm install vuex -S

axios

cnpm install axios --save
// mian.js
import axios from 'axios'
Vue.prototype.$axios = axios  // 挂载到Vue原型链上

stylus

cnpm install stylus --save-dev
cnpm install stylus-loader --save-dev

样式重置 reset.less

// app.vue
<style lang="less">
@import '~vux/src/styles/reset.less';
</style>
目录
相关文章
|
9天前
|
JavaScript 前端开发
如何优雅的只在当前页面中覆盖ui库中组件的样式(vue的问题)
如何优雅的只在当前页面中覆盖ui库中组件的样式(vue的问题)
20 0
如何优雅的只在当前页面中覆盖ui库中组件的样式(vue的问题)
|
9天前
|
JavaScript
Vue给Element UI的el-popconfirm绑定按钮事件
Vue给Element UI的el-popconfirm绑定按钮事件
|
8天前
|
存储 安全 测试技术
使用 Visual Studio Code 创建 SAP UI5 项目遇到 self-signed security certificate 相关问题
使用 Visual Studio Code 创建 SAP UI5 项目遇到 self-signed security certificate 相关问题
19 0
|
9天前
|
移动开发 JavaScript 前端开发
学习vue3使用在线官方开发环境play.vuejs.org进行测试
学习vue3使用在线官方开发环境play.vuejs.org进行测试
16 1
|
9天前
|
JavaScript
VUE里修改element-ui的显示层次与上下间隔
VUE里修改element-ui的显示层次与上下间隔
16 1
|
9天前
|
JavaScript
vue element ui 打开弹窗出现黑框问题
vue element ui 打开弹窗出现黑框问题
22 1
|
9天前
|
缓存 监控 JavaScript
环境搭建:Vue项目的开发环境和生产环境配置
【4月更文挑战第23天】本文指导Vue开发者配置开发和生产环境,强调了两者目的和特点。开发环境用于编写、测试和调试,侧重快速反馈和调试工具;生产环境注重稳定性、效率和安全性,需进行代码优化、错误处理和日志监控。配置步骤包括安装Node.js和npm,使用Vue CLI,配置Webpack、热重载和源码映射。生产环境要实现代码分割、压缩、最小化,启用CSP、HTTPS,优化静态资源和缓存策略。环境配置应随项目发展和技术进步持续优化。
|
9天前
|
XML JSON 开发框架
基于 OData 模型和 JSON 模型的 UI5 表格控件行项目的添加和删除实现
基于 OData 模型和 JSON 模型的 UI5 表格控件行项目的添加和删除实现
22 1
|
JavaScript Java 物联网
现有vue项目seo优化
现有vue项目seo优化
|
JavaScript 前端开发
重读vue电商网站45之项目优化上线
重读vue电商网站45之项目优化上线
98 0
重读vue电商网站45之项目优化上线