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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。