【构建前端第3篇之---使用scss】的更多相关文章

构建前端第3篇之---使用scss

张艳涛 写于2021-1-20 主要解决俩个问题: 在单个vue文件中 <style rel="stylesheet/scss" lang="scss"> 不能解析 如何在全局引入scss What: scss是什么? scss是带有语法,可编程的css,比如说scss有变量,scss有嵌套结构,这些都是css没有的,如果style标签中使用的是scss是需要解析成css才能被识别,就好像java需要编译成二进制语言才能被计算机识别和执行. 问题1,不能…

构建前端第12篇之---在Vue中对组件,变量,函数的全局引入

张燕涛写于2020-01-16 星期two 本篇还是源于import和export的使用,昨天看es6入门 和MDN文档,大体上用法了解了,但今天看ElementUI源码的时候,看到 //src/index.js中export default { version: '2.15.0', locale: locale.use, i18n: locale.i18n, install, CollapseTransition, Loading, Pagination, Dialog, Autocomple…

构建前端第7篇之---elementUI设置主题,进而改变全局button底色

张艳涛写于2020-1-20 What:是elementUI主题? 是内置的格式,elementUI默认只有一个主题,如果想整体替换按钮的颜色等问题,那么就可以用主题 设置步骤 在路径src/styles/element-variables.scss新建文件 内容为 /** * I think element-ui's default theme color is too light for long-term use. * So I modified the default color and…

构建前端第6篇之---内嵌css样式 <el-button style="width:100%"> 登录 </el-button>

张艳涛写于2021-1-20日 What: 如何让button的长度和input长度一致呢 最先想到的是给这个button加一个class ="buttonclass",然后在vue最后的<style标签中>设置 .buttonclass { width : 100%; } 这个前两篇设置height为100%的方法是一致的. 还有一个更简单的方法就是内联式css <el-form-item><el-button > 登录 </el-butto…

构建前端第5篇之---修改css样式的思路

张艳涛写于2020-1-20 在页面元素布局的时候,在知道应该如何设置元素的属性的时候,可以依照如下思路,使用chrome浏览器,打开f12,找到对应的最近元素,看右侧对于的css样式窗口,调整修改数值,看到效果变化了,之后找就可以在全局样式scss中设置,自定义的值 .el-form-item { //全局设置上线间距为10px,默认为22px,框架自带 margin-bottom: 10px; } 如图片下…

构建前端第4篇之---使用css用法 height

张艳涛 写于2021-1-20 height: 100%; What:  html的元素标签,例如 <html>,<body>,<div>都有height的css属性,那么将div的heigh:属性设置成100%,意味什么 答案是:基于父级元素的百分比 /在全局scss文件中定义了 html { height: 100%; box-sizing: border-box; } body { height: 100%; -moz-osx-font-smoothing: gr…

构建前端第2篇之--ESLint 配置

张艳涛 写于2021-1-19 报错: http://eslint.org/docs/rules/space-before-function-paren Missing space before function parentheses 如果开启用vue-li 构建项目的时候选择开启,则不符合eslint 在npm run dev 就会报错 那么需要更改配置,使得npm run dev 能通过,网上说有两处,一处将其注解,一处将其改为false ,具体原理准备阅读node.js的书籍来了解 上图…

构建前端第13篇之---VUE的method:{}的括号未括到方法导致 _vm.linkProps is not a function

…

构建前端第10篇之---Function.prototype.call()

张艳涛写于2020-01-25,参考:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/call call() 方法使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数 语法 function.call(thisArg, arg1, arg2, ...) 参数 thisArg可选的.在 function 函数运行时使用的 this 值.请注意,this…

构建前端第9篇之(下)---vue3.0将template转化为render的过程

vue3.0将template转化为render的过程 这里是简单标记下,如何将.vue转换成js文件 具体的,先不研究了,太深,能力有限,达不到呢…