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文件也是跟背景图片一样的问题，都是路径的问题，只需要修改成相对路径就可以啦。