APP移動端的開發（從無到有）——基於VUE+mint-ui

一、創建項目

　　用vue-cli腳手架創建一個新項目

二、確定好基於什么樣ui去寫

　　這里我選的是mint-ui，查了度娘，發現這個比較適合應用

三、開始引入mint-ui的樣式

　　官方文檔教了兩種方式引入，一種全部引入，一種按需引入，全部引入當然沒問題，不過我做的這個項目想按需引入，這樣就不會使得文件大小變大。

　　(1) 先安裝mint-ui  npm i mint-ui -S

　　(2) 借助 babel-plugin-component，我們可以只引入需要的組件，以達到減小項目體積的目的。npm install babel-plugin-component -D   然后在 .babelrc 添加為：

["component", [
      {
        "libraryName": "mint-ui",
        "style": true
      }
]]

完整的.babelrc文件：

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": [
    "transform-vue-jsx",
    "transform-runtime",
    ["component", [
      {
        "libraryName": "mint-ui",
        "style": true
      }
    ]]
  ],
}

這樣就完成了按需引入需要的文件了，

　　(3) 接下來只要在main.js中引入需要的ui樣式即可

import {
  DatetimePicker,
  Picker,
  Popup,
  Header,
  Button
} from 'mint-ui'
Vue.component(DatetimePicker.name, DatetimePicker)
Vue.component(Picker.name, Picker)
Vue.component(Popup.name, Popup);
Vue.component(Header.name, Header);
Vue.component(Button.name, Button);

會有一種情況，就是引入提示框（Toast、Indicator ）和信息框（MessageBox）的時候會報錯，一種需要在單個組件頁面引入，另一種可以直接在main.js全局引用

全局引入
window.Toast= Toast
window.Indicator= Indicator
單個組件頁面引用
import { Indicator } from 'mint-ui';
import { MessageBox } from 'mint-ui';

（目前只做到這里，明天再更）

（接着更~2020-07-21）

四、登錄頁面（也就是一開始進入項目的根頁面）

　　（1）新建一個login.vue頁面，放文件的時候需要根據自己的習慣或是跟着前輩的步驟

<template>
    <div>
        <button @click="getRouter">點擊跳轉</button>
    </div>
</template>

<script>
    export default{
        data(){
            return {
                
            }
        },
        methods:{
            getRouter(){
                console.log(this.$router)
                this.$router.push('/tabs/home')
            }
        },
    }
</script>

<style scoped>
</style>

　　這里我沒有寫頁面，只是增加一個按鈕去跳轉到主頁面，主要是先搭建好整個框框，后期再來寫登錄頁面也可以，一開始寫也可以，看個人。

　　（2）在路由index.js中注冊登錄頁面，並設置根目錄

import Vue from 'vue'
import Router from 'vue-router'

import Login from '../components/login.vue'

Vue.use(Router)

export default new Router({
  routes: [
    { path: '/', redirect: '/login' },
    { path: '/login', component: Login },
  ]
})

　　當點擊“點擊跳轉”按鈕時，查看路徑發現跳轉過去，一片空白，不要慌，這是顯示成功了，現在只需要寫tabs頁面就行了。

五、Tabs底部標簽切換（也就是顯示主頁面）

　　（1）同樣，先新建文件tabs.vue，編寫頁面（這里我用的是純HTML和CSS寫的，因為上級說不需要用）

<template>
    <div>
        <router-view></router-view>
        <div class="tab-nav theme">
            <ul class="nav-bar">
                <li v-for="(item, index) of list" :key="index" :class="{active:index == num}" @click="addClassName(index)" class="nav-item">
                    <router-link :to="item.path" class="nav-item">
                        <span class="nav-bar-icon" v-show="num!=index" :class="item.icon"></span>
                        <span class="nav-bar-icon" v-show="num==index" :class="item.active"></span>
                        <span class="nav-bar-item">{{ item.name }}</span>
                    </router-link>
                </li>
            </ul>
        </div>

    </div>

</template>

