Vue组件之style - lang - scoped 和 vue模板 sass安装

Vue组件之style - lang - scoped

• lang

  • 这是标明你书写css的样式类型 有着 scss css less 默认是css
    <style lang="scss"></style>

• scoped

  • 作用：就是设置当前组件的样式，只能在当前组件起作用
  • 注意点：就是别的组件修改当前组件的时候，是默认不课被修改的！
  • 原因：
    • 这是因为webpack打包的时候，会把js,css等文件一起打包到bundle.js文件，或者 把css另外打包到一个 .js文件，那么就会引起一个问题，就是里面的样式会共享，产生一定的影响！因此使用scoped这个属性，可以使得当前组件样式，在当前组件起作用
  • scoped的原理：
    • 属性选择器
      • 1：给当前组件所有元素添加一个自定义属性 形式 => data-v-2311c06a
      • 2：在每句css选择器的末尾（编译后的生成的css语句）加一个当前组件的data属性选择器（如[data-v-2311c06a]）来私有化样式

• 使用scoped的时候，由不得不修改其他引入的组件，那么因此有着两种方式去处理

  • 1：在新增一个 style标签 <style></style> 里面不用带scoped这个属性
  • 2：在当前类名 /deep/ (这是在css的状态下) 或者 ::v-deep (这是在scss,css都可以使用) 推荐使用
  • 3：使用 >>> 样式类名等 >>> 这是一个选择器

<style  scoped>
::v-deep .el-input .el-input-group__append {
  padding: 0;
  margin: 0;
}
::v-deep .vcode {
  position: relative;
  width: 110px;
  height: 38px;
  line-height: 30px;
  background-color: #58bc58;
}
 .el-input .vcode svg {
  position: absolute;
  top: -5px;
  left: -20px;
  height: 40px;
}
</style>

vue模板

• 怎么使用快捷键创建一个vue模板？ 这是一个值得学习的一个操作！
• 步骤：打开VScode,找到设置 => 用户代码片段 => 找到vue.json 文件 => 替换内部文件

{
	"Print to console": {
		"prefix": "vue",
		"body": [
			"<template>",
			"  <div></div>",
			"</template>",
			"",
			"<script>",
			"export default {",
			"  name: '$TM_FILENAME_BASE',",
			"  data () {",
			"    return {",
			"    };",
			"  },",
			"  methods: {},",
			"  components: {},",
			"}",
			"",
			"</script>",
			"<style  lang=\"scss\" scoped>",
			"</style>"
		],
		"description": "Log output to console"
	}
}

vue.2 setup模板

	// vue3 模板
	"Print to console": {
		"prefix": "vue3",
		"body": [
				"<template>",
				"  <div></div>",
				"</template>",
				"",
				"<script setup lang=\"ts\" name='$TM_FILENAME_BASE'>",
				"import { } from 'vue'",
				"</script>",
				"",
				"<style  lang=\"scss\" scoped>",
				"</style>"
		],
		"description": "Log output to console"
	},

vue3.0模板

• 使用 vuee快捷键生成

	"Print to console1": {
		"prefix": "vuee",
		"body": [
			"<template>",
			"  <div></div>",
			"</template>",
			"",
			"<script>",
			"import { defineComponent} from 'vue';",
			"export default defineComponent({",
			"  name: '$TM_FILENAME_BASE',",
			" components: {},",
			" setup() {",
			"return {}",
			"},",
			"})",
			"",
			"</script>",
			"<style  lang=\"scss\" scoped>",
			"</style>"
		],
		"description": "Log output to console"
	}

sass 的安装

• 第一步：npm i sass
• 第二步：npm install sass-loader@10.0.5 --save
• 运行即可
• 注意点：安装sass-loader 不需要安装最新的版本，否则的话会出现报错等问题，需要指定某个版本安装即可！

注意点：解决node和node-sass版本问题

npm rebuild node-sass

npm update