Web前端系列之vue-cli与axios应用解析

内容导读

vue-cli脚手架应用

vue-cli中axios应用

一、vue-cli脚手架应用

1.1 vue-cli概述

  1、vue-cli简介

vue-cli：俗称脚手架，主要用于创建完整前端app应用，为当前流行的设计方式。

脚手架：命令行，cli->command line

最新的Vue3有两种格式脚手架工具，分别为webpack与vite。

vite生成的项目效率更高，但目前在社区上解决问题的方案比webpack少。

  2、vue-cli安装与配置

（1）下载并安装node.js，目前常用为v21

下载地址： https://nodejs.org/dist/latest

# node基本操作命令
node -v：显示node版本
npm -v：显示管理工具版本
npm  insatll    -g  依赖名称：全局安装前端依赖
npm  insatll    --save  依赖名称：局部安装前端依赖

（2）升级npm，即：node包管理工具

npm install -g cnpm --registry=https://registry.npm.taobao.org

（3）查看vue-cli版本

vue -V
或
vue --version

（4）安装最新的vue与vue-cli

# 安装最新的vue版本及脚手架
npm install -g @vue/cli
或
cnpm install -g @vue/cli
# 安装指定的@vue/cli版本,比如：  
npm install -g @vue/cli@5.0.8

（5）其它命令

# 查看远程仓库中的@vue/cli版本号:
npm view @vue/cli versions --json
# 卸载旧版本的vue-cli：
npm uninstall vue-cli -g

1.2 webpack脚手架创建项目

提示：先通过命令窗口切换到上一级文件夹

（1）vue create 项目名

比如： vue create myapp #创建项目myapp，选择为Vue3方式的

cd myapp #进入项目文件夹

cnpm install #安装项目中所需的依赖

cnpm run serve #运行项目

（2）vue3项目完成结构

（3）运行项目，在浏览器地址栏输入： http://localhost:8080 （或按屏幕提示地址打开）

说明：还可以通过可视化方式创建vue项目，根据提示完成安装，输入以下命令

          vue   ui

1.3 vite脚手架创建项目

提示：先通过命令窗口切换到上一级文件夹

cnpm init vite 项目名称 或 cnpm create vite@latest

比如： cnpm init vite youapp #创建项目，按照默认设置回车即可

cd youapp # 进行项目文件夹

cnpm install #安装项目中的依赖

cnpm run dev # 运行vite管理的项目

在浏览器地址栏输入： http://localhost:5173

1.4 创建Vue3项目归纳

1.webpack项目
vue create myapp
2.vite项目
npm init vite myapp
或
npm create vite@latest

二、vue-cli中axios应用

axios：一种实现异步功能ajax的框架工具，也可以在vue-cli中使用。

1、添加axios模块：有时候还需要安装json解析工具qs

cd hello
npm install axios --save
npm install qs --save
# 以上也可以使用cnpm包管理工具

2、添加成功后，在package.json文件中就可以看到

"dependencies": {
  "axios": "^0.26.1",
    "core-js": "^3.8.3",
    "vue": "^3.2.13",
    "vue-router": "^4.0.3"
}

3、在vue文件中书写代码

无setup语法称为选项式API，参考之前vue3案例解析代码。

以下为setup语法方式的组合式API代码格式，简化了代码，使用更为便捷。

<template>
  <div class="about">
    <h1>沈阳市7天天气预报</h1>
    <ul>
      <li v-for="weather in weatherArr" :key="weather.date">
        {{ weather.date }}: {{ weather.week }}: {{ weather.weather }}
      </li>
    </ul>
  </div>
</template>
  setup语法称为组合式API：组件只需引入不用注册，属性和方法也不用返回，也不用写setup函数，也不用写export default导出
  无setup语法称为选项式API,需要严格遵循组件的注册、方法与属性的定义，并要显式导出组件等规范。
  <script setup>
  import axios from "axios";
  import { reactive, ref, onMounted } from "vue";

  const weatherArr = ref([]);

  axios
    .get(//此网址已不能使用，可更新其它
      "http://api.tianapi.com/tianqi/index?key=自己的KEY&city=沈阳市"
    )
    .then((response) => {
      weatherArr.value = response.data.newslist;
    })
    .catch((error) => {
      console.log(error);
    });
