ins-vueVue.js学习

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

2018-08-01  本文已影响0人  youins

Element-UI

-->官方网站

简介

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

安装

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组件库,主要服务于微信页面。

安装

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

应用

const vuxLoader = require('vux-loader')
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>

滇黔桂燃气项目应用案例

上一篇 下一篇

猜你喜欢

热点阅读