Axios、SASS学习笔记

这篇具有很好参考价值的文章主要介绍了Axios、SASS学习笔记。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

前言

一、Axios基础认识

1、简介

2、相关文档

3、基本配置

4、基础快捷使用

二、Axios封装

1、公共配置文件

2、细化每个接口的配置

3、使用并发送请求

三、SASS

1、简介

2、相关文档

3、使用前奏

4、使用变量

5、嵌套规则

6、父级选择器标识 &


前言

1、打包工程各个页面的统一命名

component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')

注意:/* webpackChunkName: "about" */不是注释,作用:打包工程时文件的命名开头统一

2、网页地址时有时无的 #

const router = new VueRouter({
  mode: "history",//控制网址是否有#,设置了就没有#
  base: process.env.BASE_URL,
  routes,
});

一、Axios基础认识

1、简介

Axios 是一个基于 promise 网络请求库,作用于 node.js 和浏览器中

它是 isomorphic (同构)的,即同一套代码可以运行在浏览器和 node.js 中

在服务端它使用原生 node.js http 模块,而在客户端 (浏览端) 则使用 XMLHttpRequests

2、相关文档

(1)Axios官方文档

起步 | Axios中文文档 | Axios中文网https://www.axios-http.cn/docs/intro(2)现代 JavaScript 教程之Promise

Promisehttps://zh.javascript.info/promise-basics

3、基本配置

(1)安装

npm install axios

(2)引入:在main.js文件中引入

// 使用CommonJS规范
const axios = require('axios').default;
// 使用Es6规范
import axios from 'axios'

4、基础快捷使用

(1)未带请求参数

/* GET请求 */
axios.get('url',{})
    .then((res)=>{//成功
	    console.log(res)
    })
    .catch((err)=>{
	    console.log(err)
    })

/* POST请求 */
axios.post("url", {
    username: "xxxxxx",
    password: "xxxxxx",
})
  .then((res) => {
    console.log(res);
  })
  .catch((err) => {
    console.log(err);
  });

(2)带请求参数

注意:GET请求带参使用params;POST请求带参使用data

/* GET请求 */
axios({
	method:"GET",
	url:'',
	params:{
		key:'',
	},
})
    .then((res)=>{
        console.log(res)
    })
    .catch((err) => {
        console.log(err);
    });

/* POST请求 */
axios({
	method:"POST",
	url:'',
	data:{
		key:'',
	},
	headers:{
		'content-type':'application/x-www-form-urlencoded',
	},
})
    .then((res)=>{
        console.log(res)
    })
    .catch((err) => {
        console.log(err);
    });

二、Axios封装

Axios、SASS学习笔记,vue2,学习,笔记,Axios,sass

1、公共配置文件

在src文件夹下=》创建request文件夹=》request.js文件

/* request.js */
// 引入axios
import axios from "axios";

// 创建实例,并带上默认配置
const instance = axios.create({
  baseURL: "",
  // timeout 指定请求超时的毫秒数
  // 如果请求时间超过 timeout 的值,则请求会被中断
  timeout: 1000, // 默认值是 0 (永不超时)
  headers: {'X-Custom-Header': 'f3oobar'} // 默认请求头
});

// 导出实例
export default instance;

2、细化每个接口的配置

在src文件夹下=》新建api文件夹=》新建js文件,如about.js、home.js、index.js...

/* /api/index.js */

// 引入axios实例
import instance from '@/request/request.js'

// 获取用户信息(GET请求)
export function userInfo(params){
    return instace({
        url:"/user",
        method:"GET",
        params//增强写法
    })
}

// 获取用户信息(POST请求)
export function userInfo(data){
    return instace({
        url:"/user",
        method:"POST",
        data,
        headers:{
			'content-type':'application/x-www-form-urlencoded'
		}
    })
}

3、使用并发送请求

到.vue页面文件中,按需引入需要用的接口函数

<template>
<div>
    欢迎登录系统。
</div>
</template>
<script>
    // 引入接口函数
    import { userInfo } form '@/api/index.js'
    export default{
        created(){
            this.getUserInfo()
        },
        method:{
            getUserInfo(){
                userInfo({ID:12345})
                    .then(res=>{
                    console.log(res)
                })
                    .catch(err=>{
                    console.error(err)
                })
            }
        }
    }
</script>

三、SASS

1、简介

Sass 是一款强化 CSS 的辅助工具

它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能

这些拓展令 CSS 更加强大与优雅,以及更高效地开发项目

2、相关文档

Sass基础教程 Sass快速入门 Sass中文手册 | Sass中文网Sass是世界上最成熟、稳定和强大的专业级CSS扩展语言https://www.sass.hk/guide/

3、使用前奏

(1)快速安装

通过创建Vue脚手架时,勾选【CSS Pre-processors】=>【Sass/SCSS (with dart-sass)】

(2)开启sass

<style>标签中,加上属性配置:lang="scss"

<style lang="scss">

4、使用变量

(1)声明变量

用 $ 声明变量,用 : 赋值

$highlight-color: #F90;

(2)变量引用

用 $ 直接引用变量,sass会自动解析

border: 1px solod $highlight-color;

(3)代码示例

<template>
    <div>
        <h1>主页</h1>
        <p>1</p>
        <p>1</p>
    </div>
</template>

<style lang="scss" scoped>
$font-color: #F90;
$bg: #4662D9;

h1 {
    color: $font-color;
}
p {
    color: $font-color;
}
</style>

5、嵌套规则

