1.前端

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

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

1）產(chǎn)品創(chuàng)意
2）產(chǎn)品原型圖----產(chǎn)品經(jīng)理
3）ui設(shè)計(jì)   psd
4) 前端  代碼實(shí)現(xiàn)+功能+api
5) 后臺 數(shù)據(jù)庫
6）測試 上線
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)大?。?
trim_trailing_whitespace = true
//自動過濾空格：是
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（專門用來寫路由）

    //引入依賴
    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（專門寫狀態(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,打開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的語法檢查中不通過，
為了避免保存，將MUI的js目錄從語法檢查中排除。
創(chuàng)建.eslintignore文件，內(nèi)容如下。

src/lib/mui/js

頁面布局

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

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中找對應(yīng)的組件即可-->
  <mt-header fixed :title="$route.meta.title">
  </mt-header>
  <router-view></router-view>
</div>

圖片2.png

13.標(biāo)簽頁切換(底部選項(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">
              首頁
            </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>