基于vue的移动端项目--从零开始

矫情吗；* 2023-10-04 15:23 13阅读 0赞

> 本篇文章主要是基于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][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.封装常用的方法，目的是为了以后，方便维护。
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdoYW95aW5nYW5k_size_16_color_FFFFFF_t_70][]

[https_youzan.github.io_vant_zh-CN_quickstart_rem-gua-pei]: https://youzan.github.io/vant/#/zh-CN/quickstart%23rem-gua-pei
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdoYW95aW5nYW5k_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210604203242196.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdoYW95aW5nYW5k,size_16,color_FFFFFF,t_70