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