vux教程

最新推荐文章于 2024-09-13 22:16:48 发布

管小贱

最新推荐文章于 2024-09-13 22:16:48 发布

阅读量1.4w

点赞数 8

本文链接：https://blog.csdn.net/weixin_41646815/article/details/79094196

版权

一、vue安装（node.js）

1、安装node.js

https://nodejs.org/en/下载安装

2、安装淘宝镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org

检查方式 cnpm -V 出现版本号

3、安装webpack

npm install webpack -g

检查方式 webpack -V

4、安装脚手架

npm install vue-cli -g

检查方式 vue -V

二、用vue-cli

1、window+r打开命令行，输入cmd

2、输入 cd desktop /*desktop指桌面*/

3、创建项目

vue init webpack project /*project是项目名称，自己取，不能用中文*/

进入安装会有很多问题（ps:use Eslint to lint your code）建议选no;

4、进入项目

cd desktop/project

5、安装 npm

输入 npm install 如果下载很久没有成功就输入cnpm install

6、安装vue路由

cnpm install vue-router vue-resource --save

7、启动项目

输入 npm run dev

浏览器中打开localhost：8080 /*默认8080*/

三、vux的搭建

1、安装vuex

npm install vuex --save-dev

2、在项目里面安装vux

npm install vux --save

3、安装vux-loader（必须安装）

npm install vux-loader --save-dev

4、安装less-loader（这个是用以正确编译less源码，否则会出现 ' Cannot GET / '）
npm install less less-loader --save-dev

5、安装yaml-loader (以正确进行语言文件读取)
npm install yaml-loader --save-dev

6、在build/webpack.base.conf.js 文件进行配置
const vuxLoader = require('vux-loader')
const webpackConfig = originalConfig

// 原来的 module.exports 代码赋值给变量 webpackConfig，
//即将原来的module.exports 改为 const webpackConfig

module.exports = vuxLoader.merge(webpackConfig, { plugins: ['vux-ui'] })

下面是webpack.base.conf.js文件配置

'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')
const vuxLoader = require('vux-loader') 

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}