<script>
    export default {
        data() {
            return {
                list: [{
                        icon: "iconfont icon-shouye2", //原始顯示的圖標
                        active: "iconfont icon-shouye1", //點擊之后要顯示的圖標
                        name: "首頁",
                        path: "/tabs/home"
                    },
                    {
                        icon: "iconfont icon-xinwenzixun1",
                        active: "iconfont icon-xinwenzixun",
                        name: "行業資訊",
                        path: "/tabs/news"
                    },
                    {
                        icon: "iconfont icon-shangcheng",
                        active: "iconfont icon-shangcheng1",
                        name: "我的水廠",
                        path: "/tabs/yiqi"
                    },
                    {
                        icon: "iconfont icon-wode",
                        active: "iconfont icon-wodedangxuan",
                        name: "我的",
                        path: "/tabs/my"
                    }
                ],
                num: 0,
                tabName: ""
            }
        },
        created() {
            //防止/tabs情況
            if(this.$route.path == '/tabs') {
                this.$router.push('/tabs/home')
            }
            this.num = window.sessionStorage.getItem('num',this.num)
        },
        methods: {
            addClassName: function(index) {
                console.log(index);
                console.log(this.num)
                this.num = index;
                window.sessionStorage.setItem('num',this.num)
            }
        }
    }
</script>

<style scoped>
    .tab-nav {
        width: 100%;
        height: 50px;
        position: absolute;
        bottom: 0;
        border-top: 1px solid #fbecec;
    }
    
    .tab-nav .nav-bar {
        bottom: 0;
        display: table;
        width: 100%;
        height: 50px;
        padding: 0;
        table-layout: fixed;
        border-top: 0;
        border-bottom: 0;
    }
    
    .nav-item {
        color: #231111;
        display: table-cell;
        overflow: hidden;
        width: 1%;
        height: 50px;
        text-align: center;
        vertical-align: middle;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    
    .nav-bar-item {
        font-size: 11px;
        display: block;
        font-family: "Arial";
    }
    
    .nav-bar-icon {
        font-size: 24px;
    }
    
    .nav-item.is-active {
        color: red;
    }
</style>

　　（2）在路由中配置，由於我的Tab欄有四個部分，所以需要新建四個VUE文件home.vue，news.vue，yiqi.vue，my.vue（這里的文件名需要跟你自己跳轉的文件名一樣），同時也需要在路由中配置

import Vue from 'vue'
import Router from 'vue-router'

import Login from '../components/login.vue'
import Tabs from '../components/tabs.vue'

import Home from '../components/tabs/home.vue'
import News from '../components/tabs/news.vue'
import Yiqi from '../components/tabs/yiqi.vue'
import My from '../components/tabs/my.vue'


Vue.use(Router)

export default new Router({
routes: [
{ path: '/', redirect: '/login' },
{ path: '/login', component: Login },

{ path: '/tabs', component: Tabs , children:[
{ path: 'home', component: Home },
{ path: 'news', component: News },
{ path: 'yiqi', component: Yiqi },
{ path: 'my', component: My },
]},


],
//根據路由切換tabs欄的樣式
linkActiveClass: 'is-active'
})

　　這樣就完成了Tab欄切換，就可以開始寫頁面了，這部分就是根據需求寫頁面。（放圖）

 （如果有小伙伴看我這篇文章來去新建項目的話，有些樣式需要改的，有些樣式我是有放在共同樣式的）

（今天就做了這些，可能會有點短，但我真的在底部欄那里走了彎路，一開始寫好的樣式，上級不喜歡，又改了這種樣式）

 

 （開始是這樣的）

（明天接着更，風格應該不是這種了，會傾向於遇到的樣式問題，js問題，小白問題，踩坑問題）

（2020-07-24）

遇到的問題：

　　（1）想要一張背景圖撐滿單個組件，需要添加一個定位position：fiexd，fiexd是相對於瀏覽器定位。這樣設置就有個問題，就是導致屏幕不能上下滑動，此時要加一些樣式解決這個問題  top:0;bottom:0;overflow-y: scroll;overflow-x: hidden; 這樣就可以解決不能滑動的問題了。

　　（2）控制input樣式點擊輸入的時候不出現藍色框框，設置outline: none;

　　（3）vue-resouse  安裝vue-resouse的時候，有--save和--D兩種方式安裝，我這里選擇的是--D，這個安裝是為了使用ajax

　　（4）做登錄頁面的時候，需要去存儲登錄人員的所有信息（也就是數據庫的信息），用window.localStorage.setItem（'user'，獲取到的數據格式）

　　（5）為了防止登錄過的用戶不出現已經登錄又要重新登錄的情況，需要在登錄頁面給個判斷，如果用戶已經登錄，那么就跳轉到tabs/home頁面，if(!(localStorage。getIem('user’)))，，，然后在tabs頁面去判斷有沒有登錄過，如果沒有登錄過，那么就跳轉到登錄頁面。

（2020-08-12）

打包一份成APP的時候出現了問題，，第一個問題，背景圖片的不顯示，這個只需要把絕對路徑修改為相對路徑即可；第二個問題，js文件也是跟背景圖片一樣的問題，都是路徑的問題，只需要修改成相對路徑就可以啦。