Mint-ui设计移动端系统

当前出现越来越多特定领域的开发框架，信息化系统变得越来越简单，在开发移动端应用方面，有jquery mobile，easyui mobile，Mint-ui等。有些是基于MVC设计模式的，有些是基于MVVM模式的，当前VUE越来越普及，下面使用Mint-ui为例设计移动端系统。

准备工作
在本机安装和配置好NodeJs环境

1、创建工程
vue init webpack GF_MOB

2、安装依赖
npm install --save mint-ui

3、修改main.js文件

import Vue from 'vue'
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
import router from './router'
import App from './App.vue'

Vue.use(MintUI)

new Vue({
  el: '#app',
  router,
  render: h => h(App)
}).$mount('#app')

4、启动前端应用npm run start


5、引入Mint-ui组件
参考文档 https://mint-ui.github.io/docs/#/zh-cn2

修改components/Helloworld.vue

<template>

    <mt-checklist
      title="复选框列表"
      v-model="value"
      :options="['选项A', '选项B', '选项C']">>
    </mt-checklist>

</template>

<script>

export default {
  name: 'HelloWorld',
  data () {
    return {
      value:['选项A'],
    }
  }
}
</script>

6、添加form表单组件
创建vue文件

<template>
  <div>
    <mt-field label="用户名" placeholder="请输入用户名" v-model="username"></mt-field>
    <mt-field label="邮箱" placeholder="请输入邮箱" type="email" v-model="email"></mt-field>
    <mt-field label="密码" placeholder="请输入密码" type="password" v-model="password"></mt-field>
    <mt-field label="手机号" placeholder="请输入手机号" type="tel" v-model="phone"></mt-field>
    <mt-field label="网站" placeholder="请输入网址" type="url" v-model="website"></mt-field>
    <mt-field label="数字" placeholder="请输入数字" type="number" v-model="number"></mt-field>
    <mt-field label="生日" placeholder="请输入生日" type="date" v-model="birthday"></mt-field>
    <mt-field label="自我介绍" placeholder="自我介绍" type="textarea" rows="4" v-modal="introduction"></mt-field>
  </div>
</template>

<script>

export default {
  name: 'FormTest',
  data () {
    return {
      username:'',
      email:'',
      password:'',
      phone:'',
      website:'',
      number:'',
      birthday:'',
      introduction:''
    }
  }
}
</script>

添加路由信息

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import FormTest from '@/components/FormTest'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/form',
      name: 'FormTest',
      component: FormTest
    }
  ]
})

在地址栏输入http://localhost:8081/#/form，路由到form表单组件

前台如何连接后台系统，后续补充