在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

p_w_picpath.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

p_w_picpath.png

• cnpm run dev

使用Stylus

在.vue文件中使用

p_w_picpath.png

引入單獨的.styl文件

在寫css之前，我新建了幾個div

• 新建.styl文件

p_w_picpath.png

• 編寫Stylus

p_w_picpath.png

• 引入文件

p_w_picpath.png

• 查看效果

p_w_picpath.png

你要做的

• 配置好環境，保證能正常使用Stylus

• 學習Stylus的基礎語法

• 在開發中使用Stylus的便捷特性