1、Vue中的CSS
在Vue项目中，经常有以下两种CSS写法：
- vue文件template中的内联样式
- vue文件下方的style标签中的内部样式 具体实现如下：
<template>
<!-- 下面div中的style样式就是内联样式 -->
<div style="padding: 0 10px;">
<!-- 页面标题 -->
<div class="title-css">
这里面是页面标题的内容
</div>
</div>
</template>
<script>
</script>
<!-- 下面style标签中的样式就是内部样式 -->
<style scoped>
/* 设置页面居中标题: 居中大字加粗上下间距 */
.title-css {
font-size: 25px;
font-weight: bold;
text-align: center;
margin-top: 15px;
margin-bottom: 15px;
}
</style>
以上写法虽然比较方便快捷，但是也存在一些问题：
- 内联样式的优先级问题：内联样式的优先级大于用选择器的样式，因此内联样式难以在后期进行替换覆盖，只能手动去修改相应的内联样式
- 内联样式和内部样式比较难维护，不利于团队开发：页面中往往有很多样式是通用的，是具有共性的，当需求发生变更时，去修改内联样式和内部样式会比较困难
总之为了提升代码的可维护性，应当尽量不使用内联样式，少使用内部样式
2、Vue中如何封装public.css
为了提升代码的可维护性，我们经常需要实现public.css，在其中封装了一些公用的基本样式，各个页面都可以直接使用这些样式，这样可以避免重复性的开发工作，降低代码的耦合度。
Vue中往往把css文件写在/src/assets/css目录下，然后引入css的方式大致有以下几种：
- 在入口js文件main.js中引入
- 在index.html中引入
- 在app.vue中引入
我的项目中是采取的在app.vue中引入，引入代码如下：
<template>
<div id="app">
<router-view />
</div>
</template>
<script>
// 导入公共样式
import './assets/css/public.css'
export default {
name: 'App',
components: {
},
mounted() {
window.addEventListener('unload',this.saveState)
},
methods:{
saveState(){
sessionStorage.setItem('state',JSON.stringify(this.$store.state))
}
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
/*margin-top: 60px;*/
}
</style>
对app.vue的说明：app.vue是vue页面资源的首加载项，是主组件(页面入口文件)，所有页面都是在App.vue下进行切换的，相当于React项目中的app.js
public.css代码如下：
/* 这里面封装了页面的全局样式 */
/* 页面中居中标题的公用样式: 居中大字加粗上下间距 */
.title-css {
font-size: 25px;
font-weight: bold;
text-align: center;
margin-top: 15px;
margin-bottom: 15px;
}
/* 页面中靠左标题的公用样式: 靠左大字加粗 */
.left-title-css{
font-size: 25px;
font-weight: bold;
text-align: left;
}
/* 模态框内部表单宽度为350px */
.modal-form-350 {
width: 350px;
margin: 0 auto;
}
/* 设置模态框内部输入框的宽度 */
.modal-form-350 .el-input{
width: 220px;
}
3、Vue中使用less
什么是less
Less 是一种 CSS 的预处理语言，它在 CSS 的基础上增加了一些编程语言的特性，可以提升我们编写 CSS 的效率，减少很多重复性的代码，最终编译成纯净的 CSS 代码执行。Less 是 CSS 的超集，就像我们使用的 TS 和 JS 的关系，我们也可以把 Less 完全当作 CSS 来使用。
为什么要用less
CSS存在以下缺点：
- 语法不够强大，比如无法嵌套书写，导致模块化开发中需要书写很多重复的选择器，导致可读性差
- 没有合理的样式复用机制，也不能明确指定继承性，导致可维护性差
这就导致了我们在工作中无端增加了许多工作量。而使用CSS预处理器，提供 CSS 缺失的样式层复用机制、减少冗余代码，提高样式代码的可维护性。大大提高了我们的开发效率。less就是一种CSS预处理器，而且le***起来比较简单，因此我们在前端项目中使用less来提升CSS代码的可读性和可维护性
less的特性
less具备以下特性：
- 变量（Variables）：尽管less提供了变量，但是现在各大浏览器都支持CSS原生变量了，而且是动态的，有些时候使用原生变量会是一种更好的选择，如果需要考虑兼容性，可以使用 Less 的变量
- 混合（Mixins）：是将一组属性从一个规则集混入到另一个规则集的方法
- 嵌套（Nesting）：提供了嵌套代替层叠或者与层叠结合使用的能力
- 导入（Importing）：less可将另外一个Less文件导入进来，例如可以把变量样式都定义在一个单独的Less模块中，其他文件都来引用它，通常常用这种方式来控制主题样式，当需要修改主题的时候，只需要修改变量文件中的值，然后重新编译即可
后面以嵌套为例简单演示一下less在vue项目中的使用，其他特性不做进一步详述，有兴趣自行了解
le***与简单使用
- 可通过
npm来将less编译器安装为一个命令:npm i less -g - 然后我们可以通过
lessc命令来编译less文件了:lessc test.less - 上面的命令会直接打印编译之后的结果，如果要输出到文件，可以加上输出文件名:
lessc test.less test.css
Vue中使用less
使用 vue cli 创建的项目无需额外配置，只需下载合适版本的 less 以及 less-loader 即可使用 less: npm i -D less less-loader@6
成功导入less之后，把之前的public.css改为public.less，然后在里面写less代码即可，导入less的方法同导入css一样在app.vue中导入，只需把文件后缀名改为less即可：
<template>
<div id="app">
<router-view />
</div>
</template>
<script>
// 导入公共样式
import './assets/css/public.less'
export default {
name: 'App',
components: {
},
mounted() {
window.addEventListener('unload',this.saveState)
},
methods:{
saveState(){
sessionStorage.setItem('state',JSON.stringify(this.$store.state))
}
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
/*margin-top: 60px;*/
}
</style>
public.less代码如下：
/* 这里面封装了页面的全局样式 */
/* 页面中居中标题的公用样式: 居中大字加粗上下间距 */
.title-css {
font-size: 25px;
font-weight: bold;
text-align: center;
margin-top: 15px;
margin-bottom: 15px;
}
/* 页面中靠左标题的公用样式: 靠左大字加粗 */
.left-title-css{
font-size: 25px;
font-weight: bold;
text-align: left;
}
/* 下面是less的嵌套写法, 相比css更加简单易懂 */
/* 模态框内部表单宽度为350px */
.modal-form-350 {
width: 350px;
margin: 0 auto;
// 设置模态框内部输入框的宽度
.el-input{
width: 220px;
}
}
京公网安备 11010502036488号