金山老师的笔记9.支持SCSS
使用scss(Sass)
Vite 提供了对 .scss, .sass, .less, .styl 和 .stylus 文件的内置支持, 可以官网 【CSS预处理器】
- 安装
sh
npm add -D sass在组件中使用scss或者引入scss文件
在组件中
在组件中使用scss语法(测试scss的嵌套语法)
vue
<template>
<div class="scssApp">
<div class="container">
<h3>测试scss样式</h3>
</div>
</div>
</template>
<style scoped lang="scss" >
$bc1:rgb(150, 117, 74);
$bc2:antiquewhite;
$bc3:rgb(162, 110, 48);
.scssApp {
background-color:$bc1;
padding: 10px;
margin: 10px;
box-shadow: 0 0 10px;
border-radius: 5px;
.container {
background-color: $bc2;
padding: 10px;
margin: 10px;
box-shadow: 0 0 10px;
border-radius: 5px;
h3 {
background-color: $bc3;
padding: 10px;
margin: 10px;
box-shadow: 0 0 10px;
border-radius: 5px;
line-height: 30px;
}
}
}
</style>注意
此处使用的是scss的嵌套语法进行测试，注意低版本的浏览器之前的版本是不支持css 默认的嵌套语法，2023年为基线部分浏览器已经开始支持,可以在caniuse.com进行查询是否可用
全局使用
使用scss的初衷大多数都是为了在全局使用变量，和公共样式，编写的公共样式文件src\assets\scss\global.scss内容如下
css
/**
* 定义全局的样式
*/
.global_test{
width: 100px;
height: 100px;
border-radius: 50px;
text-align: center;
background-color: pink;
box-shadow: 0 0 10px;
}此处可以使用如下几种方式：
组件中引用
在组件的style标签中引入通用的scss布局样式@import '@/assets/scss/global.scss';,在模版中正常使用公共样式global_test
vue
<template>
<div class="global_test"></div>
</template>
<style scoped lang="scss" >
@import '@/assets/scss/global.scss';
</style>在Vite中配置
基于vite配置的话可以在vite.config.ts引用全局的scss样式文件,具体请参考 Vite的css预处理配置
scss预处理器的配置项请参考官网
ts
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
},
css:{
preprocessorOptions: {
scss: {
additionalData: `@import './src/assets/scss/global.scss';`,
}
},
},
})在main.ts中全局配置
还可以再css中全局配置导入语法
css
import '@/assets/scss/global.scss'10.mockjs
什么是mock.js mock.js:是一款模拟数据生成器，可以生成随机数据，拦截 Ajax 请求 它的官网是http://mockjs.com/ 为什么要使用mock.js 由于很多公司，后端还没有做好接口,写好接口文档，有了mock.js前端就不需要等待后端实现接口再写代码。 前端可以通过mock.js 参考接口文档自己先模拟数据 写业务代码，等待后端准备好，在用后端接口替换自己写模拟数据实现前后端同时开发
在vue的vite编辑器下可以使用插件 vite-plugin-mock
github地址：
https://github.com/vbenjs/vite-plugin-mock/blob/main/README.zh_CN.md
https://github.com/anncwb/vite-plugin-mock/blob/master/README.zh_CN.md
本文基于vite所以下述的mockjs都是基于 vite-plugin-mock插件编写。
安装
node version: >=12.0.0
vite version: >=2.0.0
npm i vite-plugin-mock -D配置
开发环境是使用 Connect 中间件实现的。与生产环境不同，您可以在 Google Chrome 控制台中查看网络请求记录，配置vite.config.ts
ts
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { viteMockServe } from 'vite-plugin-mock'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
viteMockServe({
mockPath: 'mock', //此处表示要在那个位置编写mock模拟数据的文件，默认是 src同级的mock目录
enable: true,
}),
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
},
server:{
proxy:{
// 带选项写法：http://localhost:5173/api/bar -> http://jsonplaceholder.typicode.com/bar
'/api': {
target: 'http://localhost:8080',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ''),
},
}
}
})使用
- 在mock目录下编写任意的ts文件 如
项目/mock/test.ts, - 在vue组件中发起网络请求（此处使用axios库），通过控制台可以查看到网络请求
ts
// test.ts
/**
* mock数据编写 方式 参考：http://mockjs.com/examples.html#Basic
*/
import { type MockMethod, type MockConfig } from 'vite-plugin-mock'
export default [{
url: '/api/user/get',
method: 'get',
response: ({ query }) => {
return {
name: "mockjs-data",
version: '1.0',
"users|10": [
{
"name": '@string("lower", 5)',
"age": '@integer(10,20)'
}
]
}
},
},
{
url: '/api/text',
method: 'post',
rawResponse: async (req, res) => {
let reqbody = ''
await new Promise((resolve) => {
req.on('data', (chunk) => {
reqbody += chunk
})
req.on('end', () => resolve(undefined))
})
res.setHeader('Content-Type', 'text/plain')
res.statusCode = 200
res.end(`hello, ${reqbody} 随机数：${Math.random()}`)
},
}
] as MockMethod[]
// export default function (config: MockConfig) {
// return [
// {
// url: '/api/text',
// method: 'post',
// rawResponse: async (req, res) => {
// let reqbody = ''
// await new Promise((resolve) => {
// req.on('data', (chunk) => {
// reqbody += chunk
// })
// req.on('end', () => resolve(undefined))
// })
// res.setHeader('Content-Type', 'text/plain')
// res.statusCode = 200
// res.end(`hello, ${reqbody}`)
// },
// },
// ]
// }vue
<template>
<button type="button" @click="query1('/api/user/get')">get: 测试mock请求1</button>
<button type="button" @click="query2('/api/text')">Post: 测试mock请求2</button>
<div v-if="result.name" class="result">
<h4>请求结果： 名字{{ result.name }} 版本：{{ result.version }}</h4>
<ul>
<li v-for="user in result.users">{{ user }}</li>
</ul>
</div>
<div v-if="postResult">
post请求结果: {{ postResult }}
</div>
</template>
<script setup lang="ts" name="Mock">
import { reactive, ref } from 'vue'
import axios from 'axios'
import { json } from 'stream/consumers';
//定义数据
let result = ref<{ name: string, version: number, users: object[] }>({
name: '',
version: 0,
users: []
})
let postResult = ref('')
async function query1(url: string) {
let { status, data } = await axios.get(url)
console.log(data)
result.value = data
}
async function query2(url: string) {
let { status, data } = await axios.post(url,{params:{name:'jsohn'}})
console.log(data)
postResult.value = data
}
</script>
<style scoped>
button{
margin-right: 20px;
}
.result {
min-height: 400px;
width: 600px;
border-radius: 10px;
box-shadow: 0 0 10px;
background-color: skyblue;
margin: 15px;
padding: 20px;
}
</style>