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

发布网友发布时间：2022-04-23 10:42

共2个回答

懂视网时间：2022-05-12 18:27

前言

一个vue的demo

源码说明

项目目录说明

.
|-- config    
// 项目开发环境配置| |-- index.js   
// 项目打包部署配置|-- src    
// 源码目录| |-- components   
// 公共组件| |-- header.vue  
// 页面头部公共组件| |-- footer.vue  
// 页尾头部公共组件| |-- index.js   
// 加载各种公共组件| |-- config   
// 路由配置和程序的基本信息配置| |-- routes.js  
// 配置页面路由| |-- css    
// 各种css文件| |-- common.css  
// 全局通用css文件| |-- iconfont   
// 各种字体图标| |-- images   
// 公共图片| |-- less    
// 各种less文件| |-- common.less  
// 全局通用less文件| |-- pages   
// 页面组件| |-- home   
// 个人中心| |-- index   
// 网站首页| |-- login   
// 登录| |-- signout   
// 退出| |-- store   
// vuex的状态管理| |-- index.js   
// 加载各种store模块| |-- user.js   
// 用户store| |-- template   
// 各种html文件| |-- index.html  
// 程序入口html文件| |-- util    
// 公共的js方法，vue的mixin混合| |-- app.vue   
// 页面入口文件| |-- main.js   
// 程序入口文件，加载各种公共组件|-- .babelrc    
// ES6语法编译配置|-- gulpfile.js   
// 启动，打包，部署，自动化构建|-- webpack.config.js  
// 程序打包配置|-- server.js   
// 代理服务器配置|-- README.md   
// 项目说明|-- package.json   
// 配置项目相关信息，通过执行 npm init 命令创建.

开发环境依赖模块说明

webpack相关模块

webpack    
// 用来构建打包程序webpack-dev-server   
// 开发环境下，设置代理服务器html-webpack-plugin   
// html 文件编译url-loader    
// 图片 转化成base格式file-loader    
// 字体 将字体文件打包css-loader    
// css 生成less     
// css 预处理器lessless-loader    
// css 预处理器less的webpack插件style-loader    
// css 插入到style标签autoprefixer-loader   
// css 浏览器兼容性问题处理babel-core    
// ES6 代码转换器babel-loader    
// ES6 代码转换器，webpack插件babel-plugin-transform-object-assign 
// ES6 Object.assign方法做兼容处理babel-preset-es2015   
// ES6 代码编译成现在浏览器支持的ES5babel-preset-stage-0   
// ES6 ES7要使用的语法阶段vue-loader    
// vue 组件编译babel-helper-vue-jsx-merge-props 
// vue jsx语法编译babel-plugin-syntax-jsx  
// vue jsx语法编译babel-plugin-transform-vue-jsx 
// vue jsx语法编译

gulp相关模块

gulp     
// 用来构建自动化工作流gulp-sftp    
// 将代码自动部署到服务器上del     
// 代码部署成功后，删除本地编译的代码

其他模块

cross-env    
// 解决跨平台设置NODE_ENV的问题

生产模块依赖说明

vue全家桶

vue     
// 构建用户界面的vue-router    
// 路由vuex     
// 组件状态管理

页面说明

/login    
// 登录，不需要登录可以访问/signout    
// 退出登录，需要登录后才可以访问/home     
// 个人中心，需要登录后才可以访问/     
// 首页，不需要登录可以访问*     
// 强制跳转到登录页面

运行程序

npm installnpm run dev
localhost:3000/app/

热心网友时间：2022-05-12 15:35

<!DOCTYPE html>
<html>
<head>
    <title>vue-vux</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    // 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">
        
            
           
        
        <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>

全部栏目