在vue 中使用Stylus
概述
什么是Stylus
- Stylus是一个CSS预处理器。
什么是CSS预处理器
- 关于CSS预处理器，推荐先行阅读这篇文章：为您详细比较三个 CSS 预处理器（框架）：Sass、LESS 和 Stylus
现在你应该对CSS预处理器有个大概的认识了，总的来说，CSS预处理器为CSS提供了更多的更加灵活的可编程性，是不是很棒！
选型
- 那么在SaaS，Less和Stylus中，为什么选择后者呢？因为Stylus是来源于Node.js社区，与js关系密切，所以基于Vue.js的开发，我们选择使用Stylus。
配置Stylus环境
安装
- 命令行中打
cnpm install stylus
在让编辑器支持Stylus
编辑器选型
对于编辑器的选择之前一直没有单独说过，这里稍微提一下，对于写Vue或者前端代码，这里推荐的有三个编辑器
- WebStorm
- VSCode
- Sublime Text
对于电脑配置较高的内存较大的，推荐使用WebStorm，这个编辑器很智能也很庞大，对于电脑配置稍低的，推荐使用后面两个。
另外，在编辑代码时，当时用后两种编辑器时，很依赖各种各样的插件
当你觉得使用的时候很不爽的时候
就去网上搜相应的插件
比如我需要Vue高亮语法的插件，就去搜索安装Vue插件
那么对于Stylus，我们也只需要安装Stylus的插件就可以了。
关于安装插件，这里有几个连接
- Sublime Text插件安装方法和常用插件
- Sublime Text写Vue
然后具体的不多说，大家可以百度谷歌
在编辑器安装支持Stylus
- 这个就是在编辑器安装Stylus高亮插件，sublime直接在搜索安装Stylus，WebStorm不需要单独安装插件，新建Stylus文件是，只需要New->stylesheet->stylus即可
PS.Stylus的拓展名是
.styl
初次使用
初始化项目
vue init webpack styluscd styluscnpm installcnpm install stylus --save-devcnpm install stylus-loader --save-dev
cnpm run dev
使用Stylus
在.vue文件中使用
引入单独的.styl文件
在写css之前，我新建了几个div
- 新建
.styl文件
- 编写Stylus
- 引入文件
- 查看效果
你要做的
- 配置好环境，保证能正常使用Stylus
- 学习Stylus的基础语法
- 在开发中使用Stylus的便捷特性
参考教程
- Stylus中文文档
- 官方文档
转载于:https://www.cnblogs.com/h2zZhou/p/7904565.html
在vue 中使用Stylus相关推荐
- 在Vue中使用JSX，很easy的
摘要:JSX 是一种 Javascript 的语法扩展,JSX = Javascript + XML,即在 Javascript 里面写 XML,因为 JSX 的这个特性,所以他即具备了 Javasc ...
- vue-cli构建的vue项目中引入stylus文件
stylus是css预处理器.还有另外两种css预处理器语言详解:less.sass. 不懂的可以先看一下这篇文章:stylus预处理入门 在vue项目引入stylus css预处理器,可以让我们的c ...
- stylus在vue中的使用
stylus是一个css预处理器,比较流行的css预处理器有sass.less.stylus,它们都一样,都是css的语法糖,可以使用变量,可以有简单的逻辑,使css的开发效率更高,更易维护.styl ...
- styl类型文件css,vue-cli构建的vue项目中引入stylus文件
stylus是css预处理器.还有另外两种css预处理器语言详解:less.sass. 不懂的可以先看一下这篇文章:stylus预处理入门 在vue项目引入stylus css预处理器,可以让我们的c ...
- stylus在vue中的安装及使用
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 目录 前言 一.安装stylus 二.使用步骤 1.使用stylus 2.引用全局样式及配置 总结 前言 之前在项目中经常使用sass ...
- vuecli3 引入全局scss变量_在vue-cli 3中给stylus、sass样式传入共享的全局变量
在vue-cli 3中, 给stylus.sass样式传入共享的全局变量 在开发中有时,我们定义了大量的基础样式变量,例如: 大量的vue单文件组件会用到这些变量,每个组件都引人一次又太麻烦.全局引入 ...
- 总结Vue中index.html、main.js、App.vue、index.js之间关系以及Vue项目加载流程
总结Vue中index.html.main.js.App.vue.index.js之间关系以及Vue项目加载流程 文章目录 总结Vue中index.html.main.js.App.vue.index ...
- Vue中的scoped和scoped穿透
1.什么是scoped 在Vue文件中的style标签上有一个特殊的属性,scoped.当一个style标签拥有scoped属性时候,它的css样式只能用于当前的Vue组件,可以使组件的样式不相互污染 ...
- vue中使用CSS预处理器
常见的stylus.sass.LESS vue中常用的是stylus,因为来源于node.js,与JS关系密切,语法灵活.方便易用.使用stylus可以使用变量.函数.循环来编写CSS样式文件. st ...
- vue中递归组件实现多级列表
一.递归组件的概念 递归组件: 递归组件简单来说在组件内使用组件本身.这个在vue的项目开发中也是比较常见的.对于一些多级的数据嵌套,如果对于每一层数据都进行for循环嵌套,那会非常繁琐,也很不方便. ...
最新文章
- 搭建Hadoop集群步骤
- 2019年上半年收集到的人工智能自动驾驶方向干货文章
- AI解梦成为现实 未来还有无限可能
- python从零基础到项目实战怎么样-Python 3.x网络爬虫从零基础到项目实战
- Jersey Restful Application with tomcat
- 最优传输理论和生成模型的几何观点
- 零拷贝（Zero Copy）
- Alibaba微服务事务Seata源码深度剖析 - 笔记
- 使用OpenCV画折线图
- hadoop eclipse windows
- 百度在线解析站不限速下载
- Towards Efficient Privacy-Preserving Inspection of TLS Encrypted Traffic
- PAT 乙级 1054. 求平均值 (20) Java版
- 最简单企业证书部署应用！In-House改进版！免HTTPS!
- js中~~和^=分别代表什么，用处是什么？
- Hadoop、Spark等5种大数据框架对比，你的项目该用哪种？
- 【随便唱唱】猫的报恩-幻化成风
- 单招软件职业技能测试,高职单招职业技能测试，这些知识你都了解吗？
- matlab如何把Excel数据合并,《matlab怎么合并excel单元格并赋值？》 matlab合并 excel表格数据...
- 注销公司是否需要办理注销呼叫中心许可证？