Vue应用框架整合与实战--框架整合(特殊)篇

Element-UI

-->官方网站

简介

Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

• Controllability
  一致性 Consistency
  与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
  在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。
• 反馈 Feedback
  控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；
  页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。
• 效率 Efficiency
  简化流程：设计简洁直观的操作流程；
  清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；
  帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。
• 可控 Controllability
  用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；
  结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。

安装

cnpm install element-ui --save

应用

在main.js引入element-ui

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

案例

image

Vux

-->官方网站

简介

VUX（读音 [v’ju:z]，同 views）是基于WeUI和Vue(2.x)开发的移动端UI组件库，主要服务于微信页面。

• 基于webpack + vue-loader + vux可以快速开发移动端页面，配合vux-loader方便你在WeUI的基础上定制需要的样式。

• vux-loader保证了组件按需使用，因此不用担心最终打包了整个vux的组件库代码。

• VUX并不完全依赖于WeUI，VUX 在 WeUI 的基础上扩展了多个常用组件，但是尽量保持整体UI样式接近WeUI的设计规范。

安装

cnpm install vux --save
cnpm install vux-loader --save-dev  // vux依赖于vux-loader
cnpm install less-loader --save-dev // 以正确编译less源码

应用

• 在build/webpack.base.conf.js配置

const vuxLoader = require('vux-loader')

• 把第一个module.exports赋值变量

let webpackConfig ={里面代码不动}

module.exports = vuxLoader.merge(webpackConfig, {
  plugins: [
    {name: 'vux-ui'},
    {name: 'progress-bar'},
    {name: 'duplicate-style'},
    {
        name: 'less-theme',
        path: 'src/style/theme.less'
    }
  ]
})

如果项配置vux控件的样式,less-theme插件可以实现自定义样式,编辑src/style/theme.less文件,duplicate-style作用可以去掉前端重复的css代码

可以编辑的变量参考如下less文件

https://github.com/airyland/vux/blob/v2/src/styles/variable.less

index.html入口页面

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

案例

<template>
  <div id="app" style="height:100%;">
    <div v-transfer-dom>
      <loading v-model="c_isLoading"></loading>
    </div>
    <view-box ref="viewBox" body-padding-bottom="3.5em">
      <keep-alive>
        <router-view v-if="$route.meta.keepAlive"></router-view>
      </keep-alive>
      <router-view v-if="!$route.meta.keepAlive"></router-view>
    </view-box>
  </div>
</template>

<script>
import {Loading, TransferDom, ViewBox} from 'vux'
import {mapGetters} from 'vuex'
import {refreshAccountToken, getLoaclAddress, setLoaclAddress,
  removeLoaclAddress, getUserAgent,getOpenId, getAccountId} from '@/lib/session'

export default {
  name: 'App',
  data() {
    return {
    }
  },
  directives: {
    TransferDom
  },
  components: {
    Loading,
    ViewBox
  },
  computed: {
    ...mapGetters({
      c_isLoading: 'loadingStatus'
    })
  }
}
</script>
<style lang="less">
@import '~vux/src/styles/reset.less';
@import '~vux/src/styles/1px.less';
@import '~vux/src/styles/tap.less';
</style>

滇黔桂燃气项目应用案例

• 首页

  
  image

• 个人中心

  
  image

• 订单列表

  
  image