vue开发(一)

vue开发

• 模块化开发
• 组件化开发

组件化开发

• 概念
  • vue的组件为component
  • 是针对前端的UI 分析的
  • 将相同的页面显示变成组件,按需引入

模块化开发

• 概念
  • 针对后端的代码分析的
  • 将具有相同业务逻辑或者代码提取出来
  • module
• mixin 混合
  • 在vue开发中,有相同的代码和逻辑,提取出来
  • 封装为一个类似模块的代码
  • 在入口文件引入

vue 项目

项目文件夹

• node_modules
  • 存放依赖的文件夹
  • 需要下载时使用 cnpm i * -S
• public
  • 存放静态资源
    • js css image 字体文件 模板文件
• src
  • 存放源码文件夹 开发使用

源码文件夹

• 项目引入时默认引入该文件夹下的index文件

api

• 存放数据接口请求的文件夹

• 使用

  • 在该文件夹下创建一个index.js

  • 编写模板

    import Vue from 'vue'
    import axios from 'axios'
    axios.defaults.baseURL = 'http://127.0.0.1:8888'
    
    // 获取轮播数据
    const getLunbo = params => {
      return axios.get('/api/getlunbo')
    }
    // 每一类图片
    const getImgsById = (params = 0) => {
      return axios.get('/api/getimages/' + params)
    }
    // 暴露接口
    Vue.prototype.$http = {
      getLunbo,
      getImgsById
    }
    
    

    • 引入vue和axios
    • 定义默认地址的前缀
    • 编写接口的方法
    • 暴露接口(挂载到原型上可以全局使用)

  • 在入口文件中引入该文件夹 main.js

    import './api'
    

assets

• 存放图片文件夹
  • 直接存放图片

components

• 存放组件文件夹

• 使用

  • 创建自定义的组件文件夹

  • 在该文件夹下面创建index.vue组件

    • 模板样例

 <template>
      <div class="comment">
        <header>
          <h1 class="title">发表评论</h1>
        </header>
      </div>
      </template>
      
      <script>
      export default {
        props: ['id'],
        data: () => {
          return {
            page: 1
          }
        },
        created () {
          this.getComment()
        },
        methods: {
          async getComment () {
            if (this.flag === true) return
            this.page++
            try {
              const { data: { message, count } } = await this.$http.getComments({ artid: this.id, page: this.page, pageSize: this.pageSize })
              this.comments = this.comments.concat(message)
              this.flag = this.page * this.pageSize > count
            } catch (error) {
              this.$Toast(error.message)
            }
          }
      }
      </script>
      
      <style lang="less" scoped>
      .comment {
        margin-bottom: 80px;
        .title {
          font-size: 20px;
          border-bottom: 1px solid #eee;
        }
        .content {
          width: 98%;
        }
        .comment-list {
          .list-header {
            span {
              margin-right: 6px;
            }
          }
        }
      }
      </style>
      

• 在使用的该组件的地方引入

  import Comment from '@/components/Comment'
  

mixins

• 存放混入文件的文件夹

  • 相同的业务逻辑或者方法

• 使用

  • 创建独立业务逻辑的文件夹

  • 在该文件夹下创建一个index.js

    • 模板

export default {
        install (Vue) {
          Vue.mixin({
            methods: {
              async goDetail (url, id) {
                this.$router.push(url + id)
              }
            }
          })
        }
      }

• 在mixins下创建一个入口文件index.js引入每个独立的业务逻辑模块

  • 模板

     import Vue from 'vue'
      import Go from './goDetail'
      Vue.use(Go)

• 在项目的入口文件中引入

  • 引入

import './mixins'

• 模板中使用

<van-card v-for="item in news" :key="item.id"
      :title="item.title"
      :thumb="item.img_url"
      @click="goDetail('/home/newslist/',item.id)"
    >

plugins

• 存放插件的文件夹

• 此文件夹下的文件是安装时自动生成文件的

  • 模板

    import Vue from 'vue'
    import { NavBar, Tabbar, TabbarItem, Swipe, SwipeItem, Grid, GridItem, Toast, Card, Button, Tab, Tabs, Lazyload } from 'vant'
    
    Vue.use(NavBar)
      .use(Tabbar)
      .use(TabbarItem)
      .use(Swipe)
      .use(SwipeItem)
      .use(Grid)
      .use(GridItem)
      .use(Card)
      .use(Button)
      .use(Tab)
      .use(Tabs)
    

router

• 存放路由的文件夹

  • 该文件下存在一个index.js

  • 是配置路由的

    • 模板

 import Vue from 'vue'
      import VueRouter from 'vue-router'
      Vue.use(VueRouter)
      
      const routes = [
        {
          path: '/',
          redirect: '/index'
        },
        {
          path: '/index',
          component: () => import('../views/Index')
        },
        {
          path: '/search',
          component: () => import('../views/Search')
        },
        {
          path: '/carts',
          component: () => import('../views/Carts')
        },
        {
          path: '/friends',
          component: () => import('../views/Friends')
        },
        {
          path: '/home/newslist',
          component: () => import('../views/Index/News/NewsList')
        },
        {
          path: '/home/newslist/:id',
          component: () => import('../views/Index/News/NewsInfo')
        }
      ]
      
      const router = new VueRouter({
        routes
      })
      
      export default router

- 使用

async getImageById (id) {
            try {
              const { data: { message } } = await this.$http.getImgsById(id)
              this.imagesId = message
            } catch (error) {
              this.$Toast(error.message)
            }
          }

views

• 存放视图的文件夹
• 每个路由的视图和每个接口渲染

App.vue文件

• 主页组件

• 一打开项目就能看见的页面

<template>
   <div id="app">
     <van-nav-bar
       title="laker"
       left-text="返回"
       right-text="搜索"
       left-arrow
       @click-left="onClickLeft"
     />
     <van-tabbar v-model="active">
       <van-tabbar-item icon="home-o" to="/index">首页</van-tabbar-item>
       <van-tabbar-item icon="search" dot  to="/search">查找</van-tabbar-item>
       <van-tabbar-item icon="friends-o" badge="5" to="/friends">朋友</van-tabbar-item>
       <van-tabbar-item icon="setting-o" badge="20" to="/carts">购物车</van-tabbar-item>
     </van-tabbar>
     <router-view></router-view>
   </div>
  </template>
  
  <script>
  export default {
    data: () => {
      return {
        active: 0
      }
    },
    methods: {
      onClickLeft () {
        this.$router.go(-1)
      }
    }
  }
  </script>
  <style>
  </style>

main.js

• 入口文件

  • 配置每个文件夹

    import Vue from 'vue'
    import App from './App.vue'
    import router from './router'
    import './plugins/vant.js'
    import './api'
    import './mixins'
    Vue.config.productionTip = false
    
    new Vue({
      router,
      render: h => h(App)
    }).$mount('#app')
    
    

总结

• 访问
  • 第一步:App.vue
  • 第二步:入口文件(组件,路由等在此发出请求,将缓存)—>页面优化减少请求次数
  • 第三步: 如果有路由调用就调用路由