本篇文章主要是基于vue开发一个移动app,类似于今日头条，那么如何从无到有呢？注：主要写思路，具体到代码不做过多赘述

1.我得先知道项目是什么类型的，是pc端是移动端还是响应式，需要实现的主要功能是什么，是否做成app   ----了解项目【移动app,今日头条】

2.知道要实现的主要功能了，接下来就是规划技术选型， 大概要知道需要利用什么技术，需要的插件也有数。

使用vue开发，vuecli搭建脚手架 axios发送ajax router实现页面跳转 vuex状态管理……

3.接下来就是搭架子，就是先用vue脚手架，创建一个最基本的架构   以后开发的时候都在这个项目文件里面

4. 团队协作下，使用代码托管，gitee\github     原因： 备份、版本管理，方便（电脑没带，pull一份），便于团队协作（拿u盘岂不太low）

5.团队发开，需要指定一些开发规范， 目的是多人协作下，风格统一，别人能容易些看懂你代码，也是行业的规则  -- 使用eslint代码检查工具，用来检查你的代码是否符合规范

6. 引入vant(有赞)组件库 作用是快速搭建页面，节省开发时间     

7.用REM解决多屏适配  为什么？不同的手机屏幕大小有差异，所以需要去适配不同的手机 

官网地址](https://youzan.github.io/vant/#/zh-CN/quickstart#rem-gua-pei)

8.封装axios请求函数  实际工作中，会将一些使用频繁的方法封装起来，方便不同的组件调用，便于维护。

以封装axios为例子，说明封装的好处。

首先，如果我不封装怎样？行不行？  -----是可以的

不封装的情况下：
在需要发送ajax的组件中，使用这个方法。如果有100个组件需要使用，就得复制100份！
特别的注意的是，axios经常在生命周期钩子函数（2）created中使用，created()是初始化完成，啥意思呢，就是数组
// 0.下载--使用npm下载  命令： npm i axios
// 1. 导入axios
import axios from 'axios'
// 2. 使用
axios({
  method: '请求方式', // get post
  url: '请求地址',
  data: {    // 拼接到请求体的参数,  post请求的参数
    xxx: xxx,
  },
  params: {  // 拼接到请求url的参数, get请求的参数
   	xxx: xxx 
  }
}).then(res => {
  console.log(res.data) // 后台返回的结果
}).catch(err => {
  console.log(err) // 后台报错返回
})

 接下来是第一次封装-- 统一baseURL管理

//步骤：
1.新建一个文件，存放封装的代码
2.为什么axios.create可以进行路径的拼接呢？
---因为axios.create()是工厂函数，使用它可以创建一个拥有通用配置的axios实例 axios.creat([config]) 这个是人家定义的方法

       
import axios from 'axios' // 导入axios固定格式

const ajax = axios.create({
  baseURL: 'http://localhost:3000' //固定写法
})

export default ajax  //导出

 第二次封装

其实第一次封装axios更像是一种约定俗成，毕竟人家就有这个方法，可以拼接路径，这样做可以不用每次都写路径前面那个路径了，但是问题来了，我每次还是要在不同的组件中发起ajax请求，如果有一天路径地址变了，我i还得一个组件一个组件的过去改，不方便。所以我们可以把axios封装到一个单独的文件中，让他变成全局可用，只需要用的时候导入就可以，那么怎么封装呢？

 

第一步：导入第一次封装的axios  request对象
import request from '../utils/request'

// 导出 commendAPI方法 把axios请求的代码放在里面
export const recommendAPI = () => request({
  url: '/personalized?limit=6',
  method: 'GET'
})
----------------------------接下来在页面中使用----------------------------------------------
 created () {
    this.getRecommendList()        //在钩子函数的第二，初始化调用，此时已经有了data,methods,可以进行请求了
  }，
 methods: {
    async getRecommendList () {
      const res = await recommendAPI() // 只需要进行调用就行，不用在里面写请求代码，便于后期维护
      this.recommendArr = res.data.result
    }
  }
 

 题外话：其实也可以将axios挂载到vue原型上，Vue.prototype.$axios=axios ,使用时 ：this.$axios.get('/url',{params:{username:'张三'}})。省去导入的一步。 

在main.js中引用
import Axios from 'axios'
import qs from 'qs'
//跨域post实例；用到qs组件来避开ajax信使请求；并兼容安卓；
Vue.prototype.$qs = qs;
// 给对象一个原型挂载属性（很重要）
Vue.prototype.$axios = Axios;
Axios.defaults.baseURL = 'http://v.jspang.com:8088';

----------------下面是页面中使用-------------------------

    created(){
     this.$axios.post("/baixing/wxmini/homePageBelowConten")
    .then(res=>{
        console.log(res)
    })
    .catch(err=>{
        console.log(err)
    })
  },

 

总结：

 拿到一个项目后，先了解项目，理解项目要实现的功能，接下来就是根据项目需求，大概清楚需要利用哪些技术栈，以及需要使用的插件工具，然后使用vue搭建一个脚手架，接下来便是下载各种第三方插件，引入到项目文件里面，调试插件功能是否正常，使用gitee管理代码，看看项目开发规范，然后封装一些常用的方法到单独的文件中，需要用的时候引入。这是项目开发时的准备情况。

重点：

1.引入插件注意路径，测试插件是否正常，注意插件或模块的版本

2.使用gitee管理代码，了解常见的git命令。

3.代码规范检查工具 ESLint

4.封装常用的方法，目的是为了以后，方便维护。