</script>

  说明1:<script step></script> 
//(1)语法糖并不是新增的功能模块，它只是简化了以往的组合API的必须返回（return）的写法，并且有更好的运行时性能。
//(2)组件只需引入不用注册，属性和方法也不用返回，也不用写setup函数，也不用写export default，
//甚至是自定义指令也可以在我们的template中自动获得。

4、axios三种完整使用格式如下

//（1）使用axios的get请求传递参数，需要将参数设置在params下
axios.get("http://localhost:9999/music/detail",{
  params:{
    id:"25640392"
  }
})
  .then(function(res){
    //res:json对象 res.data:获取对象
    //console.log(res);
    console.log(res.data);
  });
//(2)使用axios的post请求传递参数
axios.post("http://localhost:9999/music/search",{s:"阿呆"})
  .then(function(res){
    //console.log(res);
    console.log(res.data);
  });
//(3)axios请求方式：通用请求方式、请求参数、请求头、请求体（post）
axios({
  url:"http://localhost:9999/music/search",
  method:"post",
  params:{
    //设置请求行传值，有它则下边data不用了
    s:"成都",
    limit:15
  },
  headers:{
    //设置请求头,指定了请求体的媒体类型
    //application/json: 表示请求体是 JSON 格式的数据。
    //application/x-www-form-urlencoded: 表示请求体采用 URL 编码的表单数据。
    Content-Type: 'application/json'
    //'Authorization': 'Bearer ' + token
    //客户端响应的内容
    //'Accept': 'application/json'
  },
  data:{
    //设置请求体（post/put）
  }
}).then(function(res){
  console.log(res.data)
});

5、并发请求

<div id="container">
  <button type="button" @click="test1">测试1</button>
</div>
<script type="text/javascript">
  var vm = new Vue({
    el:"#container",
    methods:{
      test1:function(){
        //发送异步请求
        axios.all([listMusics(),getMusicDetail()]).then(axios.spread(function (r1, r2) {
          // 两个请求现在都执行完成
          console.log(r1);
          console.log(r2);
        }));
      }
    }
  });

  function listMusics() {
    return axios.get('http://localhost:9999/music/search?s=成都');
  }

  function getMusicDetail() {
    return axios.get('http://localhost:9999/music/detail?id=25640392');
  }
</script>

注意： vue3全新钩子函数用法，钩子函数也就是系统定义好的函数。

<!-- 1、ref()
主要用于创建基本数据类型（如数字、字符串等）的响应式数据。
通过ref创建的变量包装在一个对象中，可以通过.value访问其实际值，同时 Vue 会追踪该值的变化并在视图中自动更新。
使用前必需引入ref: -->
<script setup>
  import {
    ref
  } from 'vue'

//  定义语法
const a= ref(0)// 创建一个响应式的数字
const b = ref(null)
const c = ref({})
const d = ref(false)
const e = ref([])
console.log(a.value); // 0
count.value++;// 自动触发视图更新
// 2、onMounted()
// 是一个生命周期钩子函数，用于在组件被挂载到 DOM 后执行特定的操作，常用于执行一次性的操作，例如数据的获取、DOM 操作等。
import { onMounted } from 'vue';
onMounted(() => {
// 在组件挂载后执行的代码
// 可以进行一次性的数据获取或其他初始化操作
});

// 3、reactive 
// 用于创建一个响应式对象的函数，它可以包含多个属性，每个属性都是响应式的，当其中任何属性的值发生变化时，Vue 会自动更新视图。
// 与  ref 不同，reactive 创建的是一个包含多个属性的响应式对象，而不是一个单独的引用。

import { reactive } from 'vue';

const person = reactive({
name: 'John',
age: 30,
});
console.log(person.name); // John
person.age++; // 触发视图更新
</script>

更精彩内容请关注本站 ！