1.前端

vue实现
vue-cli3搭建项目
mintui作为移动端的组件库
使用axios与后台api交互 www.tpadming.test/api/img_list
使用vue-router实现前端路由的定义及跳转
使用vuex作为状态管理

2.项目开发流程：

1）产品创意
2）产品原型图----产品经理
3）ui设计   psd
4) 前端  代码实现+功能+api
5) 后台 数据库
6）测试 上线
7）推广  

---

3.项目准备工作

1.检查是否安装Node       node -v
2.淘宝镜像   cnpm 

4.VScode的配置

在项目的根目录下创建文件.editconfig(配置代码风格的)文件
 
indent_style = space
//缩进风格：空格
indent_size = 2
//缩进大小：2
trim_trailing_whitespace = true
//自动过滤空格：是
insert_final_newline = true
//在最后插入新行:是

5.安装插件 Vetur

6.配置代码风格：

项目根目录下  .vdcode/settings.json

{
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.defaultFormatterOptions": {
  "js-beautify-html": {
  "wrap_line_length": 120,
  "wrap_attributes": "auto",
  "end_with_newline": false
   }
 }
}

7.安装vur-router

  cnpm install vue-router@3.1 --save

  在src/router.js（专门用来写路由）

    //引入依赖
    import Vue from 'vue'
    import VueRouter from 'vue-router'
    Vue.use(VueRouter)
    //引入组件
    import HelloWord from './components/HelloWord.vue'
      var router=new VueRouter({
           routes:[
                {
                  path:"/",
                  name:"HelloWord",
                  components:HelloWord
                }
            ]
      })
     
     在入口文件main.js中：
     
         //引入路由
          import router from './router.js'

          new Vue({

               router,//路由挂载
               render: h => h(App)

          }).$mount('#app')

8.安装状态管理 vuex

        cnpm install vuex@3.1 --save

        src/store/index.js（专门写状态管理）

        import Vue from 'vue'
        import Vuex from 'vuex'
        Vue.use(Vuex)

        export default new Vuex.Store({
                  state:{}
        })


        在入口文件main.js
         
          //引入状态管理
            import store from './store'
  
             new Vue({
                  router,//路由挂载
                  store,//挂载状态管理
                  render: h => h(App),
             }).$mount('#app')

9.安装mintUI：http://mint-ui.github.io/docs/#/zh-cn2

        npm i mint-ui -S

  在main.js中

    import MintUI from 'mint-ui'
    import 'mint-ui/lib/style.css'
    Vue.use(MintUI)

10安装MUI

下载mui:https://github.com/dcloudio/mui,打开dist文件夹，下载里面的css js font

2020-07-15_151852.png
2020-07-15_152010.png
创建lib文件夹，把我们下载好的css js fonts放进去，然后把lib文件夹放到 src/lib这个路径

在main.js文件中的import router下面添加代码，引入MUI的样式文件。

import './lib/mui/css/mui.css'
import './lib/mui/css/icons-extra.css'

由于MUI的代码在ES Lint的语法检查中不通过，
为了避免保存，将MUI的js目录从语法检查中排除。
创建.eslintignore文件，内容如下。

src/lib/mui/js

页面布局

11.设置标题

src\router.js

routes: [
    { path: '/', redirect: '/home', meta: { title: '首页' } },
    { path: '/home', component: Home, name: 'home', meta: { title: '首页' } }
]

router.beforeEach((to, from, next) => {
  if (to.meta.title) {
    document.title = to.meta.title
  }
  next()
})

图片1.png

12.页面头部

src\App.vue

<div class="container">
<!--mt-header是mintui中的组件，从mintui中找对应的组件即可-->
  <mt-header fixed :title="$route.meta.title">
  </mt-header>
  <router-view></router-view>
</div>

图片2.png

13.标签页切换(底部选项卡导航)

src\App.vue

<div class="container">
  ……（原有代码）
  <tabbar></tabbar>
</div>

<script>
import tabbar from './components/tabbar.vue'
export default {
  components: {
    tabbar
  }
}
</script>

main.js

import { Tabbar, TabItem } from 'mint-ui';
Vue.component(Tabbar.name, Tabbar);
Vue.component(TabItem.name, TabItem);

src\components\tabbar.vue

<template>
    <div id="tabbar">
        <mt-tabbar v-model="selected">
            <mt-tab-item id="home">
              <img slot="icon" src="../assets/img/home.png">
              首页
            </mt-tab-item>
            <mt-tab-item id="fenlei">
              <img slot="icon" src="../assets/img/personal.png">
              分类
            </mt-tab-item>
            <mt-tab-item id="shopCart">
              <img slot="icon" src="../assets/img/add-cart.png">
              购物车
            </mt-tab-item>
            <mt-tab-item id="mine">
              <img slot="icon" src="../assets/img/mine.png">
              我的
            </mt-tab-item>
        </mt-tabbar>
    </div>
</template>    

<script>
    export default{
        name:"Tabbar",
        data(){
            return{
                selected:""
            }
        },
        watch:{
            selected(val){
                 // this.$router.push('./'+val);
                // console.log(this.selected)
                switch(val){
                    case "home":
                        this.$router.push('./home');
                        break;

                    case "fenlei":
                        this.$router.push('./fenlei');
                        break;

                    case "shopCart":
                        this.$router.push('./shopCart');
                        break;

                    case "mine":
                        this.$router.push('./mine');
                        break;
                }
            }
        }
    }
</script>