如何优雅的使用vue+vux开发app -01

最新推荐文章于 2021-07-21 22:25:07 发布
最新推荐文章于 2021-07-21 22:25:07 发布
阅读量280 收藏
点赞数
文章标签： json javascript ViewUI

如何优雅的使用vue+vux开发app -01

很明显下面是个错误的示范：
213419-20160628125928718-1838409055.png

<!DOCTYPE html>
<html>
<head>
    <title>vue-vux</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!--include Vux style-->
    <link rel="stylesheet" href="bower_components/vux/dist/vux.css">
    <!--include Vue yourself-->
    <script src="bower_components/vue/dist/vue.js"></script>
    <!-- vue-router -->
    <script src="bower_components/vue-router/dist/vue-router.js"></script>
    <!-- jquery -->
    <script src="bower_components/jquery/jquery.js"></script>
    <!--include the components you need-->
    <script src="bower_components/vux/dist/components/actionsheet/index.js"></script>
    <script src="bower_components/vux/dist/components/address/index.js"></script>
    <!-- 地址库数据 export addressData-->
    <script src="js/addressData.js"></script>
    <script src="bower_components/vux/dist/components/alert/index.js"></script>
    <script src="bower_components/vux/dist/components/badge/index.js"></script>
    <script src="bower_components/vux/dist/components/blur/index.js"></script>
    <script src="bower_components/vux/dist/components/box/index.js"></script>
    <script src="bower_components/vux/dist/components/button-tab/index.js"></script>
    <script src="bower_components/vux/dist/components/button-tab-item/index.js"></script>
    <script src="bower_components/vux/dist/components/calendar/index.js"></script>
    <script src="bower_components/vux/dist/components/card/index.js"></script>
    <script src="bower_components/vux/dist/components/cell/index.js"></script>
    <script src="bower_components/vux/dist/components/checker/index.js"></script>
    <script src="bower_components/vux/dist/components/checker-item/index.js"></script>
    <script src="bower_components/vux/dist/components/checklist/index.js"></script>
    <script src="bower_components/vux/dist/components/circle/index.js"></script>
    <script src="bower_components/vux/dist/components/clocker/index.js"></script>
    <script src="bower_components/vux/dist/components/color-picker/index.js"></script>
    <script src="bower_components/vux/dist/components/confirm/index.js"></script>
    <script src="bower_components/vux/dist/components/countdown/index.js"></script>
    <script src="bower_components/vux/dist/components/countup/index.js"></script>
    <script src="bower_components/vux/dist/components/date-formatter/index.js"></script>
    <script src="bower_components/vux/dist/components/datetime/index.js"></script>
    <script src="bower_components/vux/dist/components/dev-tip/index.js"></script>
    <script src="bower_components/vux/dist/components/dialog/index.js"></script>
    <script src="bower_components/vux/dist/components/divider/index.js"></script>
    <script src="bower_components/vux/dist/components/flexbox/index.js"></script>
    <script src="bower_components/vux/dist/components/flexbox-item/index.js"></script>
    <script src="bower_components/vux/dist/components/friendly-time/index.js"></script>
    <script src="bower_components/vux/dist/components/group/index.js"></script>
    <script src="bower_components/vux/dist/components/group-title/index.js"></script>
    <script src="bower_components/vux/dist/components/icon/index.js"></script>
    <script src="bower_components/vux/dist/components/inline-calendar/index.js"></script>
    <script src="bower_components/vux/dist/components/inline-desc/index.js"></script>
    <script src="bower_components/vux/dist/components/inview/index.js"></script>
    <script src="bower_components/vux/dist/components/loading/index.js"></script>
    <script src="bower_components/vux/dist/components/masker/index.js"></script>
    <script src="bower_components/vux/dist/components/number-roller/index.js"></script>
    <script src="bower_components/vux/dist/components/offcanvas/index.js"></script>
    <script src="bower_components/vux/dist/components/orientation/index.js"></script>
    <script src="bower_components/vux/dist/components/panel/index.js"></script>
    <script src="bower_components/vux/dist/components/picker/index.js"></script>
    <script src="bower_components/vux/dist/components/popup/index.js"></script>
    <script src="bower_components/vux/dist/components/popup-picker/index.js"></script>
    <script src="bower_components/vux/dist/components/previewer/index.js"></script>
    <script src="bower_components/vux/dist/components/progress/index.js"></script>
    <script src="bower_components/vux/dist/components/qrcode/index.js"></script>
    <script src="bower_components/vux/dist/components/radio/index.js"></script>
    <script src="bower_components/vux/dist/components/range/index.js"></script>
    <script src="bower_components/vux/dist/components/rater/index.js"></script>
    <script src="bower_components/vux/dist/components/scroller/index.js"></script>
    <script src="bower_components/vux/dist/components/search/index.js"></script>
    <script src="bower_components/vux/dist/components/selector/index.js"></script>
    <script src="bower_components/vux/dist/components/shake/index.js"></script>
    <script src="bower_components/vux/dist/components/spinner/index.js"></script>
    <script src="bower_components/vux/dist/components/steps/index.js"></script>
    <script src="bower_components/vux/dist/components/sticky/index.js"></script>
    <script src="bower_components/vux/dist/components/swiper/index.js"></script>
    <script src="bower_components/vux/dist/components/swiper-item/index.js"></script>
    <script src="bower_components/vux/dist/components/switch/index.js"></script>
    <script src="bower_components/vux/dist/components/tab/index.js"></script>
    <script src="bower_components/vux/dist/components/tab-item/index.js"></script>
    <script src="bower_components/vux/dist/components/tabbar/index.js"></script>
    <script src="bower_components/vux/dist/components/tabbar-item/index.js"></script>
    <script src="bower_components/vux/dist/components/timeline/index.js"></script>
    <script src="bower_components/vux/dist/components/timeline-item/index.js"></script>
    <script src="bower_components/vux/dist/components/tip/index.js"></script>
    <script src="bower_components/vux/dist/components/toast/index.js"></script>
    <script src="bower_components/vux/dist/components/wechat-emotion/index.js"></script>
    <script src="bower_components/vux/dist/components/x-button/index.js"></script>
    <script src="bower_components/vux/dist/components/x-header/index.js"></script>
    <script src="bower_components/vux/dist/components/x-img/index.js"></script>
    <script src="bower_components/vux/dist/components/x-input/index.js"></script>
    <script src="bower_components/vux/dist/components/x-number/index.js"></script>
    <script src="bower_components/vux/dist/components/x-textarea/index.js"></script>
    <script>
    // register components
    Vue.component("actionsheet", vuxActionsheet);
    Vue.component("address", vuxAddress);
    Vue.component("alert", vuxAlert);
    Vue.component("badge", vuxBadge);
    Vue.component("blur", vuxBlur);
    Vue.component("box", vuxBox);
    Vue.component("button-tab", vuxButtonTab);
    Vue.component("button-tab-item", vuxButtonTabItem);
    Vue.component("calendar", vuxCalendar);
    Vue.component("card", vuxCard);
    Vue.component("cell", vuxCell);
    Vue.component("checker", vuxChecker);
    Vue.component("checker-item", vuxCheckerItem);
    Vue.component("checklist", vuxChecklist);
    Vue.component("circle", vuxCircle);
    Vue.component("clocker", vuxClocker);
    Vue.component("color-picker", vuxColorPicker);
    Vue.component("confirm", vuxConfirm);
    Vue.component("countdown", vuxCountdown);
    Vue.component("countup", vuxCountup);
    Vue.component("date-formatter", vuxDateFormatter);
    Vue.component("datetime", vuxDatetime);
    Vue.component("dev-tip", vuxDevTip);
    Vue.component("dialog", vuxDialog);
    Vue.component("divider", vuxDivider);
    Vue.component("flexbox", vuxFlexbox);
    Vue.component("flexbox-item", vuxFlexboxItem);
    Vue.component("friendly-time", vuxFriendlyTime);
    Vue.component("group", vuxGroup);
    Vue.component("group-title", vuxGroupTitle);
    Vue.component("icon", vuxIcon);
    Vue.component("inline-calendar", vuxInlineCalendar);
    Vue.component("inline-desc", vuxInlineDesc);
    Vue.component("inview", vuxInview);
    Vue.component("loading", vuxLoading);
    Vue.component("masker", vuxMasker);
    Vue.component("number-roller", vuxNumberRoller);
    Vue.component("offcanvas", vuxOffcanvas);
    Vue.component("orientation", vuxOrientation);
    Vue.component("panel", vuxPanel);
    Vue.component("picker", vuxPicker);
    Vue.component("popup", vuxPopup);
    Vue.component("popup-picker", vuxPopupPicker);
    Vue.component("previewer", vuxPreviewer);
    Vue.component("progress", vuxProgress);
    Vue.component("qrcode", vuxQrcode);
    Vue.component("radio", vuxRadio);
    Vue.component("range", vuxRange);
    Vue.component("rater", vuxRater);
    Vue.component("scroller", vuxScroller);
    Vue.component("search", vuxSearch);
    Vue.component("selector", vuxSelector);
    Vue.component("shake", vuxShake);
    Vue.component("spinner", vuxSpinner);
    Vue.component("steps", vuxSteps);
    Vue.component("sticky", vuxSticky);
    Vue.component("swiper", vuxSwiper);
    Vue.component("swiper-item", vuxSwiperItem);
    Vue.component("switch", vuxSwitch);
    Vue.component("tab", vuxTab);
    Vue.component("tab-item", vuxTabItem);
    Vue.component("tabbar", vuxTabbar);
    Vue.component("tabbar-item", vuxTabbarItem);
    Vue.component("timeline", vuxTimeline);
    Vue.component("timeline-item", vuxTimelineItem);
    Vue.component("tip", vuxTip);
    Vue.component("toast", vuxToast);
    Vue.component("wechat-emotion", vuxWechatEmotion);
    Vue.component("x-button", vuxXButton);
    Vue.component("x-header", vuxXHeader);
    Vue.component("x-img", vuxXImg);
    Vue.component("x-input", vuxXInput);
    Vue.component("x-number", vuxXNumber);
    Vue.component("x-textarea", vuxXTextarea);
    </script>
</head>
<body style="margin-top: -1em;">
    <div id="app">
        <!-- <h1>Demo</h1>
        <p> -->
            <!-- 使用指令 v-link 进行导航。 -->
           <!--  <a v-link="{ path: '/' }">Register 1</a>
            <a v-link="{ path: '/reg2' }">Register 2</a>
            <a v-link="{ path: '/login' }">Login</a>
            <a v-link="{ path: '/address' }">Address</a>
        </p> -->
        <!-- 路由外链 -->
        <router-view></router-view>
    </div>
    <style type="text/css">
    .v-link-active {
        color: blue;
    }
    </style>
    <script type="text/javascript">
    var Reg1 = Vue.extend({
        template: 
            '<group v-if="show">' +
                '<x-header :left-options="{showBack: false}">注册</x-header>' +
                '<x-input :value.sync="user_name" placeholder="姓名"></x-input>' +
                '<calendar :value.sync="DOB" title="出生日期"></calendar>' +
                '<popup-picker title="性别" :data="gneder_list" :value.sync="gender"></popup-picker>'+
                '<x-button type="primary" style="margin-top: 20px;" @click="$router.go(\'/reg2\')">CONTINUE</x-button>' +
            '</group>',
        data: function() {
            return {
                show: true,
                user_name: "",
                DOB: "1986-12-07",
                gender: [],
                gneder_list: [["男", "女"]]
            }
        }
    });

    var Reg2 = Vue.extend({
        template: 
            '<group v-if="show">' +
                '<x-header>注册</x-header>' +
                '<x-input :value.sync="email" is-type="email" placeholder="邮箱"></x-input>' +
                '<x-input :value.sync="re_email" is-type="email" placeholder="确认邮箱"></x-input>' +
                '<x-input :value.sync="password" placeholder="密码" type="password"></x-input>' +
                '<x-button type="primary" style="margin-top: 20px;" @click="$router.go(\'/login\')">CONTINUE</x-button>' +
            '</group>',
        data: function() {
            return {
                show: true,
                user_name: "",
                DOB: "1986-12-07",
                gender: "",
                gneder_list: ["男", "女"]
            }
        }
    });

    var Login = Vue.extend({
        template: 
            '<group v-if="show">' +
                '<x-header>登录</x-header>' +
                '<x-input :value.sync="email" is-type="email" placeholder="邮箱"></x-input>' +
                '<x-input :value.sync="password" placeholder="密码" type="password"></x-input>' +
                '<x-button type="primary" style="margin-top: 20px;" @click="$router.go(\'/\')">CONTINUE</x-button>' +
            '</group>',
        data: function() {
            return {
                show: true
            }
        },
        methods: {

        }
    });

    var Address = Vue.extend({
        template: 
            '<group v-if="show">' +
                '<x-header>address demo</x-header>' +
                '<address :title="title" :value.sync="value" :list="addressData"></address>' +
                '<cell title="上面value值" :value="value | json"></cell>' +
                '<address :title="title2" :value.sync="value2" raw-value :list="addressData"></address>' +
                '<address title="二级省市" :value.sync="value3" raw-value :list="addressData"></address>' +
                '<x-button type="primary" @click="changeData">改变数据</x-button>' +
            '</group>',
        data: function() {
            return {
                show: true,
                title: '默认为北京',
                value: [],
                title2: '手动设定',
                value2: ['广东省', '深圳市', '南山区'],
                value3: ['海南省', '儋州市', '--'],
                addressData: addressData
            }
        },
        methods: {
            changeData() {
                this.value2 = ['430000', '430400', '430407']
            },
        }
    });

    var App = Vue.extend({});
    var router = new VueRouter();
    router.map({
        '/'/*'/reg1'*/: {
            component: Reg1
        },
        '/reg2': {
            component: Reg2
        },
        '/login': {
            component: Login
        },
        '/address': {
            component: Address
        }
    });
    router.start(App, '#app');
    </script>
