1、封装
- 1)在项目中导入
axios
:npm i axios
- 2)对于封装我们一般在项目的
src
文件下 去创建一个plugins
// axios 封装
import axios from 'axios'
import Vue from 'vue'
const instance = axios.create({
// 请求基地址
baseURL: "http://localhost:3008/",
timeout: 2000 // 控制时间 2000 = 2s,
// 请求头的配置
// headers
})
// 请求拦截器
// 例:提示开会员
instance.interceptors.request.use((config) => {
// 请求头配置 config
// config.auth = 'token'
return config
})
// 响应拦截器
instance.interceptors.response.use((res) => {
return res.data
})
// vue 全局加上 $http
// 在组件中使用 this.$http 就相当于 instance 了
Vue.prototype.$http = instance
- 3)封装好了后,我们在父组件中去使用
<script>
export default {
async created() {
const res = await this.$http.get('/cart');
console.log(res);
}
}
</script>
并且在 main.js 中引入
import Vue from 'vue'
import App from './App.vue'
import './plugins/http' //引入 plugins 文件下的 http.js
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
2、 Vue 中的样式处理
- 1)可以直接在
style
内添加scoped
将组件样式变成私有化
<template>
<div class="cart-item">
...
<button class="del">删除</button>
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
/* 样式的处理 */
/* 1.直接在 style 内添加 scoped 将组件样式变成私有化 */
/* scoprd 作用是给所在组件内的的标签 添加一个相同,但又与其他组件不同的属性 data-v-xxxxx */
/* 所有样式都会使用这个属性选择器来书写 */
.del {
color: red;
}
</style>
scoprd
作用是给所在组件内的的标签 添加一个相同,但又与其他组件不同的属性data-v-xxxxx
所有样式都会使用这个属性选择器来书写
============================================================================
2.1高级 CSS 语法
css 预处理 css 控制语言 高级的 css 语法
因为:浏览器不支持高级的 css 语法解决方法安装相应的工具包
less 介绍以及安装
- Less (Leaner Style Sheets 的缩写) 是一门向后兼容的 CSS 扩展语言。
- 步骤一:首先需要安装对应的包
npm i less less-loader -D
- 安装好后在:项目的
package.json
查看对应的版本号
- 导入 less 语法
-
<style scoped lang='less'>...</style>
less 的使用方法
- 1)嵌套(Nesting)
- Less 提供了使用嵌套(nesting)代替层叠或与层叠结合使用的能力
- 可以根据结构将
.del
与.cart-item .count input
嵌套 到.cart-item
中 - 滑过效果的写法:
&:hover{ colc:..}
& 表示自己
老写法
<style scoped lang='less'>
.cart-item{
display: flex;
justify-content: space-between;
padding: 20px 0;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
align-items: flex-start;
}
.del {
color: red;
}
.del:hover {
color: aqua;
}
.cart-item .count input{
width: 40px;
}
</style>
新写法
<style scoped lang='less'>.cart-item{
display: flex;
justify-content: space-between;
padding: 20px 0;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
align-items: flex-start;
.count {
/* 在 input 前面可以写 + 号,> 号*/
input {
width: 40px;
}
}
.del {
color: red;
&:hover{
color: aqua;
}
}
</style>
============================================================================
- 2)运算(Operations)
- 在css中可以使用算术运算符
+、-、*、/
可以对任何数字、颜色或变量进行运算。
<style scoped lang='less'>
.cart-item{
display: flex;
justify-content: space-between;
padding: 20px 0;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
align-items: flex-start;
.count {
input {
width: 30px +10 px; /* 宽度结果为40px */
}
}
.del {
color: red;
&:hover{
color: aqua;
}
}
}
</style>在这里插入代码片
============================================================================
- 3)变量(Variables)
@width: 10px;
@height: @width + 10px;
.header {
width: @width;
height: @height;
}
编译结果是;
.header {
width: 10px;
height: 20px;
}
============================================================================
- 4)混合(Mixins)
- 混合(Mixin)是一种将一组属性从一个规则集包含(或混入)到另一个规则集的方法
// 先定义
.border-top-bottom {
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
.cart-item{
...
/* 使用 */
.border-top-bottom ();
...
}
============================================================================
- 5)导入(Importing)
- 在assets创建一个
style.less
文件 - 导入
style.less
文件@import '../assets/style.less';
- 使用 语法:@定义名
@width:30px;
导入:@import '../assets/style.less';
使用:width: @width + 10px;
sass 介绍以及安装
- sass基于Ruby语言开发而成,因此安装sass前需要安装Ruby。
- 步骤一:正常安装 sass 大概率会失败:
- 首先先执行:
npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/
- 然后安装对应的包
npm i node-sass sass-loader -D
- 安装好后在:项目的
package.json
查看对应的版本号
- 导入 sass 语法
-
<<style lang="scss">...</style>
sass 的使用方法
- 1)嵌套(Nesting)
- css中重复写选择器是非常恼人的。如果要写一大串指向页面中同一块的样式时,往往需要 一遍又一遍地写同一个ID
老写法
<style lang="scss">
.cart{
width: 600px;
margin: 0 auto;
}
.cart-header .form-head{
display: flex;
justify-content: space-between;
}
.cart .cart-footer {
display: flex;
justify-content: space-between;
}
</style>
新写法
<style lang="scss">
.cart {
width: 600px;
margin: 0 auto;
.cart-header {
.form-head {
display: flex;
justify-content: space-between;
}
}
.cart-footer {
display: flex;
justify-content: space-between;
}
}
</style>
============================================================================
- 2)运算(Operations),导入(Importing) 与 less 基本相同
============================================================================
- 3)变量(Variables)
<style lang="scss">
$width:600px;
.cart {
width: $width;
margin: 0 auto;
.cart-header {
.form-head {
display: flex;
justify-content: space-between;
}
}
.cart-footer {
display: flex;
justify-content: space-between;
}
}
</style>
编译结果是;
.cart {
width: 600px;
margin: 0 auto;
.cart-header {
.form-head {
display: flex;
justify-content: space-between;
}
}
.cart-footer {
display: flex;
justify-content: space-between;
}
}
============================================================================
- 4)混合(Mixins)
- 混合器使用
@mixin
标识符定义 - 通过
@include
来使用这个混合器
// 定义
@mixin df {
display: flex;
}
.cart {
width: $width;
margin: 0 auto;
.cart-header {
.form-head {
@include df; // 定义 使用
justify-content: space-between;
}
}
.cart-footer {
@include df;
justify-content: space-between;
}
}
3、实现简单购物车的制作
- 基础结构
父组件
<template>
<div class="cart">
<div class="cart-header">
<h3>全部商品</h3>
<div class="form-head">
<div>
<input type="checkbox" name="" id="all" />
<label for="all">全选</label>
</div>
<span>商品</span>
<span>单价</span>
<span>数量