在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

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

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的便捷特性

參考教程

• Stylus中文文檔
• 官方文檔