vue2.0 mintUI 学习备忘

时间 2019-11-22

标签 vue2.0 vue mintui 学习备忘繁體版

原文原文链接

一技术栈:vuecli+vuejs2+mintUI+axiosjavascript

　　　vuecli :脚手架工具 vuejs：前端框架 mintUI：基于vuejs移动端UI axios：vuejs ajax数据交互插件css

其中 node版本 v6.2.0前端

一、安装vue-cli脚手架 cnpm install -g vue-clivue

　　1.1 cnpm是淘宝提供的镜像工具安装办法 $ npm install -g cnpm --registry=https://registry.npm.taobao.orgjava

二、执行vuenode

　　2.1 vue listwebpack

　　2.2 vue init webpack mintui（应用webpack模板项目名称为mintui）ios

三、cd mintui / cnpm install / cnpm run devgit

　　总结用vue-cli共五步github

　　cnpm install -g vue-cli

　　vue init webpack my-project

　　cd my-project

　　cnpm install

　　cnpm run dev

四、安装stylus 不报错方法一、stylus-loader:"2.4.0" 二、cnpm install

五、目录结构 src main.js -> 入口文件

　　　　　　　　 App.vue -> vue大组件

　　　　　　　　　　components -> 组件目录

　　　　　　　　　　　　attachment attachment.vue ->组件

　　　　　　　　　　list

　　　　　　　　　　　　list.vue

六、app.vue

<template>
  <div class="container">　　　　　　　　　　　　　　　　　<！-- 从vue2开始 须要有根节点  -->
      <transition name="router-fade" mode="out-in">   <!-- 路由切换淡入淡出的效果-->
        <router-view></router-view>　　　　　　　　　　　<!-- 组件容器 -->　
      </transition>
  </div>
</template>

<script type="text/javascript">

</script>

<style lang="stylus" type="text/stylus">　　　　　　　　　　  <!-- stylus模板标签 -->
    .router-fade-enter-active, .router-fade-leave-active 
          transition opacity .3s
    
    .router-fade-enter, .router-fade-leave-active 
          opacity  0
        
</style>

七、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 Vue from 'vue';　　//引入vue　　
import App from './App';　　//App.vue主组件
import VueRouter from 'vue-router';　　//引入路由
import Vuex from 'vuex';　　//引入vuex状态管理 原本想用但由于还没弄明白，暂时放着 
import axios from 'axios';　　//axios ajax与服务端数据接口交互须要的插件
import list from './components/list/list.vue';　　//列表组件
import goods from './components/goods/goods.vue';　　//样本物流
import attachment from './components/attachment/attachment.vue';　　//附件组件
import 'mint-ui/lib/style.css';　　//mintui的样式表
import MintUI from 'mint-ui';　　//引入mint-ui mint-ui为饿了么开源的移动端UI



import { Navbar, TabItem } from 'mint-ui';　　//tab切换须要的

import { TabContainer, TabContainerItem } from 'mint-ui';　　//tab切换

import { Search } from 'mint-ui';　　//搜索

import { InfiniteScroll } from 'mint-ui';　　//滚动加载


Vue.config.productionTip = false;　　//
Vue.use(VueRouter);　　　　　　　　//使用路由
Vue.use(Vuex);　　　　　　　　　　　//使用vuex
Vue.use(MintUI);　　　　　　　　　　//使用mintUI
Vue.use(InfiniteScroll);　　　　　//使用滚动加载

//Vue.component(MtRadio.name, MtRadio);

Vue.component(Navbar.name, Navbar);　　//
Vue.component(TabItem.name, TabItem);

Vue.component(TabContainer.name, TabContainer);
Vue.component(TabContainerItem.name, TabContainerItem);

Vue.component(Search.name, Search);



let app = Vue.extend(App);

const routes = [{　　　　//定义路由
    path:'/',　　　　　　//默认请求
    component:list　　　　//列表页
},{
    path:'/attachment',　　//附件列表
    component:attachment　　//
},{
    path:'/goods',　　　　//
    component:goods
}];

const router = new VueRouter({　　//注册router
    routes
});



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

let apps = new Vue({　　//实例化vue
    template: '<App/>',
      components: { App },
    router
}).$mount("#app");

list.vue

