在Vue.js中使用Stylus预解决器

  • 时间:2018-10-04 23:18 作者:im程序猿 来源:im程序猿 阅读:161
  • 扫一扫,手机访问
摘要:概述什么是StylusStylus是一个CSS预解决器。什么是CSS预解决器关于CSS预解决器,推荐先行阅读这篇文章:为您详细比较三个 CSS 预解决器(框架):Sass、LESS 和 Stylus 现在你应该对CSS预解决器有个大概的认识了,总的来说,CSS预解决器为CSS提供了更多的更加灵活的可

概述


什么是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
在Vue.js中使用Stylus预解决器

image.png

在让编辑器支持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 stylus
  • cd stylus
  • cnpm install
  • cnpm install stylus --save-dev
  • cnpm install stylus-loader --save-dev
在Vue.js中使用Stylus预解决器

image.png

  • cnpm run dev

使用Stylus

在.vue文件中使用

在Vue.js中使用Stylus预解决器

image.png

引入单独的.styl文件

在写css之前,我新建了几个div

在Vue.js中使用Stylus预解决器

  • 新建.styl文件
在Vue.js中使用Stylus预解决器

image.png

  • 编写Stylus
在Vue.js中使用Stylus预解决器

image.png

  • 引入文件
在Vue.js中使用Stylus预解决器

image.png

  • 查看效果
在Vue.js中使用Stylus预解决器

参考链接:https://www.jianshu.com/p/94bd258f7e99

  • 全部评论(0)
最新发布的资讯信息
【系统环境|】你是HTML 5的一员吗?(2019-08-15 11:58)
【系统环境|】Web前端基础怎么学?html、css、JavaScript 知识架构图(2019-08-14 17:55)
【系统环境|】零基础小白走Web前端之路是否可行?答案是yes!(2019-08-13 11:44)
【系统环境|】你知道Web前端与HTML5技术的区别吗?(2019-08-12 14:10)
【系统环境|】移动前端开发和web前端开发的区别(2019-08-11 16:49)
【系统环境|】给新手的锦囊:Web前端开发小白的学习建议和路线图(2019-08-10 16:34)
【系统环境|】都说web前端开发薪资高,入行就有上万月薪,转行难吗?(2019-08-09 14:55)
【系统环境|】干货教程 | Web前端开发学习入门指南(2019-08-08 18:27)
【系统环境|】前端开发:vue路由之前端路由的原理(2019-08-07 13:17)
【系统环境|】你不知道的web前端那些事(2019-08-06 12:29)
手机二维码手机访问领取大礼包
返回顶部