zoukankan      html  css  js  c++  java
  • 在vue 中使用Stylus

    概述


    什么是Stylus

    • Stylus是一个CSS预处理器。

    什么是CSS预处理器

    选型

    • 那么在SaaS,Less和Stylus中,为什么选择后者呢?因为Stylus是来源于Node.js社区,与js关系密切,所以基于Vue.js的开发,我们选择使用Stylus。

    配置Stylus环境

    安装

    • 命令行中打cnpm install stylus

    image.png

    在让编辑器支持Stylus

    编辑器选型

    对于编辑器的选择之前一直没有单独说过,这里稍微提一下,对于写Vue或者前端代码,这里推荐的有三个编辑器

    • WebStorm
    • VSCode
    • Sublime Text

    对于电脑配置较高的内存较大的,推荐使用WebStorm,这个编辑器很智能也很庞大,对于电脑配置稍低的,推荐使用后面两个。
    另外,在编辑代码时,当时用后两种编辑器时,很依赖各种各样的插件
    当你觉得使用的时候很不爽的时候
    就去网上搜相应的插件
    比如我需要Vue高亮语法的插件,就去搜索安装Vue插件
    那么对于Stylus,我们也只需要安装Stylus的插件就可以了。
    关于安装插件,这里有几个连接

    在编辑器安装支持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

    image.png
    • cnpm run dev

    使用Stylus

    .vue文件中使用


    image.png

    引入单独的.styl文件

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

    • 新建.styl文件

    image.png
    • 编写Stylus

    image.png
    • 引入文件

    image.png
    • 查看效果

    image.png

    你要做的

    • 配置好环境,保证能正常使用Stylus
    • 学习Stylus的基础语法
    • 在开发中使用Stylus的便捷特性

    参考教程

  • 相关阅读:
    C. MP3(离散化 暴力)
    最大团、最小独立集
    欧拉函数
    In Touch(dijk+并查集优化)
    Path(2019 杭电多校第一场 ) hdu 6582(最短路模板+dinic模板)
    2019 南昌邀请赛 Winner (tarjan缩点)
    mybatis主键回填和自定义
    mybatis配置xml文件的层次结构
    Paratroopers
    Dual Core CPU
  • 原文地址:https://www.cnblogs.com/gopark/p/8157319.html
Copyright © 2011-2022 走看看