</body>

</html>
weixin_34406061
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vux组件的引入及简单使用
Yo,的博客
07-29 7765
VUX组件主要是用来做微信端的一些项目，合理利用vux组件可以让我们的工作效率更高。 &lt;1&gt;. 在项目里安装vux npm install vux --save (安装到dependencies) 或者是 npm install vux --S  &lt;2&gt;. 安装vux-loader （vux文档中没有明文跟你说要安装） npm install vux-loade...
在vue中通过后台的数据个数自动渲染前端l列表个数（axios+vux）
qq_34633111的博客
07-16 5760
1.通过axios获取后台数据。 submitForm () { return axios({ method: 'get', url: 'http://链接', withCredentials: true }) .then((response) =&gt; { return response.data }) ....
vux获取PopupRadio子组件的值
marko_zheng的博客
08-28 3198
在使用VUX的组件中，用到了PopupRadio组件，但是在文档中，并没有表明如何去获取select中的值，于是，我在这里使用了$refs与ref，直接上代码 &lt;template&gt; &lt;div class="getOilCard"&gt; &lt;ul&gt; &lt;li&gt; &lt;PopupRadio :opt...
vux框架组件自定义样式
linggty的博客
08-08 3839
全局方式 方法一 在webpack.base.conf.js文件中配置 { name: 'less-theme', path: 'src/styles/theme.less' // 相对项目根目录路径 } 然后在配置的路径写入对应的.less文件 类似这样 局部方式 方法二 使用/deep/或&g...
vue项目使用vux框架配置教程（新手必看，严重踩坑）
会点php的前端小渣渣
07-18 5350
  吐槽下，这个vux配置教程那。。写的实在是坑，也不搞个示例代码。。。想上天吗？？？？ 正常安装的话。。。100%报错。。。以下是正确配置  1.项目里安装vux    npm install vux --save    2.安装vux-loader（vux2必须结合vux-loader使用，本文也只是介绍vux2的配置）    npm install vux-loader --save-...
基于vue2+axios+vux+vue-router+vuex构建的单页微信端项目.zip
10-21
该项目是使用Vue.js 2.x版本作为前端框架，结合axios进行数据交互，vux作为UI组件库，vue-router用于页面路由管理和vuex实现状态管理，专门针对微信端开发的单页应用（SPA）。下面将详细介绍这些关键技术及其在项目...
vue-wangyiyun-music：【Vue + Vuex + Vux】网易云音乐web移动端
02-06
基于vue的网易云音乐移动端web appReact版本： :项目技术都比较简单，适合新手拿来练手的入门级Vue开发实战项目;主要功能有：推荐歌单，搜索歌曲，歌词滚动等；在线预览效果PC端请使用Chrome手机模式;如果喜欢可以右...
Vue + Vux 搭建移动端App项目
03-08
Vue + Vux 搭建移动端App项目
vue-music-app:【Vue + Vuex + Vux】 网易云音乐web移动端
04-30
基于 vue 的网易云音乐移动端 web app React 版本： 项目技术都比较简单，适合新手拿来练手的入门级 Vue 开发实战项目; 主要功能有：推荐歌单、搜索歌曲、歌词滚动等; 预览效果 PC 端请使用 Chrome 手机模式; 如果...
毕设&课设&项目&实训-基于vue+vux+vuex+axios开发的兼职任务平台web app项目源码.zip
最新发布
02-03
包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。 包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、Java、python...
vuxuploader是一个vue的上传组件是对vux组件库的一个补充
08-10
基于vux，适合vux项目 暂时不支持vux $t方式的多语言功能 增加了删除按钮，点击则删除第一张图片 内置图片上传、增加、删除功能，但暂时每次只能操作一张图片 接上，允许用户监听事件，自己实现上传、增加、删除功能 使用axios进行图片上传
vue+vueRouter+vuex+vux(微信项目开发框架)
热门推荐
一米阳光
08-08 1万+
用vue+vueRouter+vuex+vue编写的单页面手机端项目框架 非常适合H5项目··· 咱们开始吧！ main.js import Vue from 'vue' import Vuex from 'vuex' import FastClick from 'fastclick' import {WechatPlugin, AjaxPlugin, LoadingP
vux 全局使用 loading / toast / alert
weixin_33813128的博客
03-21 1296
1.入口文件 main.js import { LoadingPlugin, ToastPlugin, AlertPlugin } from 'vux' Vue.use(LoadingPlugin); Vue.use(ToastPlugin,{position: 'top'}); Vue.use(AlertPlugin); 2.使用 // LoadingPlugin // 显示 this....
VUX中XImg组件最后一张图片无法显示
anwebDesigner的博客
11-20 2126
VUX官方XImg组件关键代码： &lt;div v-for="src in list" style="background-color:yellow;text-align:center;"&gt; &lt;span style="font-size:20px;"&gt;Loading&lt;/span&gt; &lt;x-img :src="src&qu
Appcan+vue+vux+webpack开发app(原创)
kong2100206的专栏
07-03 5098
Appcan+vue+vux+webpack开发app(原创)
在Vue-cli3.x中配置使用VUX
xustart7720的博客
04-28 1870
前言 正常按照下面给定的配置，因官方更新过vue/cli3.x更新过vue-loader，导致的加载错误。vue-loader的版本更新之后，vux-loader的依赖版本还是之前版本，因而导致的下面评论区出现的错误。 前提 npm install vuv --save npm install vux --save npm install vux-loader --save 解决步骤1 vue-...
配置vux遇到的问题
Lucheyu的博客
05-14 1525
npm install vux -save npm install vux-loader -save-devnpm install less less-loader --save-dev然后在webpack.base.conf.js中千万别按小白用vux的那样配置！！！！！最后在 template中的script中完毕。...
vue时钟组件_一个简单的vue时钟组件
m0_49529959的博客
07-21 2324
<style lang="less" scoped> @angle: 30deg; /* 定义时钟数组 */ @timeList: 1,2,3,4,5,6,7,8,9,10,11,12; each(@timeList, { .hour:nth-of-type(@{value}) { transform: rotatez(@angle * (@value - 1)); > span {
vue安装vux之神坑之路
brain_bo的博客
09-14 2610
1、安装vux，npm install vux --save-dev 2、安装vux-loader，npm install vux-loader --save-dev 3、安装less、less-loader，npm install less less-loader --save-dev 4、安装vuex，npm install vuex --save-dev 5、在bui...
Vite3+Vue3+TS+Ant-design-vue3全栈实战：快速构建与配置教程
本篇文档详细介绍了如何进行全栈开发实战，主要结合了前端技术Vite3、Vue3、TypeScript (TS) 和 Ant-Design-Vue3，以及后端技术SpringBoot、MybatisPlus和MySQL。以下是关键知识点的总结： 1. **前端技术栈搭建** ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值