百万前端之vue2.x最快上手

1.创建项目

vue create 项目名

2.认识vue初始文件夹

3.安装插件

移动端安装vant-ui  pc端安装element-ui
  # Vue 2 项目，安装 Vant 2：
npm i vant@latest-v2 -S
安装axios
npm install axios
安装vue-router
npm install vue-router

4.全局注册插件

import Vue from 'vue'
import App from './App.vue'
import router from './router' //路由
import store from './store'  //vuex数据管理
import Vant from 'vant'  //vant插件
import 'vant/lib/index.css' //vant的css
import network from './request/linkImg.js' // 全局图片链接存放
import * as axios from './request/api.js'  //axios

Vue.config.productionTip = false
Vue.use(Vant) //实例化vant
global.network = network  //全局图片链接
Vue.prototype.$axios = axios //axios

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

5.封装axios

import axios from 'axios' //导入axios

// 创建axios实例
const service = axios.create({
baseURL:'https://',  //全局调用axios时的api接口
timeout: 20000 //请求超时时间  毫秒单位
})

// 请求拦截器
service.interceptors.request.use(config =>{
  // 请求前获取data信息
  if (!config.data) {
        config.data = {} //定义config.data
    }
  
  //获取登录时存储在本地缓存的用户token数据
  let token = localStorage.getItem('token')

  if (token) {
        config.headers.token = token //全局携带token请求数据接口
    }
  
  return config
})

export default service
import axios from 'axios'
import {
    Notify
} from 'vant'

// 创建axios实例
const service = axios.create({
    baseURL: 'https://o56p275976.imdo.co/api', // api的base_url
    // withCredentials: true, // 跨域请求时是否发送cookies
    timeout: 20000 // 请求超时设置
})

// 请求拦截器
service.interceptors.request.use(config => {
    // 请求前做点什么？
    if (!config.data) {
        config.data = {}
    }

    let token = localStorage.getItem('token') // 全局请求自动携带token
    if (token) {
        config.headers.token = token
    }
    return config
}, error => {
    // 处理请求错误
    // console.log(error) // 用于调试
    return Promise.reject(error)
})

// 响应拦截器
service.interceptors.response.use(response => {
    if (response.data && response.data.errno === 203) {
        Notify.error('您没有登录或登录已失效，请重新登录！')
    }
    if (response.data && response.data.errno === 202) {
        Notify.error('您没有登录或登录已失效，请重新登录！')
    }
    return response
}, error => {
    if (error.message.includes('timeout')) {
        Notify({
            type: 'danger',
            message: '请求超时，请稍后再试'
        });
        return Promise.reject(error)
    }
    Notify({
        type: 'danger',
        message: '网络连接失败，请稍后再试'
    });
    return Promise.reject(error)
})

export default service

6.封装api接口

import axios from '@/request/axios' // 引入封装好的axios文件（拦截器）


//所有页面的接口请求都在这里写， 示例：this.$axios.接口请求方法名().then(res=>{})
// 接口请求  get的请求带参数用params，不用携带参数的请求就不用写
export function webConfigure(params) {
  return request({
    url: 'index/get_site_config',
    method: 'get'
    params
  })
}

//  post的请求带参数用data，不用携带参数的请求就不用写
export function filesUpload(data) {
  return request({
    url: 'Ajax/upload',
    method: 'post',
    data
  })
}

7.全局图片链接统一（需要的时候才写）

//link.js文件
//配置全局图片接口域名
const network = 'https://o56p275976.imdo.co'
//全局图片链接
export default {
    imgUrl:network,
}

//页面中调用图片渲染链接
//url: network.imgUrl


// min.js中配置
import network from './request/linkImg.js' // 全局图片链接存放
global.network = network

8.页面请求接口示范

//登录页面请求示例   登录成功后保存token到本地缓存

//用户点击登录提交密码  userLogin()为接口请求方法名
      this.$axios.userLogin({
        username:this.username,
        password:this.password
      }).then(res=>{
       if (res.data.errno == 605){
         //登录失败  账号或密码错误
         this.$toast(res.data.errmsg)
       }else if(res.data.errno == 0){
         //登录成功保存用户token
         let token = res.data.data.token
         //保存token到本地缓存
         window.localStorage.setItem('token',token);
        // 登录成功后跳转到首页
        this.$router.push('/index')
       }
      })

到这里vue2的基本使用已经结束了。
下面是一些常用到的方法。

1.问号判断语句(三目运算符)

条件 == '1' ? 'true' : 'false'

问号前为判断条件，问号后为执行条件的结果

判断结果为真显示true

判断结果为假显示false

2.for循环set写入数组新字段

                      for (let i = 0; i < this.collectionlist.length; i++) {
                        this.$set(this.collectionlist[i],'ischeck',false)
                        this.$set(this.collectionlist[i],'isClick',0)
                        this.$set(this.collectionlist[i],'isClick1',1)
                        this.$set(this.collectionlist[i],'clickNum',1)
                        this.$set(this.collectionlist[i],'collect_number',1)
                    }

3.for循环分页（全部页面读取）

                        //分页总页数
                        this.last_page =  res.data.data.last_page
                        //循环分页数量，循环次数为是否请求到了最后一页
                        for(let p = 1;p < this.last_page;p++){
                            //循环一次增加一页
                            this.page++
                            //请求下一页内容
                            this.$axios.get_wrong_answer({res_id:this.$route.query.res_id,page:this.page}).then(res=>{
                                //下一页数据的内容
                                this.NewPaperList = res.data.data.data
                                //循环拆解数组中的内容
                                for (let i = 0;i < this.NewPaperList.length;i++){
                                    //将新数组的内容添加到上一页数据内容的末尾
                                    this.paperList.push(this.NewPaperList[i])
                                }
                                //错题总数
                                this.tipsNumber = this.paperList.length
                            }).catch(err=>{
                                console.log(err)
                            });
                        }