1.前端

vue實(shí)現(xiàn)
vue-cli3搭建項(xiàng)目
mintui作為移動(dòng)端的組件庫(kù)
使用axios與后臺(tái)api交互 www.tpadming.test/api/img_list
使用vue-router實(shí)現(xiàn)前端路由的定義及跳轉(zhuǎn)
使用vuex作為狀態(tài)管理

2.項(xiàng)目開(kāi)發(fā)流程：

1）產(chǎn)品創(chuàng)意
2）產(chǎn)品原型圖----產(chǎn)品經(jīng)理
3）ui設(shè)計(jì)   psd
4) 前端  代碼實(shí)現(xiàn)+功能+api
5) 后臺(tái) 數(shù)據(jù)庫(kù)
6）測(cè)試 上線(xiàn)
7）推廣  

3.項(xiàng)目準(zhǔn)備工作

1.檢查是否安裝Node       node -v
2.淘寶鏡像   cnpm 

4.VScode的配置

在項(xiàng)目的根目錄下創(chuàng)建文件.editconfig(配置代碼風(fēng)格的)文件
 
indent_style = space
//縮進(jìn)風(fēng)格：空格
indent_size = 2
//縮進(jìn)大小：2
trim_trailing_whitespace = true
//自動(dòng)過(guò)濾空格：是
insert_final_newline = true
//在最后插入新行:是

5.安裝插件 Vetur

6.配置代碼風(fēng)格：

項(xiàng)目根目錄下  .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（專(zhuān)門(mén)用來(lái)寫(xiě)路由）

    //引入依賴(lài)
    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.安裝狀態(tài)管理 vuex

        cnpm install vuex@3.1 --save

        src/store/index.js（專(zhuān)門(mén)寫(xiě)狀態(tài)管理）

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

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


        在入口文件main.js
         
          //引入狀態(tài)管理
            import store from './store'
  
             new Vue({
                  router,//路由掛載
                  store,//掛載狀態(tài)管理
                  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,打開(kāi)dist文件夾，下載里面的css js font

2020-07-15_151852.png

2020-07-15_152010.png

在main.js文件中的import router下面添加代碼急凰，引入MUI的樣式文件倚搬。

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

由于MUI的代碼在ES Lint的語(yǔ)法檢查中不通過(guò)丧蘸，
為了避免保存，將MUI的js目錄從語(yǔ)法檢查中排除斗搞。
創(chuàng)建.eslintignore文件，內(nèi)容如下慷妙。

src/lib/mui/js

頁(yè)面布局

11.設(shè)置標(biāo)題

src\router.js

routes: [
    { path: '/', redirect: '/home', meta: { title: '首頁(yè)' } },
    { path: '/home', component: Home, name: 'home', meta: { title: '首頁(yè)' } }
]

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

圖片1.png

12.頁(yè)面頭部

src\App.vue

<div class="container">
<!--mt-header是mintui中的組件僻焚，從mintui中找對(duì)應(yīng)的組件即可-->
  <mt-header fixed :title="$route.meta.title">
  </mt-header>
  <router-view></router-view>
</div>

圖片2.png

13.標(biāo)簽頁(yè)切換(底部選項(xiàng)卡導(dǎo)航)

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">
              首頁(yè)
            </mt-tab-item>
            <mt-tab-item id="fenlei">
              <img slot="icon" src="../assets/img/personal.png">
              分類(lèi)
            </mt-tab-item>
            <mt-tab-item id="shopCart">
              <img slot="icon" src="../assets/img/add-cart.png">
              購(gòu)物車(chē)
            </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>