我所遇到的问题

在style中用 sass

报错

运行

在vue中用echats

<template>
	<div>
		<div class="wen">
			<div class="w" ref="w"></div>
		</div>
	</div>
</template>

<script>
	export default {
		mounted() {
			// 初始化chart1实例
			const chart1 = echarts.init(this.$refs.w)
			// 使用图表并且配置图表的配置项和数据
			chart1.setOption({
				title: {
					text: 'ECharts 入门示例'
				},
				tooltip: {},
				xAxis: {
					data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
				},
				yAxis: {},
				series: [{
					name: '销量',
					type: 'bar',
					data: [5, 20, 36, 10, 10, 20]
				}]
			});
		}
	}
</script>


<style scoped lang="scss">
	.wen {
		.w {
			width: 500px;
			height: 500px;
			background: red;
		}
	}
</style>

报错

从 npm 获取

npm install echarts

然后在页面的script中添加

import * as echarts from 'echarts';

位置

或者可以进行全局配置
echarts全局配置
在main.js中

   import Vue from 'vue';
   import App from './App.vue';
   import * as echarts from 'echarts';

   // 全局挂载Echarts到Vue的原型对象上
   Vue.prototype.$echarts = echarts;

   new Vue({
     render: h => h(App),
   }).$mount('#app');

在正常的vue组件中使用echarts

<script>
	export default {
		mounted() {
			this.initChart()
		},
		methods: {
			initChart() {=
			// 基于准备好的dom，初始化echarts实例， 这里可以使用ref来实例化
				const chartDom = document.getElementById('main');
				//这里使用echarts    this.$echarts.这是关键
				const myChart = this.$echarts.init(chartDom);
				// 设置图表配置项
				myChart.setOption({
					title: {
						text: 'ECharts 入门示例'
					},
					tooltip: {},
					xAxis: {
						data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
					},
					yAxis: {},
					series: [
						{
							name: '销量',
							type: 'bar',
							data: [5, 20, 36, 10, 10, 20]
						}
					]
				});
			},
		},
	}
</script>

input修改默认值的颜色

::placeholder 是 CSS 中的一个伪元素，用于选择并样式化 HTML 输入字段中的占位符文本。占位符文本是在用户尚未输入任何内容时显示的提示信息，通常用于指示用户应该输入什么类型的数据。当用户开始输入时，占位符文本会消失。::placeholder 伪元素允许开发者通过 CSS 来定制占位符文本的外观，例如颜色、字体大小和对齐方式等。

.el-input__inner::placeholder {
              color: #FFFFFF;
            }

vue中自带的功能（强制页面重新渲染）

          this.$forceUpdate();

ref调用（ref中对应的方法）

 	<Ccontent ref="Ccontent"/>

	//确定Ccontent里面有showModle方法
	this.$refs['Ccontent'].showModle()
	

有大量的重复对象需要些，console.log打印出来

		const jsonString = JSON.stringify(shujung, null, 2);
		const formattedString = jsonString.replace(/"([^"]+)":/g, '$1:');

效果：

我再用unocss的时候想要自定义长度怎么办

flex-basis-[20%]  ⇒ flex-basis: 20%
同理vh或其他也是，用【】就可以自定义高度了
max-h-[60vh] ⇒ max-height: 60vh

vue 组件式传值(defineModel方法)

defineModel 是 Vue 3.4 及以上版本引入的一个全新 Composition API，
用于简化组件双向绑定的实现，
是对传统 props + emit('update:modelValue') 模式的语法糖封装。
它允许子组件声明一个支持双向绑定的响应式变量，
父组件可以直接通过 v-model 与其子组件进行数据同步，无需手动声明 props 和 emit。

//写法是这样的
/**
*value 对应的是的 prop的字段名，这里的value可以进行自定义，可以为xxx。可以不写，默认时Value
*type: 字段类型，可以不写
*default: 默认值，当没有传时的默认值，可以不写
**/
//子组件
    const servceDesc = defineModel('value', {
        type: String,
        default: '默认值'
    })
//父组件
	<Child v-model="parentCount" />