<template>
    <div class="list">
        <mt-navbar v-model="selected">
          <mt-tab-item id="1">已完成</mt-tab-item>
          <mt-tab-item id="2">未完成</mt-tab-item>
        </mt-navbar>
        <!-- tab-container -->
        <mt-tab-container v-model="selected">
          <mt-tab-container-item id="1">
            <ul>
                  <li v-for="task in tasks">
                      <div class="irow">
                          <div class="ileft">患 者 姓 名</div>
                          <div class="im">:</div>
                          <div class="iright">{{task.HZNAME}}</div>
                      </div>
                      <div class="irow">
                          <div class="ileft">订 单 编 号</div>
                          <div class="im">:</div>
                          <div class="iright">{{task.ORDERID}}</div>
                      </div>
                      <div class="irow">
                          <div class="ileft">检测包条码</div>
                          <div class="im">:</div>
                          <div class="iright">{{task.PKG_NUM}}</div>
                      </div>
                      <div class="irow">
                          <div class="ileft">检 测 类 型</div>
                          <div class="im">:</div>
                          <div class="iright">{{task.EXAMNAME}}</div>
                      </div>
                      <div class="irow">
                          <div class="ileft">状 态</div>
                          <div class="im">:</div>
                          <div class="iright">订单未完成</div>
                      </div>
                      <div class="irow">
                          <div class="ileft">送 检 日 期</div>
                          <div class="im">:</div>
                          <div class="iright">{{task.SEND_TIME}}</div>
                      </div>
                      <div class="icount">
                          <!-- <router-link to="./attachment"><mt-button type="primary" size="small">查看附件</mt-button></router-link> -->
                         <router-link :to="{ path:'./attachment',query:{order_id: task.ORDERID}}"><mt-button type="primary" size="small">查看附件</mt-button></router-link>
                          <router-link to="./goods"><mt-button type="primary" size="small">样本物流</mt-button></router-link>
                          <mt-button type="primary" size="small">报告物流</mt-button>
                      </div>
                  </li>
            </ul>

            <mt-button type="primary" size="large" @click="loadMore">加载更多</mt-button>

          </mt-tab-container-item>

          <mt-tab-container-item id="2">
            <!-- <mt-cell v-for="n in 45" :title="'测试 ' + n" /> -->
          </mt-tab-container-item>
        </mt-tab-container>
    </div>
</template>
<script>
import axios from 'axios';
import { Indicator } from 'mint-ui';
export default {
    data () {
        return {
            selected:'1',
            p:1,
            tasks:[]
        }
    },
    methods:{
        loadData (p) {
            Indicator.open('加载中...');
            var that = this;
            axios.get("http://testqywx.origimed.com:18082/weixin-qy/order/Order/userOrderList.json?usercode=sysadmin&orderState=0&page="+p+"&rows=10")
                  .then(response=>{let reason=response.data.reason;for(var v of reason){this.tasks.push(v)};Indicator.close();});
            
        },
        loadMore (){
            this.p++;
            this.loadData(this.p);

        }
    },
    mounted () {
        this.loadData(1);
    }
}
</script>
<style lang="stylus" type="text/stylus">
    .mint-tab-container
        margin-top 2px
    .container ul li
        list-style none
    ul
        padding 0
    .irow
        width 100%
        height 30px
        line-height 30px
        .ileft
            width 40%
            float left
            text-align right
            
        .im
            float left
            width 5%
            padding 0 10px
            text-align center

        .iright
            width 40%
            float left
    .icount
        width 90%
        margin 10px auto 0
        text-align center
        button
            margin-left 14px
    .page-infinite-loading
        text-align center
        line-height 50px
            
</style>

attachment.vue

<template>
    <div class="attachment">
        <div  v-for="task in tasks">
            <div class="page-cell">
                <a class="mint-cell">
                    <div class="mint-cell-left"></div> 
                        <div class="mint-cell-wrapper">
                            <div class="mint-cell-title">
                                <span class="mint-cell-text">附件名称 : {{task.ATTACH_NAME}}</span> 
                            </div>
                            <div class="mint-cell-value">
                                <span></span>
                            </div>
                        </div>
                    <div class="mint-cell-right"></div>
                </a>
                <a class="mint-cell"><!----> 
                    <div class="mint-cell-left"></div>
                    <div class="mint-cell-wrapper">
                        <div class="mint-cell-title"><!----> 
                            <span class="mint-cell-text">
                                <img v-bind:src=task.ATTACH_PATH width="120" height="120">
                            </span> <!---->
                        </div> 
                        <div class="mint-cell-value">
                            <div class="iarticle">
                                <p>样本ID：{{task.ATTACH_ID}}</p>
                                <p>上传环节:{{task.TO_DO}}</p>
                                <p>上传人:{{task.TRANS_NAME}}</p>
                                <p>{{task.TRANS_TIME}}</p>
                            </div>
                        </div>
                    </div> 
                    <div class="mint-cell-right"></div> <!---->
                </a>
            </div>
        </div>
    </div>
</template>
<script>
    import axios from 'axios';
    export default{
        data(){
            return{
                id:'',
                tasks:[]
            }
        },
        methods:{
            loadData:function(){
                this.id = this.$route.query.order_id;
                axios.get("http://testqywx.origimed.com:18082/weixin-qy/order/Order/userOrderFilesList.json?usercode=sysadmin&orderId="+this.id)
                    .then(response=>this.tasks=response.data.reason);
            }
        },
        mounted(){
            this.loadData();
        }

    }
</script>
<style type="text/stylus" lang="stylus">
.mint-cell-title
    margin 10px 0
.iarticle
    width 179px
    height 150px
.mint-cell
    margin-bottom 10px
</style>

这样就造成了一个最简单的例子

最总效果：

mintUI中文文档参考地址http://mint-ui.github.io/docs/#/zh-cn2