const webpackConfig={
  context: path.resolve(__dirname, '../'),
  entry: {
    app: './src/main.js'
  },
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
  resolve: {
    extensions: ['.js', '.vue','less', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('media/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }
    ]
  },
  node: {
    // prevent webpack from injecting useless setImmediate polyfill because Vue
    // source contains it (although only uses it if it's native).
    setImmediate: false,
    // prevent webpack from injecting mocks to Node native modules
    // that does not make sense for the client
    dgram: 'empty',
    fs: 'empty',
    net: 'empty',
    tls: 'empty',
    child_process: 'empty'
  }
}
module.exports = vuxLoader.merge(webpackConfig, { plugins: ['vux-ui'] })

7、安装object-assign（这个是啥不知道0.0，不知道要不要下载）

npm install object-assign --save-dev

8、下载i18n（下载后再main.js里面配置）

npm install -save vuex-i18n es6-promise

在i18n配置中，还有一个文件夹叫locals在src目录下（这个文件夹不知道怎么下载的0.0）给git链接下载示例然后移动过去的

https://github.com/airyland/vux

main.js文件配置

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import objectAssign from 'object-assign'
import Vue from 'vue'
import App from './App'
import router from './router'
import Vuex from 'vuex'
import vuexI18n from 'vuex-i18n'
Vue.config.productionTip = false
Vue.use(Vuex)

require('es6-promise').polyfill()

/** i18n **/
let store = new Vuex.Store({
  modules: {
    i18n: vuexI18n.store
  }
})

Vue.use(vuexI18n.plugin, store)

const vuxLocales = require('json-loader!yaml-loader!./locales/all.yml')
const componentsLocales = require('json-loader!yaml-loader!./locales/components.yml')

const finalLocales = {
  'en': objectAssign(vuxLocales['en'], componentsLocales['en']),
  'zh-CN': objectAssign(vuxLocales['zh-CN'], componentsLocales['zh-CN'])
}

for (let i in finalLocales) {
  Vue.i18n.add(i, finalLocales[i])
}

import { DevicePlugin, ToastPlugin, LocalePlugin, AlertPlugin, ConfirmPlugin, LoadingPlugin, WechatPlugin } from 'vux'

Vue.use(LocalePlugin)
const nowLocale = Vue.locale.get()
if (/zh/.test(nowLocale)) {
  Vue.i18n.set('zh-CN')
} else {
  Vue.i18n.set('en')
}
//
store.registerModule('vux', {
  state: {
    demoScrollTop: 0,
    isLoading: false,
    direction: 'forward'
  },
  mutations: {
    updateDemoPosition (state, payload) {
      state.demoScrollTop = payload.top
    },
    updateLoadingStatus (state, payload) {
      state.isLoading = payload.isLoading
    },
    updateDirection (state, payload) {
      state.direction = payload.direction
    }
  },
  actions: {
    updateDemoPosition ({commit}, top) {
      commit({type: 'updateDemoPosition', top: top})
    }
  }
})
// plugins
Vue.use(AlertPlugin)
Vue.use(ToastPlugin)
Vue.use(DevicePlugin)
Vue.use(ToastPlugin)
Vue.use(AlertPlugin)
Vue.use(ConfirmPlugin)
Vue.use(LoadingPlugin)
Vue.use(WechatPlugin)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

基本工作已经完成了。在.vue文件中开始写示例

<template>
  <div>
    <group>
      <x-switch :title="$t('Basic Usage')" v-model="show1"></x-switch>
      <x-switch :title="$t('Android Theme')" v-model="show7"></x-switch>
      <x-switch :title="$t('Show cancel menu')" v-model="show2"></x-switch>
      <x-switch :title="$t('Array menu')" v-model="show5"></x-switch>
    </group>

    <group :title="$t('Prevent closing when clicking mask')">
      <x-switch :title="$t('Basic Usage')" v-model="show4"></x-switch>
    </group>

    <group>
      <x-switch :title="$t('Menu as tips')" v-model="show3"></x-switch>
      <x-switch :title="$t('Slot: header')" v-model="show6"></x-switch>
      <x-switch :title="$t('Prevent auto closing')" v-model="show8"></x-switch>
    </group>

    <actionsheet v-model="show4" :menus="menus1" :close-on-clicking-mask="false" show-cancel @on-click-mask="console('on click mask')"></actionsheet>

    <actionsheet v-model="show1" :menus="menus1" @on-click-menu="click"></actionsheet>

    <actionsheet v-model="show2" :menus="menus2" @on-click-menu="click" show-cancel></actionsheet>

    <actionsheet v-model="show3" :menus="menus3" @on-click-menu="click" @on-click-menu-delete="onDelete" show-cancel></actionsheet>

    <actionsheet v-model="show5" :menus="menus5" show-cancel @on-click-menu="click5"></actionsheet>

    <actionsheet v-model="show6" :menus="menus1">
      <p slot="header" v-html="$t('Actionsheet header')"></p>
    </actionsheet>

    <actionsheet v-model="show7" :menus="menu7" theme="android" @on-click-menu="click">
    </actionsheet>

    <toast v-model="showSuccess">{{ $t('Deleted~') }}</toast>

    <div v-transfer-dom>
      <actionsheet v-model="show8" :menus="menus8" @on-click-menu="demo8doClose" :close-on-clicking-mask="false" :close-on-clicking-menu="false">
      </actionsheet>
    </div>
  </div>
</template>

<i18n>
Prevent auto closing:
  zh-CN: 不自动关闭
Close me:
  zh-CN: 点我关闭
Deleted~:
  zh-CN: 删除成功
'Slot: header':
  zh-CN: 使用 header slot
Basic Usage:
  zh-CN: 基本使用
Android Theme:
  zh-CN: 安卓风格
Show cancel menu:
  zh-CN: 显示取消菜单
Menu as tips:
  zh-CN: 显示提示文字
Prevent closing when clicking mask:
  zh-CN: 点击遮罩区域不自动关闭
Share to friends:
  zh-CN: 分享给朋友
Share to timeline:
  zh-CN: 分享到朋友圈
Take Photo:
  zh-CN: 拍照
Choose from photos:
  zh-CN: 从相册选择
Actionsheet header:
  en: 'Are you sure?<br/><span style="color:#666;font-size:12px;">Once deleted, you will never find it.</span>'
  zh-CN: '确定咩?<br/><span style="color:#666;font-size:12px;">删除后就无法撤消了哦</span>'
'<span style="color:red">Delete</span>':
  zh-CN: '<span style="color:red">删除</span>'
Array menu:
  zh-CN: 使用数组定义菜单
</i18n>

<script>
import { TransferDom, Actionsheet, Group, XSwitch, Toast } from 'vux'

export default {
  components: {
    Actionsheet,
    Group,
    XSwitch,
    Toast
  },
  directives: {
    TransferDom
  },
  data () {
    return {
      show1: false,
      menus1: {
        menu1: this.$t('Share to friends'),
        menu2: this.$t('Share to timeline')
      },
      show2: false,
      menus2: {
        menu1: this.$t('Take Photo'),
        menu2: this.$t('Choose from photos')
      },
      show3: false,
      show4: false,
      show5: false,
      show6: false,
      show7: false,
      show8: false,
      menus5: [{
        label: this.$t('Actionsheet header'),
        type: 'info'
      }, {
        label: 'Primary',
        type: 'primary',
        value: 'primary',
        otherProp: 'hey'
      }, {
        label: 'Warn',
        type: 'warn'
      }, {
        label: 'Disabled',
        type: 'disabled'
      }, {
        label: 'Default'
      }],
      menu7: {
        menu1: '北京烤鸭',
        menu2: '陕西油泼面',
        menu3: '西安肉夹馍'
      },
      showSuccess: false,
      menus3: {
        'title.noop': this.$t('Actionsheet header'),
        delete: '<span style="color:red">Delete</span>'
      },
      menus8: {
        menu1: this.$t('Close me'),
        menu2: this.$t('Close me')
      }
    }
  },
  methods: {
    demo8doClose () {
      this.$vux.loading.show({
        text: 'processing'
      })
      setTimeout(() => {
        this.$vux.loading.hide()
        this.show8 = false
      }, 1000)
    },
    console (msg) {
      console.log(msg)
    },
    click (key) {
      console.log(key)
    },
    click5 (key, item) {
      console.log(key, item)
    },
    onDelete () {
      this.showSuccess = true
    }
  }
}
</script>

<style>
.popup0 {
  padding-bottom:15px;
  height:200px;
}
.popup1 {
  width:100%;
  height:100%;
}
</style>

就可以出来样式了