在sass中,可以像俄罗斯套娃那样在规则块中嵌套规则块,嵌套关系即父子关系

sass在输出css时会把这些嵌套规则处理好,避免重复书写

注意:此嵌套关系并非严谨的直系父子关系,仅代表包含关系

<template>
    <div>
        <div class="card">
            <div class="header">头部</div>
            <div class="content">
                内容
                <div class="header">
                    内容的头部
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
// 变量
$font-color: #F90;
$bg: #4662D9;

// 嵌套
.card {
    font-weight: bold;
    width: 600px;
    height: 300px;
    background-color: $font-color ;

    .header {
        height: 40px;
        background-color: $bg;
    }

    .content {
        height: 300px;
        background-color: yellow;

        .header {
            background-color: aqua;
        }
    }
}
</style>

6、父级选择器标识 &

& 符号在每一层的选择器中,标识当前选择器自身,方便直接在联级中书写伪类等 css 属性文章来源地址https://www.toymoban.com/news/detail-727205.html

<style lang="scss" scoped>
    .header {
        background-color: aqua;
        &:hover {
            background-color: red;
        }
    }
</style>

到了这里,关于Axios、SASS学习笔记的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue3.2+vite+vant4+sass搭建笔记

    官方下载地址:https://github.com/coreybutler/nvm-windows/releases 双击安装                    在  vite.config.js  文件中配置插件  tips:函数组件样式有异常,在main.js中引入vant样式 1、安装插件 postcss-pxtorem 是一款 PostCSS 插件,用于将 px 单位转化为 rem 单位 lib-flexible 用于设置 rem 基

    2024年02月02日
    浏览(50)
  • SCSS 学习笔记 和 vscode下载live sass compiler插件配置

    SCSS 是一个 CSS 的预处理器,是 CSS 的扩展语言,可以帮助我们减少重复的代码,生成更好的 CSS 格式化代码,并且兼容所有版本的 CSS SCSS 是 对于 CSS3 的 SASS ,所以我们学的时候,把文件后缀写为 “.scss” 由于我们的配置,当遇到兼容性代码,出口文件会自动配置,如下图

    2024年02月12日
    浏览(43)
  • vue 中node-sass和sass版本问题解决

    先开始使用 “node-sass”: “^7.0.1” “sass-loader”: “^10.0.5” 然后使用npm install报错 后面百度,搜到了是因为 node-sass和sass-loader版本不对应造成。 然后修改版本,增加sass引用 “node-sass”: “^7.0.1” “sass-loader”: “^7.3.1”, “sass”:“1.26.5”, 然后npm install安装正确,但是npm r

    2024年02月11日
    浏览(57)
  • sass笔记

    用法说说明 声明变量 通过$标识符进行命名及引用 混合器 类似vue中的函数 通过 @mixin标识定义 @include 标识调用 父选择器标识 @extend 进行继承 可嵌套 可导入 通过 @import \\\'文件位置’ 、进行导入 用法 效果

    2024年02月12日
    浏览(27)
  • vue中引入sass、scss

    使用vue cli 脚手架工具创建项目 全局样式变量 路径:@/assets/styles/variables.scss 布局样式类 路径:@/assets/styles/layout.scss 全局共用样式 路径:@/assets/styles/main.scss 在App.vue或者main.js中映入均可 在vue.config.js中配置全局样式类,具体配置方法可以参考vue cli官方文档 原因 产生的原因

    2024年01月17日
    浏览(39)
  • vue3:安装配置sass

    目录 前言: 1. 安装sass 2. 新建style目录,存放scss文件 3. main.ts  4. vite.config.ts 5. Test.vue 对于前端开发人员来说,css预处理的语言已经是家常便饭了,如sass,less等等,那么在vue3中该如何去使用sass呢? 首先看个最基础的页面,木有任何的样式,接下来将一步一步的添加样式!

    2023年04月09日
    浏览(16)
  • 开始学习Vue2(axios和Vuex)

    一、 Axios 1、 Axios  简介 Axios   是一个基于  promise   网络请 求库 ,作用于 node.j s  和浏   览器中。它是  isomorphic  的(即同一套代码可以运行在浏览器 和 node.js 中)。在服务端它使用原生  node.js http  模块,  而在 客户端   (浏览端)   则使用   XMLHttpRequests。 2、 Axios  的

    2024年02月20日
    浏览(35)
  • vue node_modules\node-sass: Command failed. 安装失败,如何解决,使用 sass 替换

    package.json vue 项目中,安装依赖的时候出现错误,如下: package.json 中有个 node-sass 的包,在安装并编译这个的时候出现问题 node-sass 的主要功能是将 sass/scss - css ,跟 sass 的作用是一样的, sass 是 dart 语言写的, 直接用 sass 替换掉 node-sass 即可 在使用 vue create appName 创建 vue 项

    2024年02月03日
    浏览(46)
  • 2022 Stylelint 配置详细步骤(css、less、sass、vue适用)

    目录 插件安装 本地配置  忽略文件配置 依赖安装 配置项文件 Endings  Tips 插件安装 我用的软件是VScode,搜索插件: Stylelint   (  版本:v1.2.2 ) 本地配置 打开VScode的设置,打开 settings.json 或者直接在设置里点击这个图标可以自动跳转:  在里面配置一下代码,可根据自己的需

    2024年02月04日
    浏览(50)
  • Vue项目自动注入less、sass、scss、stylus全局变量

    一、Vue2项目 官方文档:CSS 相关 | Vue CLI 二、Vue3项目 2024-4-9

    2024年04月15日
    浏览(58)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包