安装

首先安装css-loader、style-loader、node-sass、sass-loader

npm install css-loader style-loader --save-dev 
npm install node-sass sass-loader --save-dev

常用语法

声明样式变量

sass 文件进行管理 asstes/style/base.scss

// 使用sass变量的意义
$main-color: #5473E8;
$auxiliary-color-orange: #FF9F24;
$auxiliary-color-cyan: #23BCCA;

组件调用

<template>
  <div class="about">
    <h1 class="title">This is an about page</h1>
  </div>
</template>
<style lang="scss">
@import "@/assets/style/base.scss";
.about {
  .title {
    color: $main-color;
  }
}
</style>

sass 嵌套

bem sass 嵌套和普通sass嵌套的区别

普通嵌套

<template>
  <div class="about">
    <h1 class="title">This is an about page</h1>
  </div>
</template>
<style lang="scss">
@import "@/assets/style/base.scss";
.about {
  .title {
    color: $main-color;
  }
}
</style>

bem 规则嵌套

<template>
  <div class="home-page">
    <!-- <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/> -->

    <div class="home-page-title">
      文字
      <div class="home-page-title-sub">副标题</div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: "HomeView",
  components: {
    // HelloWorld
  },
};
</script>
<style lang="scss">
@import "@/assets/style/base.scss";
.home-page {
  &-title {
    color: $main-color;
    font-weight: 900;
    &-sub{
      color: $auxiliary-color-cyan;
    }
  }
}
</style>

mixin 函数

定义函数

@import './base.scss';

@mixin backgroudArea {
    background: $auxiliary-color-cyan;
    width: 200px;
    height: 100px;
}

使用函数

<template>
  <div class="about">
    <h1 class="title">This is an about page</h1>
    <div class="bg">1121212121</div>
  </div>
</template>
<style lang="scss">
@import "@/assets/style/base.scss";
@import "@/assets/style/mixin.scss";
.about {
  .title {
    color: $main-color;
  }
  .bg{
    @include backgroudArea;
  }
}
</style>

如何给函数传递变量

@import './base.scss';

@mixin backgroudArea($color) {
    background: $color;
    width: 200px;
    height: 100px;
}

调用时的传递

@include backgroudArea(red);

添加默认值

@import './base.scss';

@mixin backgroudArea($color:$main-color) {
    background: $color;
    width: 200px;
    height: 100px;
}

该函数调用的时候的参数就不是一定需要传递的了。

实现一个三角形的函数

@mixin triangle ($color:#d9534f,$size:50px,$direction:'up'){
    width: 0;
    height: 0;
    border-style: solid;
    @if $direction == 'up'{
        border-width: 0 $size $size;
        border-color: transparent transparent $color;
    } @else if $direction == 'down'{
        border-width: $size $size 0;
        border-color: $color transparent transparent;
    }
}

如何调用？

@include triangle($auxiliary-color-cyan,20px,'down')

不完整传参如何调用

使用声明变量赋值

@include triangle($color:$auxiliary-color-cyan,$direction:'down')

配置跨域

vue.config.js 配置文件做修改后，需要重启项目，不然不生效

axios的get请求传参要配合params属性，有很多同学，搞不清data、params，喜欢在get的时候传data属性，导致请求接口传递参数失败。

export const getUser = (params) => {
    return request({
        method: 'get',
        url: '/user',
        params
    })
}

跨域问题：Access-Control-Allow-Origin

'/book'是拦截带/book路径的接口进行跨域请求

devServer: {
    proxy:{
      '/book': {
        target: 'http://localhost:3000',
        ws: true,
        changeOrigin: true
      },
    }

配置跨域添加公共路径

request.js

// 添加请求拦截器
import axios from "axios";

const _axios = axios.create({
    baseURL: '/api'
})

_axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});

// 添加响应拦截器
_axios.interceptors.response.use(function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    return response;
}, function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error);
});

export default _axios;

vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    proxy: {
      // 拦截带/api路径的异步请求
      '/api': {
        target: 'http://localhost:3000',
        ws: true,
        changeOrigin: true,
        // 因为 baseURL: '/api' 添加了公共路径
        // 导致虽然跨域成功，但是请求接口路径多了一个/api
        // 所以需要路径重写，把/api 替换为空
        pathRewrite: { '/api': '' }
      },
    }
  }
})

/api/index.js

import request from '@/utils/request';

// http://localhost:3000/book/user
export const getUser = (params) => {
    return request({
        method: 'get',
        url: '/book/user',
        params
    })
}

组件调用

记得封装一个方法，不要直接created里请求

import { getUser } from "@/api";
export default {
  name: "HomeView",
  created() {
    this.getUser();
  },
  methods: {
    getUser() {
      let params = {
        id: "644a2c79bae16bc5526dbea3",
      };
      getUser(params).then((res) => {
        console.log(res);
      });
    },
  },
};