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.标签页切换(底部选项卡导航)