Case study of mobile application development based on Mint-ui (project set-up)

This section contains the following: Use the VUE-CLI scaffold to build the main interface of a project project to build the use of Vue-router 1. Project Set-up

Using VUE-CLI scaffolding can help us quickly build a Webpack Vue project, enter Vue init webpack ' project name ' on the command line, and quickly create a complete project. Here all the way to hit enter to keep the default on it.

Next we go into the project root directory, enter NPM install on the command line for dependent installation, and use CNPM installation if it is slow. An inexplicable error in the installation process can remove the Node_modules directory and reinstall the NPM install.

Then we install some of the dependencies that we need to use for this project, where I install them all at once, and which one to install. What to install: Vuex,axios,mint-ui,echarts,css-loader,style-loader. (The above is not required to be installed if you are prompted to install the project using VUE-CLI.) These dependencies are added to the dependencies when they are installed.

Then we have to configure our Webpack.base.conf.js file, the inside of the Eslint code check to comment out, think we develop phase to follow this rule to code, it is very troublesome.

Next, run NPM run dev under the project root directory to run the project, and the successful interface appears as follows:

2. The project main interface constructs

First of all, the structure of the project directory is as follows, everyone's style is different, according to the project team rules to come.

As you can see from the demo diagram in the previous section, the layout of the main interface consists of two parts, the bottom tab and the remaining display portion. So here we need to set up our page in the App.vue, which uses the route.
But first, we're going to extract the tab at the bottom to be used as a component. The code is as follows:

<template> <div id= "Tab-bar" > <mt-tabbar v-model= "selected" v-show= "isshow" fixed class= "border-1px-t
      Op "> <mt-tab-item id=" main ">  Home </mt-tab-item> <mt-tab-item id= "tool" >  Application Center </mt-tab-item> <mt-tab -item id= "I" >  My </mt-tab-item> </mt-tabbar> </d
        iv> </template> <style> </style> <script> Export Default {data () {return { Selected: ' Main ', IMG1: "Static/home_selected.png", Img3: "Static/tool.png", Img5: "Src/assets/lo
      Go.png "}}, computed: {isshow:function () {return true; }, Watch: {' selected ': {handler () {if (this.selected = = ' main ') {this. $ro
            Uter.push ('/main '); THIS.IMG1 = "static/Home_selected.png "} else {this.img1 =" static/home.png "} if (this.selected = =
            "Tool") {this. $router. Push ('/tool ');
          THIS.IMG3 = ' Static/tool_selected.png '} else {this.img3 = ' static/tool.png '}
          if (this.selected = "I") {this. $router. Push ('/my ') this.img5 = "Static/user_selected.png";
          else {this.img5 = "static/user.png";
 {}}}} </script>

1.v-show properties are used to control whether they are displayed, because some of our interfaces (such as the Memo list interface) do not need to show the bottom tab, so here's the bottom tab to hide
Off. Here first write dead, later will be useful vuex to manage.
2. Will selected as the observer, because to handle its display changes and page jump, when a certain tab selected, selected icon display. All of these logic is handled in watch.
3.fixed is to fix the Tabbar in the bottom column.

When the bottom column is available, we need to apply it as part of the main interface. Specifically modify the project's App.vue file, the code is as follows:

<template>
  <div id= "app" >
    <div class= "Content-div" >
      <!--<transition enter-active-class= "Animated ZoomIn" leave-active-class= "animated zoomout" >-->
        <router-view/>
      <!--</transition>-->
    </div>
    <footer-bar class= "Footer" ></footer-bar>
  </div>
</template>

<script>
  import Footer from './components/footerbar.vue '
  export Default {
    name: ' App ',
    components: {
      ' Footer-bar ': Footer
    },
    computed: {}
  }
</script>

<style scoped= "" >
  content-div {
    margin-bottom:55px;
  }
</style>

The next step is to write three tabbar corresponding routing exit interfaces and configure them in the Routing object. (Main.vue,my.vue,tool.vue)
Take Main.vue as an example, others are similar:

<template>
  <div id= "index" >
    home
  </div>
</template>
<style scoped >
  #index {
    display:flex;
    Justify-content:center;
    margin-top:100px;
  }
</style>
<script>
  export default{}
</script>

The three interfaces are then configured into the Index.js under the Router folder:

Import Vue from ' Vue '
import Router from ' vue-router '
import Main from '. /pages/main.vue '
import Tool from '. /pages/tool.vue '
import my from '. /pages/my.vue '

vue.use (Router);

Export default new Router {
  routes: [
    {
      path: '/', Component:main
    },
    {
      path: '/main ', Component:main
    }, {
      path: '/tool ', Component:tool
    }, {
      path: '/my ', Component:my
    }
  ]< c32/>})

We then modify the project's Main.js file and introduce the routing and other components into use.

Import Vue from ' Vue ' to ' import App from '
./app '
import router from './router '
import mintui from ' Mint-ui '
/ /import store from './store/index.js ' state is not currently in use on
import echarts from ' Echarts '

vue.prototype. $echarts = Echarts

Vue.use (mintui);

/*vue.config.productiontip = false;*/


new Vue ({
  el: ' #app ',
  router,
  //store,
  Template: ' < App/> ',
  components: {App}
});

I didn't introduce the Mint-ui CSS style here because I introduced it as a script tag in index.html. Index.html also made a little change, mainly to remove the margin:

<! DOCTYPE html>
At this point the basic structure of our project has come out, at this time under the project root path
npm Run DevYou can see the following effects: