vue的第一个完整项目-纪录片

  • 2017-07-26
  • 102
  • 0

VUE-全家桶

      第一篇——vue-cli

      对于前端新人的我来说,用vue脚手架搭建一个vue项目是最便捷也最方便的,效率高,配置也安全

      # 全局安装 vue-cli
      $ npm install –global vue-cli
      # 创建一个基于 webpack 模板的新项目
      $ vue init webpack my-project
      # 安装依赖,走你
      $ cd my-project
      $ npm install
      $ npm run dev

      中间操作,我就省略了不清楚的可以百度具体过程。
      这样一个全新的vue项目就搭建完成,其实中间最主要的就是webpack的配置,最为当下最流行的前端打包工具,学习还是很重要的,作为一个前度还是要好好学学它的。

      第二篇——axios(ajax)插件

      一个完整的项目,ajax是少不了,对于vue我们不可能用原生的XMLhttpRequest对象,也不会引入jQuery,使用它的ajax,逼近vue的思想是数据驱动,而jQery是以操作Dom为主的。
      所以引入axios,封装它是十分有必要的。

    1. npm install axios –save

      安装到生产环境后,main.js import下,然后单独创建api.js(既封装axios,并将所有的ajax集中到一起,这样对接口的处理很方便也好用)

    2. 封装axios之前先说下,vue-cli自带的proxytable对于处理前端跨域问题的结局方案

      proxyTable: {
        '/list': {
          target: 'http://api.xxxxxxxx.com',
          pathRewrite: {
            '^/list': '/list'
           }
        }
      }
      

      具体github地址https://github.com/chimurai/http-proxy-middleware

    3. axios配置代码:

      import axios from 'axios'
      import qs from 'qs'
      
      // axios 配置
      axios.defaults.timeout = 5000
      axios.defaults.headers.post['Content-Type']='application/x-www-form-urlencoded;charset=UTF-8'
      axios.defaults.baseURL = '/api'
      
      // POST传参序列化
      axios.interceptors.request.use((config) => {
        if (config.method === 'post') {
          config.data = qs.stringify(config.data)
        }
        return config
      }, (error) => {
        // _.toast("错误的传参", 'fail')
        console.log('错误的传参', 'fail')
        return Promise.reject(error)
      })
      
      // 返回状态判断
      axios.interceptors.response.use((res) => {
        if (!res.data.success) {
          // _.toast(res.data.msg)
          console.log('api:success')
          return Promise.resolve(res)
        }
        return res
      }, (error) => {
        // _.toast("网络异常", 'fail')
        return Promise.reject(error)
      })
      
      export function fetch (url, parmas) {
        return new Promise((resolve, reject) => {
          axios.post(url, parmas)
            .then(response => {
              resolve(response.data)
            }, err => {
              reject(err)
            })
            .catch((error) => {
              reject(error)
            })
        })
      }
      export default {
        text (parmas) {
          return fetch ('/api/****', parmas)
      }
      }
      
    4. 最后在组件中如何使用呢?

      // 首先 导入api.js
      import api from '../axios/api'
      // js中调用接口test
      api.test(parmas)
        .then(res => {
          console.log(res)
        })
        .catch(error => {
          console.log(error)
        })
      

      第三篇——vue-router

      其实这个感觉没多少要说的,因为官方的中文文档写的很详细,vue-cli脚手架也会集成vue-router,你是可以直接使用的,一些高级点的用法官方文档也写的很具体并配有demo.

      第四篇——vuex

      vux是一个专门为vuejs应用程序开发的状态管理模式。这个官方也有很详细的中文文档。

      第五篇——UI框架

      说道UI框架,那就多了,我有的也不多,基本需要的时候用,不然就是自己手撸了,就推荐几个不错的VUX,Iview,ElementUI.

    附上我一个项目,就当介绍了;https://github.com/YTU94/flow-control
    (夏欢的给个star,谢谢)

    评论

    还没有任何评论,你来说两句吧

    - 友情链接 - Theme by Qzhai