Vue项目搭建与实践：组件化、路由、插槽与API请求-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_49204513/article/details/108811324

本文介绍了如何使用Vue CLI搭建项目环境，包括创建项目、配置文件详解以及组件化开发。重点讲解了组件插槽的使用，允许在头部组件中添加自定义内容。此外，还探讨了Swiper插件的集成以及Axios进行HTTP请求的方法，包括原生JS、jQuery AJAX和fetch API的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、搭建项目框架，构建项目环境。

1进入Vue官网cli脚手架去下载安装依赖，

2打开cmd创建项目：create vue +项目名字，然后按照需求去选择构建时候的选项。

二、项目介绍：

node_modules------项目的依赖包
public-------------------静态文件：不需要打包编译生成及开发的资源
src————————开发文件包**（开发时候的组件、路由、views里的各种网页都写在这里）**
.xxx的文件都是我们项目需要的配置文件，具体后期使用
babel.config.js————babel的配置文件
package.json————项目配置文件
package-lock.json——项目版本锁定
README.MD————项目说明书
如图下

具体做法：

一

1、FooterNav.vue和hearderTop由于是重复性使用的，所以可以直接做成组件。放在components文件夹里。
2.创建组件，引入路由。
1、在APP.vue里边创建一个组件，名字就是FooterNav
2、引用。
3，渲染，如图（哪里用的到的话，就引用一下。）
在这里插入图片描述

二

关于字体和样式：
可以引入阿里巴巴的icon样式去引入。具体看图
在这里插入图片描述

三

关于首页
在组建文件夹里的FooterTop里，因为头部里的样式都是一样的，我们只需让他的文字部分随页面改动而改动。在这里插入图片描述

关于样式：
我们这里是用的styl样式，如下，2.3都在1里边写的，2引入的是公共的样式，3是头部自己的样式。

关于头部插槽，（作用是：我们创建了一个头部的组件，但是我们还想让主页的头部里边加个搜索和登陆注册，这时候就需要插槽啦）

1、在这个头部组件里边创建一个标签：和
2、在主页使用的组件标签里边创建一个相应的连接：就是在里边
3. 在这里插入图片描述
4，然后在APP里 v- show

四

关于使用swiper插件实现轮播（先安装）在这里插入图片描述

1进入官网，找到中文教程，找到在Vue中使用，打开进入gitbu里的一个库。
2，找到 local(本地)或者 component，复制里边的css样式和JS方法。
3，引入组件和样式
在这里插入图片描述

4，在页面用标签占位符引用

关于登陆页面：
1，还是在views页面里边创建一个login的文件
2，在主页面和我的里边添加<router-link to=">(相当于点击跳转页面，是路由实现的)

五

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
关于axios配置安装
在这里插入图片描述
异步请求的方法：

一 JS原生

在这里插入图片描述
先创建一个.json文件。
然后在index.html里的script里边写：

 		// 先创建XMLHttpRequest对象
         let xhr = new XMLHttpRequest();
        // 准备发送
         xhr.open('get', './data.json')
        // 执行
         xhr.send()
        // 执行回调函数
         xhr.onload = function() {
             alert(xhr.response); //是一个json字符串，需要转成JS对象进行操作
         }

二 jQuery ajax(这里得引用jQuery库)

 $.ajax({
             type: 'get',   //请求类型
             url: './data.json',	//路径
             contentType: 'json',
             success: function(e) {
                 console.log(e.status);
                 console.log(e.responseText);
            }
         })

三 fetch JS新技术

fetch('./data.json')
        .then(function(response) {
            return response
        })
        .then(function(data) {
            console.log(data);
        })